Migrate button component to components/button

button/_elevated-button.scss

@@ -3,4 +3,4 @@
 // SPDX-License-Identifier: Apache-2.0
 //
 
-@forward './internal/elevated-button' show theme;
+@forward '../components/button/elevated-button';

button/_filled-button.scss

@@ -3,4 +3,4 @@
 // SPDX-License-Identifier: Apache-2.0
 //
 
-@forward './internal/filled-button' show theme;
+@forward '../components/button/filled-button';

button/_filled-tonal-button.scss

@@ -3,4 +3,4 @@
 // SPDX-License-Identifier: Apache-2.0
 //
 
-@forward './internal/filled-tonal-button' show theme;
+@forward '../components/button/filled-tonal-button';

button/_outlined-button.scss

@@ -3,4 +3,4 @@
 // SPDX-License-Identifier: Apache-2.0
 //
 
-@forward './internal/outlined-button' show theme;
+@forward '../components/button/outlined-button';

button/_text-button.scss

@@ -3,4 +3,4 @@
 // SPDX-License-Identifier: Apache-2.0
 //
 
-@forward './internal/text-button' show theme;
+@forward '../components/button/text-button';

button/elevated-button.ts

@@ -4,47 +4,4 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import {CSSResultOrNative} from 'lit';
-import {customElement} from 'lit/decorators.js';
-
-import {ElevatedButton} from './internal/elevated-button.js';
-import {styles as elevatedStyles} from './internal/elevated-styles.js';
-import {styles as sharedElevationStyles} from './internal/shared-elevation-styles.js';
-import {styles as sharedStyles} from './internal/shared-styles.js';
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'md-elevated-button': MdElevatedButton;
-  }
-}
-
-/**
- * @summary Buttons help people take action, such as sending an email, sharing a
- * document, or liking a comment.
- *
- * @description
- * __Emphasis:__ Medium emphasis – For important actions that don’t distract
- * from other onscreen elements.
- *
- * __Rationale:__ Elevated buttons are essentially filled buttons with a lighter
- * background color and a shadow. To prevent shadow creep, only use them when
- * absolutely necessary, such as when the button requires visual separation from
- * a patterned background.
- *
- * __Example usages:__
- * - Reply
- * - View all
- * - Add to cart
- * - Take out of trash
- *
- * @final
- * @suppress {visibility}
- */
-@customElement('md-elevated-button')
-export class MdElevatedButton extends ElevatedButton {
-  static override styles: CSSResultOrNative[] = [
-    sharedStyles,
-    sharedElevationStyles,
-    elevatedStyles,
-  ];
-}
+export * from '../components/button/elevated-button.js';

button/filled-button.ts

@@ -4,45 +4,4 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import {CSSResultOrNative} from 'lit';
-import {customElement} from 'lit/decorators.js';
-
-import {FilledButton} from './internal/filled-button.js';
-import {styles as filledStyles} from './internal/filled-styles.js';
-import {styles as sharedElevationStyles} from './internal/shared-elevation-styles.js';
-import {styles as sharedStyles} from './internal/shared-styles.js';
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'md-filled-button': MdFilledButton;
-  }
-}
-
-/**
- * @summary Buttons help people take action, such as sending an email, sharing a
- * document, or liking a comment.
- *
- * @description
- * __Emphasis:__ High emphasis – For the primary, most important, or most common
- * action on a screen
- *
- * __Rationale:__ The filled button’s contrasting surface color makes it the
- * most prominent button after the FAB. It’s used for final or unblocking
- * actions in a flow.
- *
- * __Example usages:__
- * - Save
- * - Confirm
- * - Done
- *
- * @final
- * @suppress {visibility}
- */
-@customElement('md-filled-button')
-export class MdFilledButton extends FilledButton {
-  static override styles: CSSResultOrNative[] = [
-    sharedStyles,
-    sharedElevationStyles,
-    filledStyles,
-  ];
-}
+export * from '../components/button/filled-button.js';

button/filled-tonal-button.ts

@@ -4,46 +4,4 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import {CSSResultOrNative} from 'lit';
-import {customElement} from 'lit/decorators.js';
-
-import {FilledTonalButton} from './internal/filled-tonal-button.js';
-import {styles as tonalStyles} from './internal/filled-tonal-styles.js';
-import {styles as sharedElevationStyles} from './internal/shared-elevation-styles.js';
-import {styles as sharedStyles} from './internal/shared-styles.js';
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'md-filled-tonal-button': MdFilledTonalButton;
-  }
-}
-
-/**
- * @summary Buttons help people take action, such as sending an email, sharing a
- * document, or liking a comment.
- *
- * @description
- * __Emphasis:__ Medium emphasis – For important actions that don’t distract
- * from other onscreen elements.
- *
- * __Rationale:__ Filled tonal buttons have a lighter background color and
- * darker label color, making them less visually prominent than a regular,
- * filled button. They’re still used for final or unblocking actions in a flow,
- * but do so with less emphasis.
- *
- * __Example usages:__
- * - Save
- * - Confirm
- * - Done
- *
- * @final
- * @suppress {visibility}
- */
-@customElement('md-filled-tonal-button')
-export class MdFilledTonalButton extends FilledTonalButton {
-  static override styles: CSSResultOrNative[] = [
-    sharedStyles,
-    sharedElevationStyles,
-    tonalStyles,
-  ];
-}
+export * from '../components/button/filled-tonal-button.js';

button/harness.ts

