chore: Reorganize segmented button files with explicit variant naming

PiperOrigin-RevId: 442985520

components/segmented-button/lib/_outlined-segmented-button-theme.scss

@@ -0,0 +1,18 @@
+//
+// Copyright 2022 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+@use '../../sass/resolvers';
+
+$light-theme: (/* TODO(b/213634341): Write styles. */);
+
+$dark-theme: (/* TODO(b/213634341): Write styles. */);
+
+@mixin theme($theme, $resolvers: resolvers.$material) {
+  /* TODO(b/213634341): Write styles. */
+}
+
+@mixin theme-styles($theme, $resolvers: resolvers.$material) {
+  /* TODO(b/213634341): Write styles. */
+}

components/segmented-button/lib/_outlined-segmented-button.scss

@@ -0,0 +1,12 @@
+//
+// Copyright 2022 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+// stylelint-disable selector-class-pattern -- allow `md3-` class selectors.
+
+@mixin static-styles() {
+  .md3-segmented-button--outlined {
+    // TODO(b/213634341): Write styles.
+  }
+}

components/segmented-button/lib/_segmented-button.scss

@@ -3,10 +3,16 @@
 // SPDX-License-Identifier: Apache-2.0
 //
 
+// stylelint-disable selector-class-pattern -- allow `md3-` class selectors.
+
 @mixin static-styles() {
   // TODO(b/213634341): Write styles.
   :host {
     display: inline-flex;
     outline: none;
   }
+
+  .md3-segmented-button {
+    outline: none;
+  }
 }

components/segmented-button/lib/outlined-multi-select-segmented-button.ts

@@ -0,0 +1,21 @@
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {ClassInfo} from 'lit/directives/class-map';
+
+import {MultiSelectSegmentedButton} from './segmented-button';
+
+/** @soyCompatible */
+export class OutlinedMultiSelectSegmentedButton extends
+    MultiSelectSegmentedButton {
+  /** @soyTemplate */
+  protected override getRenderClasses(): ClassInfo {
+    return {
+      ...super.getRenderClasses(),
+      'md3-segmented-button--outlined': true,
+    };
+  }
+}

components/segmented-button/lib/outlined-single-select-segmented-button.ts

@@ -0,0 +1,21 @@
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {ClassInfo} from 'lit/directives/class-map';
+
+import {SingleSelectSegmentedButton} from './segmented-button';
+
+/** @soyCompatible */
+export class OutlinedSingleSelectSegmentedButton extends
+    SingleSelectSegmentedButton {
+  /** @soyTemplate */
+  protected override getRenderClasses(): ClassInfo {
+    return {
+      ...super.getRenderClasses(),
+      'md3-segmented-button--outlined': true,
+    };
+  }
+}

components/segmented-button/lib/outlined-styles.scss

@@ -0,0 +1,17 @@
+//
+// Copyright 2022 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+// stylelint-disable selector-class-pattern -- allow `md3-` class selectors.
+
+@use './outlined-segmented-button';
+@use './outlined-segmented-button-theme';
+
+@include outlined-segmented-button.static-styles;
+
+.md3-button--outlined {
+  @include outlined-segmented-button-theme.theme-styles(
+    outlined-segmented-button-theme.$light-theme
+  );
+}

components/segmented-button/lib/segmented-button.ts

@@ -8,6 +8,7 @@
 
 import {html, LitElement, TemplateResult} from 'lit';
 import {property, query, state} from 'lit/decorators';
+import {ClassInfo, classMap} from 'lit/directives/class-map';
 import {ifDefined} from 'lit/directives/if-defined';
 
 import {SegmentedButtonFoundation} from './foundation';
@@ -53,15 +54,24 @@ export abstract class SegmentedButton extends LitElement implements
 
   override render(): TemplateResult {
     return html`
-      <button role="option" tabindex="${
-        this.focusable ? '0' : '-1'}" aria-selected=${
-        ifDefined(this.ariaSelectedValue)} .disabled=${this.disabled}>
+      <button role="option"
+        tabindex="${this.focusable ? '0' : '-1'}"
+        aria-selected=${ifDefined(this.ariaSelectedValue)}
+        .disabled=${this.disabled}
+        class="md3-segmented-button ${classMap(this.getRenderClasses())}">
         <span aria-hidden="true">${this.selected ? '✔' : ''}</span>
         <span>${this.label ?? ''}</span>
       </button>
     `;
   }
 
+  /** @soyTemplate */
+  protected getRenderClasses(): ClassInfo {
+    return {
+        // TODO(b/213634341): Write styles.
+    };
+  }
+
   focusButton() {
     this.option.focus();
   }

components/segmented-button/multi-select-segmented-button.ts

@@ -1,26 +0,0 @@
-/**
- * @license
- * Copyright 2021 Google LLC
- * SPDX-License-Identifier: Apache-2.0
- */
-
-import {customElement} from 'lit/decorators';
-
-import {MultiSelectSegmentedButton} from './lib/segmented-button';
-import {styles} from './lib/shared-styles.css';
-
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'md-multi-select-segmented-button': MdMultiSelectSegmentedButton;
-  }
-}
-
-/**
- * MdMultiSelectSegmentedButton is the custom element for the Material Design
- * multi-select segmented button component.
- */
-@customElement('md-multi-select-segmented-button')
-export class MdMultiSelectSegmentedButton extends MultiSelectSegmentedButton {
-  static override styles = [styles];
-}

