From 43cf0865d902346568c755650f53410c7788f2a1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?R=C3=BAben=20Carvalho?= Date: Wed, 9 Oct 2024 19:05:55 +0200 Subject: [PATCH] feat: add `static-color` to replace `static` (#4808) --- packages/action-bar/src/ActionBar.ts | 4 +- packages/action-button/src/ActionButton.ts | 39 +++- .../src/spectrum-action-button.css | 12 +- packages/action-button/src/spectrum-config.js | 2 +- packages/action-button/stories/index.ts | 2 +- .../action-button/test/action-button.test.ts | 174 +++++++++--------- packages/action-group/src/ActionGroup.ts | 23 ++- .../action-group/test/action-group.test.ts | 76 +++++++- packages/action-menu/src/ActionMenu.ts | 8 +- .../stories/action-menu.stories.ts | 7 +- packages/action-menu/stories/index.ts | 2 +- packages/alert-banner/README.md | 4 +- packages/alert-banner/src/AlertBanner.ts | 2 +- packages/alert-banner/stories/index.ts | 2 +- packages/badge/src/spectrum-config.js | 2 +- packages/button/README.md | 34 ++-- packages/button/src/Button.ts | 71 +++++-- packages/button/src/CloseButton.ts | 8 +- packages/button/src/spectrum-button.css | 26 +-- packages/button/src/spectrum-config.js | 2 +- packages/button/test/button.test.ts | 66 ++++++- packages/checkbox/test/checkbox.test.ts | 101 +++++----- .../src/spectrum-close-button.css | 60 +++--- packages/close-button/src/spectrum-config.js | 2 +- packages/coachmark/src/CoachIndicator.ts | 22 ++- .../src/spectrum-coach-indicator.css | 4 +- packages/coachmark/src/spectrum-config.js | 2 +- .../coachmark/test/coach-indicator.test.ts | 94 ++++++++-- .../contextual-help/src/ContextualHelp.ts | 1 + packages/divider/src/spectrum-config.js | 2 +- packages/divider/src/spectrum-divider.css | 12 +- packages/link/README.md | 6 +- packages/link/src/Link.ts | 30 ++- packages/link/src/spectrum-config.js | 24 ++- packages/link/src/spectrum-link.css | 16 +- packages/link/stories/link.stories.ts | 8 +- packages/link/test/link.test.ts | 51 ++++- packages/meter/src/Meter.ts | 22 ++- packages/meter/src/spectrum-config.js | 2 +- packages/meter/src/spectrum-meter.css | 10 +- packages/meter/stories/meter.stories.ts | 9 +- packages/meter/test/meter.test.ts | 90 ++++++--- packages/progress-bar/src/ProgressBar.ts | 20 ++ packages/progress-bar/src/spectrum-config.js | 2 +- .../src/spectrum-progress-bar.css | 10 +- .../stories/progress-bar.stories.ts | 13 +- .../progress-bar/test/progress-bar.test.ts | 73 ++++++-- packages/progress-circle/README.md | 6 +- .../progress-circle/src/ProgressCircle.ts | 32 +++- .../progress-circle/src/spectrum-config.js | 2 +- .../src/spectrum-progress-circle.css | 4 +- .../stories/progress-circle.stories.ts | 8 +- .../test/progress-circle.test.ts | 45 +++++ packages/toast/README.md | 4 +- packages/toast/src/Toast.ts | 2 +- packages/toast/stories/toast.stories.ts | 2 +- packages/toast/test/toast.test.ts | 144 ++++++--------- tools/theme/src/Theme.ts | 2 + tools/truncated/src/Truncated.ts | 1 + 59 files changed, 1030 insertions(+), 474 deletions(-) diff --git a/packages/action-bar/src/ActionBar.ts b/packages/action-bar/src/ActionBar.ts index 0f4a61ca76..d7978e47b2 100644 --- a/packages/action-bar/src/ActionBar.ts +++ b/packages/action-bar/src/ActionBar.ts @@ -100,7 +100,7 @@ export class ActionBar extends FocusVisiblePolyfillMixin(SpectrumElement) { diff --git a/packages/action-button/src/ActionButton.ts b/packages/action-button/src/ActionButton.ts index 6746b6154e..8d4dd624e9 100644 --- a/packages/action-button/src/ActionButton.ts +++ b/packages/action-button/src/ActionButton.ts @@ -1,5 +1,5 @@ /* -Copyright 2020 Adobe. All rights reserved. +Copyright 2024 Adobe. All rights reserved. This file is licensed to you under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 @@ -46,7 +46,7 @@ export type LongpressEvent = { * @slot icon - The icon to use for Action Button * @fires change - Announces a change in the `selected` property of an action button * @fires longpress - Synthesizes a "longpress" interaction that signifies a - * `pointerdown` event that is >=300ms or a keyboard event wher code is `Space` or code is `ArrowDown` + * `pointerdown` event that is >=300ms or a keyboard event where code is `Space` or code is `ArrowDown` * while `altKey===true`. */ export class ActionButton extends SizedMixin(ButtonBase, { @@ -84,9 +84,21 @@ export class ActionButton extends SizedMixin(ButtonBase, { @property({ type: Boolean, reflect: true }) public toggles = false; + /** + * The static color variant to use for the action button. + */ + @property({ reflect: true, attribute: 'static-color' }) + public staticColor?: 'white' | 'black'; + + /** + * @deprecated Use `staticColor` instead. + */ @property({ reflect: true }) public static?: 'white' | 'black'; + /** + * @deprecated Use `staticColor` instead. + */ @property({ reflect: true }) public variant?: 'white' | 'black'; @@ -258,14 +270,29 @@ export class ActionButton extends SizedMixin(ButtonBase, { } if ( changes.has('variant') && - (this.variant || typeof changes.get('variant')) + (this.variant !== undefined || changes.get('variant') !== undefined) + ) { + this.staticColor = this.variant; + if (window.__swc.DEBUG) { + window.__swc.warn( + this, + `The "variant" attribute/property of <${this.localName}> has been deprecated. Use "static-color" with the same values instead. "variant" will be removed in a future release.`, + 'https://opensource.adobe.com/spectrum-web-components/components/action-button/api/', + { level: 'deprecation' } + ); + } + } + if ( + changes.has('static') && + (this.static !== undefined || changes.get('static') !== undefined) ) { - this.static = this.variant; + this.staticColor = this.static; if (window.__swc.DEBUG) { window.__swc.warn( this, - `The "variant" attribute/property of <${this.localName}> have been deprecated. Use "static" with any of the same values instead. "variant" will be removed in a future release.`, - 'https://opensource.adobe.com/spectrum-web-components/components/badge/#fixed' + `The "static" attribute/property of <${this.localName}> has been deprecated. Use "static-color" with the same values instead. "static" will be removed in a future release.`, + 'https://opensource.adobe.com/spectrum-web-components/components/action-button/api/', + { level: 'deprecation' } ); } } diff --git a/packages/action-button/src/spectrum-action-button.css b/packages/action-button/src/spectrum-action-button.css index 0ceba8c189..a27aabba98 100644 --- a/packages/action-button/src/spectrum-action-button.css +++ b/packages/action-button/src/spectrum-action-button.css @@ -764,7 +764,7 @@ governing permissions and limitations under the License. ); } -:host([static='black'][quiet]) { +:host([static-color='black'][quiet]) { --spectrum-actionbutton-border-color-default: var( --system-spectrum-actionbutton-staticblack-quiet-border-color-default ); @@ -782,7 +782,7 @@ governing permissions and limitations under the License. ); } -:host([static='white'][quiet]) { +:host([static-color='white'][quiet]) { --spectrum-actionbutton-border-color-default: var( --system-spectrum-actionbutton-staticwhite-quiet-border-color-default ); @@ -800,7 +800,7 @@ governing permissions and limitations under the License. ); } -:host([static='black']) { +:host([static-color='black']) { --spectrum-actionbutton-background-color-default: var( --system-spectrum-actionbutton-staticblack-background-color-default ); @@ -851,7 +851,7 @@ governing permissions and limitations under the License. ); } -:host([static='black'][selected]) { +:host([static-color='black'][selected]) { --mod-actionbutton-background-color-default: var( --system-spectrum-actionbutton-staticblack-selected-mod-actionbutton-background-color-default ); @@ -896,7 +896,7 @@ governing permissions and limitations under the License. ); } -:host([static='white']) { +:host([static-color='white']) { --spectrum-actionbutton-background-color-default: var( --system-spectrum-actionbutton-staticwhite-background-color-default ); @@ -947,7 +947,7 @@ governing permissions and limitations under the License. ); } -:host([static='white'][selected]) { +:host([static-color='white'][selected]) { --mod-actionbutton-background-color-default: var( --system-spectrum-actionbutton-staticwhite-selected-mod-actionbutton-background-color-default ); diff --git a/packages/action-button/src/spectrum-config.js b/packages/action-button/src/spectrum-config.js index 743d219aba..08956b295f 100644 --- a/packages/action-button/src/spectrum-config.js +++ b/packages/action-button/src/spectrum-config.js @@ -76,7 +76,7 @@ const config = { ['spectrum-ActionButton--staticWhite', 'white'], ['spectrum-ActionButton--staticBlack', 'black'], ], - 'static' + 'static-color' ), // Default to `size='m'` without needing the attribute converter.classToHost('spectrum-ActionButton--sizeM'), diff --git a/packages/action-button/stories/index.ts b/packages/action-button/stories/index.ts index ad94622163..c1d6190d82 100644 --- a/packages/action-button/stories/index.ts +++ b/packages/action-button/stories/index.ts @@ -38,7 +38,7 @@ export function renderButton(properties: Properties): TemplateResult { { ) ); it('loads default', async () => { - const el = await fixture( - html` - Button - ` - ); + const el = await fixture(html` + Button + `); await elementUpdated(el); expect(el).to.not.be.undefined; @@ -48,11 +46,9 @@ describe('ActionButton', () => { await expect(el).to.be.accessible(); }); it('gardens "value" as a property', async () => { - const el = await fixture( - html` - Button - ` - ); + const el = await fixture(html` + Button + `); await elementUpdated(el); expect(el.hasAttribute('value')).to.be.false; @@ -64,11 +60,9 @@ describe('ActionButton', () => { expect(el.hasAttribute('value')).to.be.false; }); it('loads [hold-affordance]', async () => { - const el = await fixture( - html` - Button - ` - ); + const el = await fixture(html` + Button + `); await elementUpdated(el); expect(el).to.not.be.undefined; @@ -76,11 +70,9 @@ describe('ActionButton', () => { await expect(el).to.be.accessible(); }); it('manages a `tabindex`', async () => { - const el = await fixture( - html` - Button - ` - ); + const el = await fixture(html` + Button + `); expect(el.tabIndex).to.equal(0); expect(el.disabled).to.be.false; @@ -104,11 +96,9 @@ describe('ActionButton', () => { expect(el.disabled).to.be.false; }); it('manages a `size` attribute', async () => { - const el = await fixture( - html` - Button - ` - ); + const el = await fixture(html` + Button + `); await elementUpdated(el); expect(el.size).to.equal('xl'); @@ -119,11 +109,9 @@ describe('ActionButton', () => { expect(el.hasAttribute('size')).to.be.false; }); it('does not apply a default `size` attribute', async () => { - const el = await fixture( - html` - Button - ` - ); + const el = await fixture(html` + Button + `); await elementUpdated(el); expect(el.size).to.equal('m'); @@ -131,16 +119,14 @@ describe('ActionButton', () => { }); it('dispatches `longpress` events when [hold-affordance]', async () => { const longpressSpy = spy(); - const el = await fixture( - html` - longpressSpy()} - > - Button - - ` - ); + const el = await fixture(html` + longpressSpy()} + > + Button + + `); await elementUpdated(el); @@ -162,16 +148,14 @@ describe('ActionButton', () => { }); it('does not dispatch `longpress` events when "right click"ed', async () => { const longpressSpy = spy(); - const el = await fixture( - html` - longpressSpy()} - > - Button - - ` - ); + const el = await fixture(html` + longpressSpy()} + > + Button + + `); await elementUpdated(el); expect(longpressSpy.callCount).to.equal(0); @@ -182,11 +166,9 @@ describe('ActionButton', () => { expect(longpressSpy.callCount).to.equal(0); }); it(':not([toggles])', async () => { - const el = await fixture( - html` - Button - ` - ); + const el = await fixture(html` + Button + `); await elementUpdated(el); const button = el.focusElement; @@ -203,11 +185,9 @@ describe('ActionButton', () => { expect(button.hasAttribute('aria-pressed')).to.be.false; }); it('responds to [selected]', async () => { - const el = await fixture( - html` - Button - ` - ); + const el = await fixture(html` + Button + `); await elementUpdated(el); const button = el.focusElement; @@ -231,11 +211,9 @@ describe('ActionButton', () => { expect(button.hasAttribute('aria-pressed')).to.be.false; }); it('toggles', async () => { - const el = await fixture( - html` - Button - ` - ); + const el = await fixture(html` + Button + `); await elementUpdated(el); const button = el.focusElement; @@ -263,17 +241,15 @@ describe('ActionButton', () => { expect(button.getAttribute('aria-pressed')).to.equal('true'); }); it('toggles [aria-haspopup][aria-expanded]', async () => { - const el = await fixture( - html` - - ` - ); + const el = await fixture(html` + + `); await elementUpdated(el); const button = el.focusElement; @@ -321,11 +297,9 @@ describe('ActionButton', () => { }); it('warns that `variant` is deprecated', async () => { - const el = await fixture( - html` - Button - ` - ); + const el = await fixture(html` + Button + `); await elementUpdated(el); @@ -339,9 +313,45 @@ describe('ActionButton', () => { data: { localName: 'sp-action-button', type: 'api', - level: 'default', + level: 'deprecation', }, }); }); + + it('warns that `variant` is deprecated', async () => { + const el = await fixture(html` + Button + `); + + await elementUpdated(el); + + expect(consoleWarnStub.called).to.be.true; + const spyCall = consoleWarnStub.getCall(0); + expect( + (spyCall.args.at(0) as string).includes('"static"'), + 'confirm static-centric message' + ).to.be.true; + expect(spyCall.args.at(-1), 'confirm `data` shape').to.deep.equal({ + data: { + localName: 'sp-action-button', + type: 'api', + level: 'deprecation', + }, + }); + }); + + it('prefers `staticColor` over `static`', async () => { + const el = await fixture(html` + Button + `); + + await elementUpdated(el); + expect(el.staticColor).to.equal('white'); + el.setAttribute('static', 'white'); + await elementUpdated(el); + expect(el.staticColor).to.equal('white'); + expect(el.static).to.equal('white'); + expect(el.getAttribute('static-color')).to.equal('white'); + }); }); }); diff --git a/packages/action-group/src/ActionGroup.ts b/packages/action-group/src/ActionGroup.ts index 7cf85f3385..d2027e478b 100644 --- a/packages/action-group/src/ActionGroup.ts +++ b/packages/action-group/src/ActionGroup.ts @@ -112,9 +112,15 @@ export class ActionGroup extends SizedMixin(SpectrumElement, { @property({ type: String }) public selects: undefined | 'single' | 'multiple'; + /** + * @deprecated Use `staticColor` instead. + */ @property({ reflect: true }) public static?: 'white' | 'black'; + @property({ reflect: true, attribute: 'static-color' }) + public staticColor?: 'white' | 'black'; + @property({ type: Boolean, reflect: true }) public vertical = false; @@ -359,7 +365,8 @@ export class ActionGroup extends SizedMixin(SpectrumElement, { changes.has('quiet') || changes.has('emphasized') || changes.has('size') || - changes.has('static') + changes.has('static') || + changes.has('staticColor') ) { this.manageChildren(changes); } @@ -385,7 +392,19 @@ export class ActionGroup extends SizedMixin(SpectrumElement, { button.emphasized = this.emphasized; } if (this.static || changes?.get('static')) { - button.static = this.static; + if (window.__swc.DEBUG) { + window.__swc.warn( + this, + `The "static" attribute/property of <${this.localName}> has been deprecated. Use "static-color" with the same values instead. "static" will be removed in a future release.`, + 'https://opensource.adobe.com/spectrum-web-components/components/action-group/api/', + { level: 'deprecation' } + ); + } + this.staticColor = this.static; + button.staticColor = this.staticColor; + } + if (this.staticColor || changes?.get('staticColor')) { + button.staticColor = this.staticColor; } if (this.selects || !this.hasManaged) { button.selected = this.selected.includes(button.value); diff --git a/packages/action-group/test/action-group.test.ts b/packages/action-group/test/action-group.test.ts index 9e9ff133ae..512c3b2f2c 100644 --- a/packages/action-group/test/action-group.test.ts +++ b/packages/action-group/test/action-group.test.ts @@ -49,7 +49,7 @@ import { import { sendKeys } from '@web/test-runner-commands'; import '@spectrum-web-components/action-group/sp-action-group.js'; import { controlled } from '../stories/action-group-tooltip.stories.js'; -import { spy } from 'sinon'; +import { spy, stub } from 'sinon'; import { sendMouse } from '../../../test/plugins/browser.js'; import { HasActionMenuAsChild } from '../stories/action-group.stories.js'; import '../stories/action-group.stories.js'; @@ -350,9 +350,9 @@ describe('ActionGroup', () => { expect(el.getAttribute('role')).to.equal('toolbar'); expect(el.children[0].getAttribute('role')).to.equal('button'); }); - it('applies `static` attribute to its children', async () => { + it('applies `static-color` attribute to its children', async () => { const el = await fixture(html` - + First Second @@ -362,15 +362,15 @@ describe('ActionGroup', () => { await elementUpdated(el); - expect(firstButton.static).to.equal('white'); - expect(secondButton.static).to.equal('white'); + expect(firstButton.staticColor).to.equal('white'); + expect(secondButton.staticColor).to.equal('white'); - el.static = undefined; + el.staticColor = undefined; await elementUpdated(el); - expect(firstButton.static).to.be.undefined; - expect(secondButton.static).to.be.undefined; + expect(firstButton.staticColor).to.be.undefined; + expect(secondButton.staticColor).to.be.undefined; }); it('manages "label"', async () => { const testLabel = 'Testable action group'; @@ -1522,4 +1522,64 @@ describe('ActionGroup', () => { expect(actionButtons[1].selected).to.be.true; expect(actionButtons[2].selected).to.be.false; }); + it('prefers `staticColor` over `static`', async () => { + const el = await fixture(html` + + First + + `); + await elementUpdated(el); + expect(el.staticColor).to.equal('white'); + el.setAttribute('static', 'white'); + await elementUpdated(el); + expect(el.staticColor).to.equal('white'); + expect(el.static).to.equal('white'); + expect(el.getAttribute('static-color')).to.equal('white'); + }); +}); + +describe('dev mode', () => { + let consoleWarnStub!: ReturnType; + before(() => { + window.__swc.verbose = true; + consoleWarnStub = stub(console, 'warn'); + }); + afterEach(() => { + consoleWarnStub.resetHistory(); + }); + after(() => { + window.__swc.verbose = false; + consoleWarnStub.restore(); + }); + it('warns in Dev Mode when static attribute is supplied', async () => { + const el = await fixture(html` + + First + + `); + await elementUpdated(el); + expect(consoleWarnStub.called).to.be.true; + const spyCall = consoleWarnStub.getCall(0); + expect( + (spyCall.args.at(0) as string).includes('deprecated'), + 'confirm attribute deprecation message' + ).to.be.true; + expect(spyCall.args.at(-1), 'confirm `data` shape').to.deep.equal({ + data: { + localName: 'sp-action-group', + type: 'api', + level: 'deprecation', + }, + }); + }); }); diff --git a/packages/action-menu/src/ActionMenu.ts b/packages/action-menu/src/ActionMenu.ts index 5311846877..6d4cee33b4 100644 --- a/packages/action-menu/src/ActionMenu.ts +++ b/packages/action-menu/src/ActionMenu.ts @@ -50,9 +50,15 @@ export class ActionMenu extends ObserveSlotPresence( @property({ type: String }) public override selects: undefined | 'single' = undefined; + /** + * @deprecated Use `staticColor` instead. + */ @property({ type: String, reflect: true }) public static: 'white' | 'black' | undefined = undefined; + @property({ reflect: true, attribute: 'static-color' }) + public staticColor?: 'white' | 'black'; + protected override listRole: 'listbox' | 'menu' = 'menu'; protected override itemRole = 'menuitem'; private get hasLabel(): boolean { @@ -104,7 +110,7 @@ export class ActionMenu extends ObserveSlotPresence( aria-describedby=${DESCRIPTION_ID} ?quiet=${this.quiet} ?selected=${this.open} - static=${ifDefined(this.static)} + static-color=${ifDefined(this.staticColor)} aria-haspopup="true" aria-controls=${ifDefined(this.open ? 'menu' : undefined)} aria-expanded=${this.open ? 'true' : 'false'} diff --git a/packages/action-menu/stories/action-menu.stories.ts b/packages/action-menu/stories/action-menu.stories.ts index dd640535c8..f791341e4d 100644 --- a/packages/action-menu/stories/action-menu.stories.ts +++ b/packages/action-menu/stories/action-menu.stories.ts @@ -120,10 +120,11 @@ export default { type: 'boolean', }, }, - staticValue: { - name: 'static', + staticColorValue: { + name: 'static-color', type: { name: 'string', required: false }, - description: 'The visual static variant to apply to the button.', + description: + 'The visual static color variant to apply to the button.', table: { type: { summary: 'string' }, defaultValue: { summary: 'none' }, diff --git a/packages/action-menu/stories/index.ts b/packages/action-menu/stories/index.ts index f7c26a5eba..6b0c3ae234 100644 --- a/packages/action-menu/stories/index.ts +++ b/packages/action-menu/stories/index.ts @@ -44,7 +44,7 @@ export const ActionMenuMarkup = ({ ?disabled=${disabled} ?open=${open} ?quiet=${quiet} - static=${ifDefined( + static-color=${ifDefined( staticValue === 'none' ? undefined : (staticValue as 'black' | 'white') diff --git a/packages/alert-banner/README.md b/packages/alert-banner/README.md index d9c9829932..a33c827e74 100644 --- a/packages/alert-banner/README.md +++ b/packages/alert-banner/README.md @@ -50,7 +50,7 @@ Use the action slot for the contextual action that a user can take in response t ```html Your trial has expired - + Buy now @@ -63,7 +63,7 @@ Use the action slot for the contextual action that a user can take in response t ```html Your trial will expire in 3 days - + Buy now diff --git a/packages/alert-banner/src/AlertBanner.ts b/packages/alert-banner/src/AlertBanner.ts index fab67ff510..f58e4b98d3 100644 --- a/packages/alert-banner/src/AlertBanner.ts +++ b/packages/alert-banner/src/AlertBanner.ts @@ -154,7 +154,7 @@ export class AlertBanner extends SpectrumElement { ` : html``} diff --git a/packages/alert-banner/stories/index.ts b/packages/alert-banner/stories/index.ts index ee6be15592..8cfabb195a 100644 --- a/packages/alert-banner/stories/index.ts +++ b/packages/alert-banner/stories/index.ts @@ -29,7 +29,7 @@ export const AlertBannerMarkup = ({ ?open=${open} > ${text} - + ${actionLabel} diff --git a/packages/badge/src/spectrum-config.js b/packages/badge/src/spectrum-config.js index 1468a9aa52..f328de60f9 100644 --- a/packages/badge/src/spectrum-config.js +++ b/packages/badge/src/spectrum-config.js @@ -80,7 +80,7 @@ const config = { ), ...converter.enumerateAttributes( [['spectrum-Badge--black-text', 'black']], - 'static' + 'static-color' ), converter.classToClass('spectrum-Badge-label'), converter.classToSlotted('spectrum-Badge-icon', 'icon'), diff --git a/packages/button/README.md b/packages/button/README.md index 7f138d4f96..b06bb99717 100644 --- a/packages/button/README.md +++ b/packages/button/README.md @@ -177,12 +177,12 @@ attribute defaults to `accent` but also accepts the following value: `accent`, ` ```html demo - Label only - + Label only + Icon + Label - + @@ -194,12 +194,12 @@ attribute defaults to `accent` but also accepts the following value: `accent`, ` ```html demo - Label only - + Label only + Icon + Label - + @@ -250,12 +250,17 @@ The `treatment` attribute accepts `fill` and `outline` as values, and defaults t - Label only - + Label only + Icon + Label - + @@ -269,12 +274,17 @@ The `treatment` attribute accepts `fill` and `outline` as values, and defaults t - Label only - + Label only + Icon + Label - + diff --git a/packages/button/src/Button.ts b/packages/button/src/Button.ts index 8b822e2203..b66ed7178a 100644 --- a/packages/button/src/Button.ts +++ b/packages/button/src/Button.ts @@ -1,5 +1,5 @@ /* -Copyright 2020 Adobe. All rights reserved. +Copyright 2024 Adobe. All rights reserved. This file is licensed to you under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 @@ -9,7 +9,6 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ - import { CSSResultArray, html, @@ -23,13 +22,13 @@ import buttonStyles from './button.css.js'; import { PendingStateController } from '@spectrum-web-components/reactive-controllers/src/PendingState.js'; export type DeprecatedButtonVariants = 'cta' | 'overBackground'; -export type ButtonStatics = 'white' | 'black'; +export type ButtonStaticColors = 'white' | 'black'; export type ButtonVariants = | 'accent' | 'primary' | 'secondary' | 'negative' - | ButtonStatics + | ButtonStaticColors | DeprecatedButtonVariants; export const VALID_VARIANTS = [ 'accent', @@ -39,7 +38,7 @@ export const VALID_VARIANTS = [ 'white', 'black', ]; -export const VALID_STATICS = ['white', 'black']; +export const VALID_STATIC_COLORS = ['white', 'black']; export type ButtonTreatments = 'fill' | 'outline'; @@ -57,7 +56,7 @@ export class Button extends SizedMixin(ButtonBase, { noDefaultSize: true }) { @property({ type: String, attribute: 'pending-label' }) public pendingLabel = 'Pending'; - // pending is the property that consumers can use to set the button into a pending state + // Use this property to set the button into a pending state @property({ type: Boolean, reflect: true, attribute: true }) public pending = false; @@ -97,31 +96,45 @@ export class Button extends SizedMixin(ButtonBase, { noDefaultSize: true }) { window.__swc.warn( this, `The "cta" value of the "variant" attribute on <${this.localName}> has been deprecated and will be removed in a future release. Use "variant='accent'" instead.`, - 'https://opensource.adobe.com/spectrum-web-components/components/button/#variants' + 'https://opensource.adobe.com/spectrum-web-components/components/button/#variants', + { level: 'deprecation' } ); } break; case 'overBackground': this.removeAttribute('variant'); - this.static = 'white'; + this.staticColor = 'white'; this.treatment = 'outline'; if (window.__swc.DEBUG) { window.__swc.warn( this, - `The "overBackground" value of the "variant" attribute on <${this.localName}> has been deprecated and will be removed in a future release. Use "static='white'" with "treatment='outline'" instead.`, - 'https://opensource.adobe.com/spectrum-web-components/components/button#static' + `The "overBackground" value of the "variant" attribute on <${this.localName}> has been deprecated and will be removed in a future release. Use "staticColor='white'" with "treatment='outline'" instead.`, + 'https://opensource.adobe.com/spectrum-web-components/components/button', + { level: 'deprecation' } ); } return; case 'white': + this.staticColor = variant; + this.removeAttribute('variant'); + if (window.__swc.DEBUG) { + window.__swc.warn( + this, + `The "black" and "white" values of the "variant" attribute on <${this.localName}> have been deprecated and will be removed in a future release. Use "static-color='black'" or "static-color='white'" instead.`, + 'https://opensource.adobe.com/spectrum-web-components/components/button/api', + { level: 'deprecation' } + ); + } + return; case 'black': - this.static = variant; + this.staticColor = variant; this.removeAttribute('variant'); if (window.__swc.DEBUG) { window.__swc.warn( this, - `The "black" and "white" values of the "variant" attribute on <${this.localName}> has been deprecated and will be removed in a future release. Use "static='black'" or "static='white'" instead.`, - 'https://opensource.adobe.com/spectrum-web-components/components/button#static' + `The "black" and "white" values of the "variant" attribute on <${this.localName}> have been deprecated and will be removed in a future release. Use "static-color='black'" or "static-color='white'" instead.`, + 'https://opensource.adobe.com/spectrum-web-components/components/button/api', + { level: 'deprecation' } ); } return; @@ -139,11 +152,20 @@ export class Button extends SizedMixin(ButtonBase, { noDefaultSize: true }) { } private _variant: ButtonVariants = 'accent'; + /** + * @deprecated Use `staticColor` instead. + */ @property({ type: String, reflect: true }) - public static: 'black' | 'white' | undefined; + public static?: 'black' | 'white'; /** - * The visual variant to apply to this button. + * The static color variant to use for this button. + */ + @property({ reflect: true, attribute: 'static-color' }) + public staticColor?: 'black' | 'white'; + + /** + * The visual treatment to apply to this button. */ @property({ reflect: true }) public treatment: ButtonTreatments = 'fill'; @@ -173,6 +195,7 @@ export class Button extends SizedMixin(ButtonBase, { noDefaultSize: true }) { super.firstUpdated(changes); // There is no Spectrum design context for an `` without a variant // apply one manually when a consumer has not applied one themselves. + if (!this.hasAttribute('variant')) { this.setAttribute('variant', this.variant); } @@ -181,12 +204,22 @@ export class Button extends SizedMixin(ButtonBase, { noDefaultSize: true }) { } } - protected override update(changes: PropertyValues): void { - super.update(changes); - } - protected override updated(changed: PropertyValues): void { super.updated(changed); + + if (changed.has('static')) { + if (this.static) { + this.staticColor = this.static; + if (window.__swc.DEBUG) { + window.__swc.warn( + this, + `The "static" attribute/property on <${this.localName}> has been deprecated. Use "static-color" instead. "static" will be removed in a future release.`, + 'https://opensource.adobe.com/spectrum-web-components/components/button/api', + { level: 'deprecation' } + ); + } + } + } } protected override renderButton(): TemplateResult { diff --git a/packages/button/src/CloseButton.ts b/packages/button/src/CloseButton.ts index 88d99f27ee..c69298d4f3 100644 --- a/packages/button/src/CloseButton.ts +++ b/packages/button/src/CloseButton.ts @@ -24,7 +24,7 @@ import '@spectrum-web-components/icons-ui/icons/sp-icon-cross300.js'; import '@spectrum-web-components/icons-ui/icons/sp-icon-cross400.js'; import '@spectrum-web-components/icons-ui/icons/sp-icon-cross500.js'; import crossMediumStyles from '@spectrum-web-components/icon/src/spectrum-icon-cross.css.js'; -import type { ButtonStatics } from './Button.js'; +import type { ButtonStaticColors } from './Button.js'; const crossIcon: Record TemplateResult> = { s: () => html` @@ -70,10 +70,10 @@ export class CloseButton extends SizedMixin(StyledButton, { * The visual variant to apply to this button. */ @property({ reflect: true }) - public variant: ButtonStatics | '' = ''; + public variant: ButtonStaticColors | '' = ''; - @property({ type: String, reflect: true }) - public static: 'black' | 'white' | undefined; + @property({ reflect: true, attribute: 'static-color' }) + public staticColor?: 'black' | 'white'; protected override get buttonContent(): TemplateResult[] { return [crossIcon[this.size]()]; diff --git a/packages/button/src/spectrum-button.css b/packages/button/src/spectrum-button.css index 15053c1a2e..40c1f3b182 100644 --- a/packages/button/src/spectrum-button.css +++ b/packages/button/src/spectrum-button.css @@ -699,8 +699,8 @@ governing permissions and limitations under the License. overflow: hidden; } -:host([static='black']), -:host([static='white']) { +:host([static-color='black']), +:host([static-color='white']) { --spectrum-button-focus-indicator-color: var( --mod-static-black-focus-indicator-color, var(--spectrum-static-black-focus-indicator-color) @@ -1288,7 +1288,7 @@ governing permissions and limitations under the License. ); } -:host([static='black'][quiet]) { +:host([static-color='black'][quiet]) { --spectrum-button-border-color-default: var( --system-spectrum-button-staticblack-quiet-border-color-default ); @@ -1306,7 +1306,7 @@ governing permissions and limitations under the License. ); } -:host([static='white'][quiet]) { +:host([static-color='white'][quiet]) { --spectrum-button-border-color-default: var( --system-spectrum-button-staticwhite-quiet-border-color-default ); @@ -1324,7 +1324,7 @@ governing permissions and limitations under the License. ); } -:host([static='white']) { +:host([static-color='white']) { --spectrum-button-background-color-default: var( --system-spectrum-button-staticwhite-background-color-default ); @@ -1375,7 +1375,7 @@ governing permissions and limitations under the License. ); } -:host([static='white'][treatment='outline']) { +:host([static-color='white'][treatment='outline']) { --spectrum-button-background-color-default: var( --system-spectrum-button-staticwhite-outline-background-color-default ); @@ -1426,7 +1426,7 @@ governing permissions and limitations under the License. ); } -:host([static='white'][selected]) { +:host([static-color='white'][selected]) { --spectrum-button-background-color-default: var( --system-spectrum-button-staticwhite-selected-background-color-default ); @@ -1463,7 +1463,7 @@ governing permissions and limitations under the License. ); } -:host([static='white'][variant='secondary']) { +:host([static-color='white'][variant='secondary']) { --spectrum-button-background-color-default: var( --system-spectrum-button-staticwhite-secondary-background-color-default ); @@ -1514,7 +1514,7 @@ governing permissions and limitations under the License. ); } -:host([static='white'][variant='secondary'][treatment='outline']) { +:host([static-color='white'][variant='secondary'][treatment='outline']) { --spectrum-button-background-color-default: var( --system-spectrum-button-staticwhite-secondary-outline-background-color-default ); @@ -1565,7 +1565,7 @@ governing permissions and limitations under the License. ); } -:host([static='black']) { +:host([static-color='black']) { --spectrum-button-background-color-default: var( --system-spectrum-button-staticblack-background-color-default ); @@ -1616,7 +1616,7 @@ governing permissions and limitations under the License. ); } -:host([static='black'][treatment='outline']) { +:host([static-color='black'][treatment='outline']) { --spectrum-button-background-color-default: var( --system-spectrum-button-staticblack-outline-background-color-default ); @@ -1667,7 +1667,7 @@ governing permissions and limitations under the License. ); } -:host([static='black'][variant='secondary']) { +:host([static-color='black'][variant='secondary']) { --spectrum-button-background-color-default: var( --system-spectrum-button-staticblack-secondary-background-color-default ); @@ -1718,7 +1718,7 @@ governing permissions and limitations under the License. ); } -:host([static='black'][variant='secondary'][treatment='outline']) { +:host([static-color='black'][variant='secondary'][treatment='outline']) { --spectrum-button-background-color-default: var( --system-spectrum-button-staticblack-secondary-outline-background-color-default ); diff --git a/packages/button/src/spectrum-config.js b/packages/button/src/spectrum-config.js index 44e2c612fa..b817c9cd23 100644 --- a/packages/button/src/spectrum-config.js +++ b/packages/button/src/spectrum-config.js @@ -135,7 +135,7 @@ const config = { ['spectrum-Button--staticWhite', 'white'], ['spectrum-Button--staticBlack', 'black'], ], - 'static' + 'static-color' ), converter.classToId('spectrum-Button-label'), converter.classToSlotted('spectrum-Icon', 'icon'), diff --git a/packages/button/test/button.test.ts b/packages/button/test/button.test.ts index e2184632b9..446744d668 100644 --- a/packages/button/test/button.test.ts +++ b/packages/button/test/button.test.ts @@ -21,13 +21,12 @@ import { waitUntil, } from '@open-wc/testing'; import { testForLitDevWarnings } from '../../../test/testing-helpers.js'; -import { stub } from 'sinon'; import { a11ySnapshot, findAccessibilityNode, sendKeys, } from '@web/test-runner-commands'; -import { spy } from 'sinon'; +import { spy, stub } from 'sinon'; type TestableButtonType = { hasLabel: boolean; @@ -71,11 +70,54 @@ describe('Button', () => { data: { localName: 'sp-button', type: 'api', - level: 'default', + level: 'deprecation', + }, + }); + }); + it('warns in devMode when white/black static is provided', async () => { + const el = await fixture