From 51fcedaaffebea47fa752c6a22290e0f341ccd9b Mon Sep 17 00:00:00 2001 From: Patty RoDee Date: Tue, 19 Apr 2022 20:53:29 -0700 Subject: [PATCH] chore: Reorganize segmented button files with explicit variant naming PiperOrigin-RevId: 442985520 --- .../lib/_outlined-segmented-button-theme.scss | 18 ++++++ .../lib/_outlined-segmented-button.scss | 12 ++++ .../lib/_segmented-button.scss | 6 ++ .../outlined-multi-select-segmented-button.ts | 21 +++++++ ...outlined-single-select-segmented-button.ts | 21 +++++++ .../segmented-button/lib/outlined-styles.scss | 17 ++++++ .../segmented-button/lib/segmented-button.ts | 16 +++++- .../multi-select-segmented-button.ts | 26 --------- .../outlined-multi-select-segmented-button.ts | 32 +++++++++++ ...outlined-single-select-segmented-button.ts | 31 ++++++++++ .../single-select-segmented-button.ts | 25 -------- karma.conf.js | 57 +++++++++++++++++++ package.json | 1 + 13 files changed, 229 insertions(+), 54 deletions(-) create mode 100644 components/segmented-button/lib/_outlined-segmented-button-theme.scss create mode 100644 components/segmented-button/lib/_outlined-segmented-button.scss create mode 100644 components/segmented-button/lib/outlined-multi-select-segmented-button.ts create mode 100644 components/segmented-button/lib/outlined-single-select-segmented-button.ts create mode 100644 components/segmented-button/lib/outlined-styles.scss delete mode 100644 components/segmented-button/multi-select-segmented-button.ts create mode 100644 components/segmented-button/outlined-multi-select-segmented-button.ts create mode 100644 components/segmented-button/outlined-single-select-segmented-button.ts delete mode 100644 components/segmented-button/single-select-segmented-button.ts diff --git a/components/segmented-button/lib/_outlined-segmented-button-theme.scss b/components/segmented-button/lib/_outlined-segmented-button-theme.scss new file mode 100644 index 000000000..ebb917a1a --- /dev/null +++ b/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. */ +} diff --git a/components/segmented-button/lib/_outlined-segmented-button.scss b/components/segmented-button/lib/_outlined-segmented-button.scss new file mode 100644 index 000000000..151c74277 --- /dev/null +++ b/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. + } +} diff --git a/components/segmented-button/lib/_segmented-button.scss b/components/segmented-button/lib/_segmented-button.scss index c69b1528b..e25bab111 100644 --- a/components/segmented-button/lib/_segmented-button.scss +++ b/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; + } } diff --git a/components/segmented-button/lib/outlined-multi-select-segmented-button.ts b/components/segmented-button/lib/outlined-multi-select-segmented-button.ts new file mode 100644 index 000000000..c53ecd182 --- /dev/null +++ b/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, + }; + } +} \ No newline at end of file diff --git a/components/segmented-button/lib/outlined-single-select-segmented-button.ts b/components/segmented-button/lib/outlined-single-select-segmented-button.ts new file mode 100644 index 000000000..34039e0f6 --- /dev/null +++ b/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, + }; + } +} \ No newline at end of file diff --git a/components/segmented-button/lib/outlined-styles.scss b/components/segmented-button/lib/outlined-styles.scss new file mode 100644 index 000000000..f0fafd325 --- /dev/null +++ b/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 + ); +} diff --git a/components/segmented-button/lib/segmented-button.ts b/components/segmented-button/lib/segmented-button.ts index eca2cde87..bab7ed933 100644 --- a/components/segmented-button/lib/segmented-button.ts +++ b/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` - `; } + /** @soyTemplate */ + protected getRenderClasses(): ClassInfo { + return { + // TODO(b/213634341): Write styles. + }; + } + focusButton() { this.option.focus(); } diff --git a/components/segmented-button/multi-select-segmented-button.ts b/components/segmented-button/multi-select-segmented-button.ts deleted file mode 100644 index 5afb4ec35..000000000 --- a/components/segmented-button/multi-select-segmented-button.ts +++ /dev/null @@ -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]; -} \ No newline at end of file diff --git a/components/segmented-button/outlined-multi-select-segmented-button.ts b/components/segmented-button/outlined-multi-select-segmented-button.ts new file mode 100644 index 000000000..5b061e73f --- /dev/null +++ b/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]; +} \ No newline at end of file diff --git a/components/segmented-button/outlined-single-select-segmented-button.ts b/components/segmented-button/outlined-single-select-segmented-button.ts new file mode 100644 index 000000000..e3192f7d6 --- /dev/null +++ b/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]; +} diff --git a/components/segmented-button/single-select-segmented-button.ts b/components/segmented-button/single-select-segmented-button.ts deleted file mode 100644 index 717d00ef0..000000000 --- a/components/segmented-button/single-select-segmented-button.ts +++ /dev/null @@ -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]; -} \ No newline at end of file diff --git a/karma.conf.js b/karma.conf.js index d0e77fbc4..af1a9935a 100644 --- a/karma.conf.js +++ b/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)], + }); + } }; diff --git a/package.json b/package.json index 4a9f1200c..6337527d2 100644 --- a/package.json +++ b/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",