components/segmented-button/outlined-multi-select-segmented-button.ts

@@ -0,0 +1,32 @@
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {customElement} from 'lit/decorators';
+
+import {OutlinedMultiSelectSegmentedButton} from './lib/outlined-multi-select-segmented-button';
+import {styles as outlinedStyles} from './lib/outlined-styles.css';
+import {styles as sharedStyles} from './lib/shared-styles.css';
+
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'md-outlined-multi-select-segmented-button':
+        MdOutlinedMultiSelectSegmentedButton;
+  }
+}
+
+/**
+ * MdOutlinedMultiSelectSegmentedButton is the custom element for the Material
+ * Design outlined multi-select segmented button component.
+ * @soyCompatible
+ * @final
+ * @suppress {visibility}
+ */
+@customElement('md-outlined-multi-select-segmented-button')
+export class MdOutlinedMultiSelectSegmentedButton extends
+    OutlinedMultiSelectSegmentedButton {
+  static override styles = [sharedStyles, outlinedStyles];
+}

components/segmented-button/outlined-single-select-segmented-button.ts

@@ -0,0 +1,31 @@
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {customElement} from 'lit/decorators';
+
+import {OutlinedSingleSelectSegmentedButton} from './lib/outlined-single-select-segmented-button';
+import {styles as outlinedStyles} from './lib/outlined-styles.css';
+import {styles as sharedStyles} from './lib/shared-styles.css';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'md-outlined-single-select-segmented-button':
+        MdOutlinedSingleSelectSegmentedButton;
+  }
+}
+
+/**
+ * MdOutlinedSingleSelectSegmentedButton is the custom element for the Material
+ * Design outlined single-select segmented button component.
+ * @soyCompatible
+ * @final
+ * @suppress {visibility}
+ */
+@customElement('md-outlined-single-select-segmented-button')
+export class MdOutlinedSingleSelectSegmentedButton extends
+    OutlinedSingleSelectSegmentedButton {
+  static override styles = [sharedStyles, outlinedStyles];
+}

components/segmented-button/single-select-segmented-button.ts

@@ -1,25 +0,0 @@
-/**
- * @license
- * Copyright 2021 Google LLC
- * SPDX-License-Identifier: Apache-2.0
- */
-
-import {customElement} from 'lit/decorators';
-
-import {SingleSelectSegmentedButton} from './lib/segmented-button';
-import {styles} from './lib/shared-styles.css';
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'md-single-select-segmented-button': MdSingleSelectSegmentedButton;
-  }
-}
-
-/**
- * MdSingleSelectSegmentedButton is the custom element for the Material Design
- * single-select segmented button component.
- */
-@customElement('md-single-select-segmented-button')
-export class MdSingleSelectSegmentedButton extends SingleSelectSegmentedButton {
-  static override styles = [styles];
-}

karma.conf.js

@@ -77,4 +77,61 @@ module.exports = function(config) {
       'FirefoxHeadless',
     ],
   });
+
+  if (process.env.USE_SAUCE) {
+    if (!process.env.SAUCE_USERNAME || !process.env.SAUCE_ACCESS_KEY) {
+      throw new Error(
+          'SAUCE_USERNAME and SAUCE_ACCESS_KEY must be set with USE_SAUCE')
+    }
+
+    const SAUCE_LAUNCHERS = {
+      'sl-edge': {
+        base: 'SauceLabs',
+        browserName: 'microsoftedge',
+        version: 'latest',
+        platform: 'Windows 10',
+      },
+      'sl-ie': {
+        base: 'SauceLabs',
+        browserName: 'internet explorer',
+        version: '11',
+        platform: 'Windows 8.1',
+      },
+      'sl-safari-14': {
+        base: 'SauceLabs',
+        browserName: 'safari',
+        version: '14',
+        platform: 'macOS 11.00',
+      },
+      'sl-safari-13': {
+        base: 'SauceLabs',
+        browserName: 'safari',
+        version: '13',
+        platform: 'macOS 10.15',
+      },
+      // 'sl-chrome-41': {
+      //   base: 'SauceLabs',
+      //   browserName: 'chrome',
+      //   version: '41',
+      //   platform: 'Linux'
+      // },
+    };
+
+    config.set({
+      sauceLabs: {
+        idleTimeout: 600,
+        testName: 'MWC Unit Tests',
+        build: process.env.SAUCE_BUILD_ID,
+        tunnelIdentifier: process.env.SAUCE_TUNNEL_ID,
+      },
+      // Attempt to de-flake Sauce Labs tests on TravisCI.
+      transports: ['polling'],
+      browserDisconnectTolerance: 1,
+      reporters: ['saucelabs', 'mocha'],
+
+      // TODO(aomarks) Update the browser versions here.
+      customLaunchers: SAUCE_LAUNCHERS,
+      browsers: [...config.browsers, ...Object.keys(SAUCE_LAUNCHERS)],
+    });
+  }
 };

package.json

@@ -74,6 +74,7 @@
     "karma-firefox-launcher": "^1.0.0",
     "karma-jasmine": "^4.0.1",
     "karma-mocha-reporter": "^2.2.5",
+    "karma-sauce-launcher": "^2.0.2",
     "karma-sourcemap-loader": "^0.3.7",
     "lerna": "^3.13.1",
     "lit-analyzer": "^1.2.1",