@@ -4,16 +4,4 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import {Harness} from '../testing/harness.js';
-
-import {Button} from './internal/button.js';
-
-/**
- * Test harness for buttons.
- */
-export class ButtonHarness extends Harness<Button> {
-  protected override async getInteractiveElement() {
-    await this.element.updateComplete;
-    return this.element.renderRoot.querySelector('.button') as HTMLElement;
-  }
-}
+export * from '../components/button/harness.js';

button/outlined-button.ts

@@ -4,42 +4,4 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import {CSSResultOrNative} from 'lit';
-import {customElement} from 'lit/decorators.js';
-
-import {OutlinedButton} from './internal/outlined-button.js';
-import {styles as outlinedStyles} from './internal/outlined-styles.js';
-import {styles as sharedStyles} from './internal/shared-styles.js';
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'md-outlined-button': MdOutlinedButton;
-  }
-}
-
-/**
- * @summary Buttons help people take action, such as sending an email, sharing a
- * document, or liking a comment.
- *
- * @description
- * __Emphasis:__ Medium emphasis – For important actions that don’t distract
- * from other onscreen elements.
- *
- * __Rationale:__ Use an outlined button for actions that need attention but
- * aren’t the primary action, such as “See all” or “Add to cart.” This is also
- * the button to use for giving someone the opportunity to change their mind or
- * escape a flow.
- *
- * __Example usages:__
- * - Reply
- * - View all
- * - Add to cart
- * - Take out of trash
- *
- * @final
- * @suppress {visibility}
- */
-@customElement('md-outlined-button')
-export class MdOutlinedButton extends OutlinedButton {
-  static override styles: CSSResultOrNative[] = [sharedStyles, outlinedStyles];
-}
+export * from '../components/button/outlined-button.js';

button/text-button.ts

@@ -4,40 +4,4 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import {CSSResultOrNative} from 'lit';
-import {customElement} from 'lit/decorators.js';
-
-import {styles as sharedStyles} from './internal/shared-styles.js';
-import {TextButton} from './internal/text-button.js';
-import {styles as textStyles} from './internal/text-styles.js';
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'md-text-button': MdTextButton;
-  }
-}
-
-/**
- * @summary Buttons help people take action, such as sending an email, sharing a
- * document, or liking a comment.
- *
- * @description
- * __Emphasis:__ Low emphasis – For optional or supplementary actions with the
- * least amount of prominence
- *
- * __Rationale:__ Text buttons have less visual prominence, so should be used
- * for low emphasis actions, such as an alternative option.
- *
- * __Example usages:__
- * - Learn more
- * - View all
- * - Change account
- * - Turn on
- *
- * @final
- * @suppress {visibility}
- */
-@customElement('md-text-button')
-export class MdTextButton extends TextButton {
-  static override styles: CSSResultOrNative[] = [sharedStyles, textStyles];
-}
+export * from '../components/button/text-button.js';

components/button/_elevated-button.scss

@@ -0,0 +1,6 @@
+//
+// Copyright 2021 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+@forward './internal/elevated-button' show theme;

components/button/_filled-button.scss

@@ -0,0 +1,6 @@
+//
+// Copyright 2021 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+@forward './internal/filled-button' show theme;

components/button/_filled-tonal-button.scss

@@ -0,0 +1,6 @@
+//
+// Copyright 2021 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+@forward './internal/filled-tonal-button' show theme;

components/button/_outlined-button.scss

@@ -0,0 +1,6 @@
+//
+// Copyright 2021 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+@forward './internal/outlined-button' show theme;

components/button/_text-button.scss

@@ -0,0 +1,6 @@
+//
+// Copyright 2021 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+@forward './internal/text-button' show theme;

components/button/elevated-button.ts

@@ -0,0 +1,50 @@
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {CSSResultOrNative} from 'lit';
+import {customElement} from 'lit/decorators.js';
+
+import {ElevatedButton} from './internal/elevated-button.js';
+import {styles as elevatedStyles} from './internal/elevated-styles.js';
+import {styles as sharedElevationStyles} from './internal/shared-elevation-styles.js';
+import {styles as sharedStyles} from './internal/shared-styles.js';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'md-elevated-button': MdElevatedButton;
+  }
+}
+
+/**
+ * @summary Buttons help people take action, such as sending an email, sharing a
+ * document, or liking a comment.
+ *
+ * @description
+ * __Emphasis:__ Medium emphasis – For important actions that don’t distract
+ * from other onscreen elements.
+ *
+ * __Rationale:__ Elevated buttons are essentially filled buttons with a lighter
+ * background color and a shadow. To prevent shadow creep, only use them when
+ * absolutely necessary, such as when the button requires visual separation from
+ * a patterned background.
+ *
+ * __Example usages:__
+ * - Reply
+ * - View all
+ * - Add to cart
+ * - Take out of trash
+ *
+ * @final
+ * @suppress {visibility}
+ */
+@customElement('md-elevated-button')
+export class MdElevatedButton extends ElevatedButton {
+  static override styles: CSSResultOrNative[] = [
+    sharedStyles,
+    sharedElevationStyles,
+    elevatedStyles,
+  ];
+}

button/elevated-button_test.ts → components/button/elevated-button_test.ts

@@ -6,7 +6,7 @@
 
 // import 'jasmine'; (google3-only)
 
-import {createTokenTests} from '../testing/tokens.js';
+import {createTokenTests} from '../../testing/tokens.js';
 
 import {MdElevatedButton} from './elevated-button.js';