From f52cb053c7be78d8da9ca7ad9ea2aef8585ceb20 Mon Sep 17 00:00:00 2001 From: Josh Winn <965114+jawinn@users.noreply.github.com> Date: Fri, 29 Mar 2024 09:04:28 -0400 Subject: [PATCH] fix(button): additional s2 style adjustments and organization - make usage of edge to visual values consistent - use full corner rounding on icon-only variant, which does not need to account for wrapping text - correct static white secondary outline background color, per PR review - chore: apply linter formatting --- components/button/index.css | 38 ++++++++++++--------- components/button/stories/button.stories.js | 2 +- components/button/stories/template.js | 2 +- 3 files changed, 24 insertions(+), 18 deletions(-) diff --git a/components/button/index.css b/components/button/index.css index a0890a7118c..0abce21dad9 100644 --- a/components/button/index.css +++ b/components/button/index.css @@ -30,9 +30,9 @@ governing permissions and limitations under the License. --spectrum-button-font-weight: var(--spectrum-bold-font-weight); --spectrum-button-font-size: var(--spectrum-font-size-100); - --spectrum-button-edge-to-visual: calc(var(--spectrum-component-pill-edge-to-visual-100) - var(--spectrum-button-border-width)); - --spectrum-button-edge-to-visual-only: var(--spectrum-component-pill-edge-to-visual-only-100); - --spectrum-button-edge-to-text: calc(var(--spectrum-component-pill-edge-to-text-100) - var(--spectrum-button-border-width)); + --spectrum-button-edge-to-visual: calc(var(--spectrum-component-pill-edge-to-visual-100) - var(--mod-button-border-width, var(--spectrum-button-border-width))); + --spectrum-button-edge-to-visual-only: calc(var(--spectrum-component-pill-edge-to-visual-only-100) - var(--mod-button-border-width, var(--spectrum-button-border-width))); + --spectrum-button-edge-to-text: calc(var(--spectrum-component-pill-edge-to-text-100) - var(--mod-button-border-width, var(--spectrum-button-border-width))); --spectrum-button-padding-label-to-icon: var(--spectrum-text-to-visual-100); --spectrum-button-top-to-text: var(--spectrum-button-top-to-text-medium); --spectrum-button-bottom-to-text: var(--spectrum-button-bottom-to-text-medium); @@ -42,6 +42,10 @@ governing permissions and limitations under the License. --mod-progress-circle-position: absolute; /* stylelint-disable-next-line spectrum-tools/no-unknown-custom-properties */ --spectrum-downstate-perspective: max(var(--spectrum-downstate-height), var(--spectrum-downstate-width) * var(--spectrum-component-size-width-ratio-down)); + + &.spectrum-Button--iconOnly { + --spectrum-button-border-radius: var(--spectrum-corner-radius-full); + } } .spectrum-Button--sizeS { @@ -50,9 +54,9 @@ governing permissions and limitations under the License. --spectrum-button-font-size: var(--spectrum-font-size-75); - --spectrum-button-edge-to-visual: calc(var(--spectrum-component-pill-edge-to-visual-75) - var(--spectrum-button-border-width)); - --spectrum-button-edge-to-visual-only: var(--spectrum-component-pill-edge-to-visual-only-75); - --spectrum-button-edge-to-text: calc(var(--spectrum-component-pill-edge-to-text-75) - var(--spectrum-button-border-width)); + --spectrum-button-edge-to-visual: calc(var(--spectrum-component-pill-edge-to-visual-75) - var(--mod-button-border-width, var(--spectrum-button-border-width))); + --spectrum-button-edge-to-visual-only: calc(var(--spectrum-component-pill-edge-to-visual-only-75) - var(--mod-button-border-width, var(--spectrum-button-border-width))); + --spectrum-button-edge-to-text: calc(var(--spectrum-component-pill-edge-to-text-75) - var(--mod-button-border-width, var(--spectrum-button-border-width))); --spectrum-button-padding-label-to-icon: var(--spectrum-text-to-visual-75); --spectrum-button-top-to-text: var(--spectrum-button-top-to-text-small); --spectrum-button-bottom-to-text: var(--spectrum-button-bottom-to-text-small); @@ -70,9 +74,9 @@ governing permissions and limitations under the License. --spectrum-button-font-size: var(--spectrum-font-size-200); - --spectrum-button-edge-to-visual: calc(var(--spectrum-component-pill-edge-to-visual-200) - var(--spectrum-button-border-width)); - --spectrum-button-edge-to-visual-only: var(--spectrum-component-pill-edge-to-visual-only-200); - --spectrum-button-edge-to-text: calc(var(--spectrum-component-pill-edge-to-text-200) - var(--spectrum-button-border-width)); + --spectrum-button-edge-to-visual: calc(var(--spectrum-component-pill-edge-to-visual-200) - var(--mod-button-border-width, var(--spectrum-button-border-width))); + --spectrum-button-edge-to-visual-only: calc(var(--spectrum-component-pill-edge-to-visual-only-200) - var(--mod-button-border-width, var(--spectrum-button-border-width))); + --spectrum-button-edge-to-text: calc(var(--spectrum-component-pill-edge-to-text-200) - var(--mod-button-border-width, var(--spectrum-button-border-width))); --spectrum-button-padding-label-to-icon: var(--spectrum-text-to-visual-200); --spectrum-button-top-to-text: var(--spectrum-button-top-to-text-large); --spectrum-button-bottom-to-text: var(--spectrum-button-bottom-to-text-large); @@ -86,9 +90,9 @@ governing permissions and limitations under the License. --spectrum-button-font-size: var(--spectrum-font-size-300); - --spectrum-button-edge-to-visual: calc(var(--spectrum-component-pill-edge-to-visual-300) - var(--spectrum-button-border-width)); - --spectrum-button-edge-to-visual-only: var(--spectrum-component-pill-edge-to-visual-only-300); - --spectrum-button-edge-to-text: calc(var(--spectrum-component-pill-edge-to-text-300) - var(--spectrum-button-border-width)); + --spectrum-button-edge-to-visual: calc(var(--spectrum-component-pill-edge-to-visual-300) - var(--mod-button-border-width, var(--spectrum-button-border-width))); + --spectrum-button-edge-to-visual-only: calc(var(--spectrum-component-pill-edge-to-visual-only-300) - var(--mod-button-border-width, var(--spectrum-button-border-width))); + --spectrum-button-edge-to-text: calc(var(--spectrum-component-pill-edge-to-text-300) - var(--mod-button-border-width, var(--spectrum-button-border-width))); --spectrum-button-padding-label-to-icon: var(--spectrum-text-to-visual-300); --spectrum-button-top-to-text: var(--spectrum-button-top-to-text-extra-large); --spectrum-button-bottom-to-text: var(--spectrum-button-bottom-to-text-extra-large); @@ -247,6 +251,11 @@ governing permissions and limitations under the License. --spectrum-button-content-color-focus: var(--spectrum-transparent-white-900); &.spectrum-Button--outline { + --spectrum-button-background-color-default: var(--spectrum-transparent-white-25); + --spectrum-button-background-color-hover: var(--spectrum-transparent-white-100); + --spectrum-button-background-color-down: var(--spectrum-transparent-white-100); + --spectrum-button-background-color-focus: var(--spectrum-transparent-white-100); + --spectrum-button-border-color-default: var(--spectrum-transparent-white-300); --spectrum-button-border-color-hover: var(--spectrum-transparent-white-400); --spectrum-button-border-color-down: var(--spectrum-transparent-white-400); @@ -488,10 +497,7 @@ a.spectrum-Button { /* Icon only variant */ .spectrum-Button.spectrum-Button--iconOnly { min-inline-size: unset; - padding: calc( - var(--mod-button-edge-to-visual-only, var(--spectrum-button-edge-to-visual-only)) - - var(--mod-button-border-width, var(--spectrum-button-border-width)) - ); + padding: var(--mod-button-edge-to-visual-only, var(--spectrum-button-edge-to-visual-only)); .spectrum-Icon { align-self: center; diff --git a/components/button/stories/button.stories.js b/components/button/stories/button.stories.js index 0ccaa7142c4..3047ae884be 100644 --- a/components/button/stories/button.stories.js +++ b/components/button/stories/button.stories.js @@ -13,7 +13,7 @@ import { Template } from "./template"; export default { title: "Components/Button", component: "Button", - decorators: [withDownStateDimensionCapture('.spectrum-Button:not(:disabled)')], + decorators: [withDownStateDimensionCapture(".spectrum-Button:not(:disabled)")], argTypes: { size: { name: "Size", diff --git a/components/button/stories/template.js b/components/button/stories/template.js index 9d8ddea3c26..2ea23fbd8ec 100644 --- a/components/button/stories/template.js +++ b/components/button/stories/template.js @@ -37,7 +37,7 @@ export const Template = ({ ariaControls, ...globals }) => { - const [, updateArgs] = useArgs(); + const [, updateArgs] = useArgs(); return html`