diff --git a/.changeset/olive-maps-accept.md b/.changeset/olive-maps-accept.md new file mode 100644 index 00000000000..836122bc992 --- /dev/null +++ b/.changeset/olive-maps-accept.md @@ -0,0 +1,5 @@ +--- +'@spectrum-web-components/button': patch +--- + +updated button to latest css version diff --git a/packages/button/README.md b/packages/button/README.md index 3d67faec3cc..135a920097d 100644 --- a/packages/button/README.md +++ b/packages/button/README.md @@ -140,7 +140,7 @@ fulfill the accessibility contract of the button. #### Variants There are many button variants to choose from in Spectrum. The `variant` -attribute defaults to `accent`, but also accepts the following value: `accent`, `primary`, `secondary`, `negative`, `white`, and `black`. They display as follows: +attribute defaults to `accent`, but also accepts the following value: `accent`, `primary`, `secondary`, `negative`. They display as follows: Accent @@ -210,40 +210,6 @@ attribute defaults to `accent`, but also accepts the following value: `accent`, ``` - -Black - - -```html demo - - Label only - - - Icon + Label - - - - - -``` - - -White - - -```html demo - - Label only - - - Icon + Label - - - - - -``` - @@ -423,9 +389,11 @@ To ensure maximum contrast with the background, use static black for light backg ```html demo -
- Click me - Click me +
+ Click me + Click me
``` @@ -434,9 +402,11 @@ To ensure maximum contrast with the background, use static black for light backg ```html demo -
- Click me - Click me +
+ Click me + Click me
``` diff --git a/packages/button/package.json b/packages/button/package.json index 84e4efde90d..4fb3917f50a 100644 --- a/packages/button/package.json +++ b/packages/button/package.json @@ -99,7 +99,7 @@ "@spectrum-web-components/shared": "1.4.0" }, "devDependencies": { - "@spectrum-css/button": "14.1.1" + "@spectrum-css/button": "14.1.4" }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", diff --git a/packages/button/src/Button.ts b/packages/button/src/Button.ts index 64766e19efe..ea868afe73a 100644 --- a/packages/button/src/Button.ts +++ b/packages/button/src/Button.ts @@ -115,24 +115,22 @@ export class Button extends SizedMixin(ButtonBase, { noDefaultSize: true }) { } return; case 'white': - this.staticColor = variant; - this.removeAttribute('variant'); + this.staticColor = 'white'; 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.`, + `The "white" value of the "variant" attribute on <${this.localName}> has been deprecated and will be removed in a future release. Use "static-color='white'" instead.`, 'https://opensource.adobe.com/spectrum-web-components/components/button/api', { level: 'deprecation' } ); } return; case 'black': - this.staticColor = variant; - this.removeAttribute('variant'); + this.staticColor = 'black'; 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.`, + `The "black" value of the "variant" attribute on <${this.localName}> has been deprecated and will be removed in a future release. Use "static-color='black'" instead.`, 'https://opensource.adobe.com/spectrum-web-components/components/button/api', { level: 'deprecation' } ); diff --git a/packages/button/src/button-overrides.css b/packages/button/src/button-overrides.css index ad3de1efc31..aa8291f011f 100644 --- a/packages/button/src/button-overrides.css +++ b/packages/button/src/button-overrides.css @@ -133,6 +133,9 @@ governing permissions and limitations under the License. --mod-button-border-color-default: var( --system-button-secondary-outline-border-color-default ); + --mod-button-border-color-down: var( + --system-button-secondary-outline-border-color-down + ); } :host([static-color='white']) { @@ -205,6 +208,9 @@ governing permissions and limitations under the License. } :host([static-color='white'][treatment='outline']:not([variant='secondary'])) { + --mod-button-background-color-default: var( + --system-button-static-white-outline-not-secondary-background-color-default + ); --mod-button-background-color-hover: var( --system-button-static-white-outline-not-secondary-background-color-hover ); @@ -307,15 +313,6 @@ governing permissions and limitations under the License. } :host([static-color='black'][variant='secondary'][treatment='outline']) { - --mod-button-background-color-hover: var( - --system-button-static-black-secondary-outline-background-color-hover - ); - --mod-button-background-color-down: var( - --system-button-static-black-secondary-outline-background-color-down - ); - --mod-button-background-color-focus: var( - --system-button-static-black-secondary-outline-background-color-focus - ); --mod-button-border-color-default: var( --system-button-static-black-secondary-outline-border-color-default ); @@ -331,6 +328,9 @@ governing permissions and limitations under the License. } :host([static-color='black'][treatment='outline']:not([variant='secondary'])) { + --mod-button-background-color-default: var( + --system-button-static-black-outline-not-secondary-background-color-default + ); --mod-button-background-color-hover: var( --system-button-static-black-outline-not-secondary-background-color-hover ); diff --git a/packages/button/src/spectrum-button.css b/packages/button/src/spectrum-button.css index cdde8d5e52c..86112803ec9 100644 --- a/packages/button/src/spectrum-button.css +++ b/packages/button/src/spectrum-button.css @@ -61,6 +61,7 @@ governing permissions and limitations under the License. } #label { + text-align: center; place-self: center; } @@ -249,7 +250,6 @@ governing permissions and limitations under the License. --mod-button-background-color-down: var(--spectrum-gray-400); --mod-button-border-color-default: var(--spectrum-gray-300); --mod-button-border-color-hover: var(--spectrum-gray-400); - --mod-button-border-color-down: var(--spectrum-gray-500); --mod-button-border-color-focus: var(--spectrum-gray-400); --mod-button-border-color-disabled: var(--spectrum-disabled-border-color); --mod-button-content-color-default: var(--spectrum-neutral-content-color-default); @@ -360,7 +360,6 @@ governing permissions and limitations under the License. font-size: var(--spectrum-button-font-size); font-weight: var(--mod-bold-font-weight, var(--spectrum-bold-font-weight)); gap: var(--spectrum-button-padding-label-to-icon); - max-inline-size: none; max-inline-size: var(--mod-button-max-inline-size, none); min-inline-size: var(--spectrum-button-min-width); min-block-size: var(--spectrum-button-height); @@ -370,12 +369,7 @@ governing permissions and limitations under the License. background-color: var(--highcontrast-button-background-color-default, var(--mod-button-background-color-default, var(--spectrum-button-background-color-default))); border-style: solid; border-color: var(--highcontrast-button-border-color-default, var(--mod-button-border-color-default, var(--spectrum-button-border-color-default))); - color: inherit; color: var(--spectrum-button-content-color-default, inherit); - transition: - border 0.13s linear, - color 0.13s linear, - background-color 0.13s linear; transition: border var(--spectrum-button-animation-duration, 0.13s) linear, color var(--spectrum-button-animation-duration, 0.13s) linear, @@ -451,16 +445,12 @@ governing permissions and limitations under the License. ::slotted([slot='icon']) { visibility: visible; opacity: 1; - transition: opacity 0.13s ease-in-out; transition: opacity var(--spectrum-button-animation-duration, 0.13s) ease-in-out; } .spectrum-ProgressCircle { visibility: hidden; opacity: 0; - transition: - opacity 0.13s ease-in-out, - visibility 0s linear 0.13s; transition: opacity var(--spectrum-button-animation-duration, 0.13s) ease-in-out, visibility 0s linear var(--spectrum-button-animation-duration, 0.13s); @@ -475,7 +465,6 @@ governing permissions and limitations under the License. :host([pending]) .spectrum-ProgressCircle { visibility: visible; opacity: 1; - transition: opacity 0.13s ease-in-out; transition: opacity var(--spectrum-button-animation-duration, 0.13s) ease-in-out; } @@ -505,13 +494,11 @@ governing permissions and limitations under the License. } [name='icon'] + #label { - text-align: start; text-align: var(--mod-button-text-align-with-icon, start); } #label { line-height: var(--spectrum-button-line-height); - text-align: center; text-align: var(--mod-button-text-align, center); align-self: start; padding-block-start: calc(var(--spectrum-button-top-to-text) - var(--spectrum-button-border-width)); diff --git a/packages/button/stories/button-black-fill.stories.ts b/packages/button/stories/button-black-fill.stories.ts index f56aee7708a..01a1f54cfe6 100644 --- a/packages/button/stories/button-black-fill.stories.ts +++ b/packages/button/stories/button-black-fill.stories.ts @@ -23,16 +23,16 @@ import '@spectrum-web-components/icons-workflow/icons/sp-icon-help.js'; import type { Properties } from './index.js'; import { args, argTypes } from './index.js'; -const variant = 'black'; +const staticColor = 'black'; const treatment = 'fill'; export default { component: 'sp-button', title: 'Button/Black/Fill', - decorators: [makeOverBackground(variant)], + decorators: [makeOverBackground(staticColor)], args: { ...args, - variant, + staticColor, treatment, }, argTypes, @@ -41,6 +41,20 @@ export default { export const Default = (props: Properties): TemplateResult => renderButtonSet(props); +export const Primary = (props: Properties): TemplateResult => + renderButtonSet(props); + +Primary.args = { + variant: 'primary', +}; + +export const Secondary = (props: Properties): TemplateResult => + renderButtonSet(props); + +Secondary.args = { + variant: 'secondary', +}; + export const withIcon = (props: Properties): TemplateResult => renderWithIcon(props); diff --git a/packages/button/stories/button-black-outline.stories.ts b/packages/button/stories/button-black-outline.stories.ts index 9cef7e00fa3..73a9bbd3ef5 100644 --- a/packages/button/stories/button-black-outline.stories.ts +++ b/packages/button/stories/button-black-outline.stories.ts @@ -23,16 +23,16 @@ import '@spectrum-web-components/icons-workflow/icons/sp-icon-help.js'; import type { Properties } from './index.js'; import { args, argTypes } from './index.js'; -const variant = 'black'; +const staticColor = 'black'; const treatment = 'outline'; export default { component: 'sp-button', title: 'Button/Black/Outline', - decorators: [makeOverBackground(variant)], + decorators: [makeOverBackground(staticColor)], args: { ...args, - variant, + staticColor, treatment, }, argTypes, @@ -41,6 +41,20 @@ export default { export const Default = (props: Properties): TemplateResult => renderButtonSet(props); +export const Primary = (props: Properties): TemplateResult => + renderButtonSet(props); + +Primary.args = { + variant: 'primary', +}; + +export const Secondary = (props: Properties): TemplateResult => + renderButtonSet(props); + +Secondary.args = { + variant: 'secondary', +}; + export const withIcon = (props: Properties): TemplateResult => renderWithIcon(props); diff --git a/packages/button/stories/button-white-fill.stories.ts b/packages/button/stories/button-white-fill.stories.ts index 22406c28142..bc939a0bd93 100644 --- a/packages/button/stories/button-white-fill.stories.ts +++ b/packages/button/stories/button-white-fill.stories.ts @@ -23,16 +23,16 @@ import '@spectrum-web-components/icons-workflow/icons/sp-icon-help.js'; import type { Properties } from './index.js'; import { args, argTypes } from './index.js'; -const variant = 'white'; +const staticColor = 'white'; const treatment = 'fill'; export default { component: 'sp-button', title: 'Button/White/Fill', - decorators: [makeOverBackground()], + decorators: [makeOverBackground(staticColor)], args: { ...args, - variant, + staticColor, treatment, }, argTypes, @@ -41,6 +41,20 @@ export default { export const Default = (props: Properties): TemplateResult => renderButtonSet(props); +export const Primary = (props: Properties): TemplateResult => + renderButtonSet(props); + +Primary.args = { + variant: 'primary', +}; + +export const Secondary = (props: Properties): TemplateResult => + renderButtonSet(props); + +Secondary.args = { + variant: 'secondary', +}; + export const withIcon = (props: Properties): TemplateResult => renderWithIcon(props); diff --git a/packages/button/stories/button-white-outline.stories.ts b/packages/button/stories/button-white-outline.stories.ts index 6f2c119415d..22284393313 100644 --- a/packages/button/stories/button-white-outline.stories.ts +++ b/packages/button/stories/button-white-outline.stories.ts @@ -23,16 +23,16 @@ import '@spectrum-web-components/icons-workflow/icons/sp-icon-help.js'; import type { Properties } from './index.js'; import { args, argTypes } from './index.js'; -const variant = 'white'; +const staticColor = 'white'; const treatment = 'outline'; export default { component: 'sp-button', title: 'Button/White/Outline', - decorators: [makeOverBackground()], + decorators: [makeOverBackground(staticColor)], args: { ...args, - variant, + staticColor, treatment, }, argTypes, @@ -41,6 +41,20 @@ export default { export const Default = (props: Properties): TemplateResult => renderButtonSet(props); +export const Primary = (props: Properties): TemplateResult => + renderButtonSet(props); + +Primary.args = { + variant: 'primary', +}; + +export const Secondary = (props: Properties): TemplateResult => + renderButtonSet(props); + +Secondary.args = { + variant: 'secondary', +}; + export const withIcon = (props: Properties): TemplateResult => renderWithIcon(props); diff --git a/packages/button/stories/index.ts b/packages/button/stories/index.ts index 2dbd3434f1e..3559bacaf54 100644 --- a/packages/button/stories/index.ts +++ b/packages/button/stories/index.ts @@ -89,12 +89,12 @@ export const argTypes = { }; export const makeOverBackground = - (variant?: 'white' | 'black') => + (staticColor?: 'white' | 'black') => (story: () => TemplateResult): TemplateResult => { const color = - variant === 'black' - ? 'rgb(181, 209, 211)' - : 'var(--spectrum-seafoam-900)'; + staticColor === 'black' + ? 'var(--spectrum-docs-static-black-background-color)' + : 'var(--spectrum-docs-static-white-background-color)'; return html`
${properties.content || 'Click Me'} diff --git a/packages/button/stories/template.ts b/packages/button/stories/template.ts index fbbf139a1e0..f954f8c33b0 100644 --- a/packages/button/stories/template.ts +++ b/packages/button/stories/template.ts @@ -18,6 +18,7 @@ import { } from '@spectrum-web-components/button/src/Button.js'; export interface Properties { + staticColor?: 'white' | 'black'; variant?: ButtonVariants; treatment?: ButtonTreatments; quiet?: boolean; diff --git a/packages/button/test/button.test.ts b/packages/button/test/button.test.ts index 02e551c0484..3f4bd442081 100644 --- a/packages/button/test/button.test.ts +++ b/packages/button/test/button.test.ts @@ -818,6 +818,36 @@ describe('Button', () => { await elementUpdated(el); expect(el.variant).to.equal('accent'); }); + it('allows variant and static-color to coexist', async () => { + const el = await fixture