feat(button): add noWrap property (#4779)

Author: rubencarvalho

.circleci/config.yml

@@ -10,7 +10,7 @@ executors:
 parameters:
     current_golden_images_hash:
         type: string
-        default: 05cb901762d5af33e21e113ed598cecea3488def
+        default: 3bb8a93772e35ef3bb5e156f76b7c8bd72786144
     wireit_cache_name:
         type: string
         default: wireit

packages/button/package.json

@@ -91,7 +91,7 @@
         "@spectrum-web-components/shared": "^0.48.1"
     },
     "devDependencies": {
-        "@spectrum-css/button": "^13.1.1"
+        "@spectrum-css/button": "^13.3.0"
     },
     "types": "./src/index.d.ts",
     "customElements": "custom-elements.json",

packages/button/src/Button.ts

@@ -156,6 +156,15 @@ export class Button extends SizedMixin(ButtonBase, { noDefaultSize: true }) {
         this.treatment = quiet ? 'outline' : 'fill';
     }
 
+    /**
+     * Disables text wrapping within the button component's label.
+     * Please note that this option is not a part of the design specification
+     * and should be used carefully, with consideration of this overflow behavior
+     * and the readability of the button's content.
+     */
+    @property({ type: Boolean, attribute: 'no-wrap', reflect: true })
+    public noWrap = false;
+
     public get quiet(): boolean {
         return this.treatment === 'outline';
     }

packages/button/src/spectrum-button.css

@@ -134,7 +134,6 @@ governing permissions and limitations under the License.
 }
 
 #label {
-    text-align: center;
     place-self: center;
 }
 
@@ -315,6 +314,8 @@ governing permissions and limitations under the License.
         --mod-button-padding-label-to-icon,
         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(
         --mod-button-min-width,
         var(--spectrum-button-min-width)
@@ -400,6 +401,7 @@ governing permissions and limitations under the License.
         --mod-button-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(
@@ -413,6 +415,7 @@ governing permissions and limitations under the License.
 }
 
 [name='icon'] + #label {
+    text-align: start;
     text-align: var(--mod-button-text-align-with-icon, start);
 }
 
@@ -512,6 +515,10 @@ governing permissions and limitations under the License.
             var(--spectrum-button-content-color-default)
         )
     );
+    transition:
+        border 0.13s linear,
+        color 0.13s linear,
+        background-color 0.13s linear;
     transition:
         border
             var(
@@ -639,6 +646,7 @@ governing permissions and limitations under the License.
 ::slotted([slot='icon']) {
     visibility: visible;
     opacity: 1;
+    transition: opacity 0.13s ease-in-out;
     transition: opacity
         var(
             --mod-button-animation-duration,
@@ -650,6 +658,9 @@ governing permissions and limitations under the License.
 .spectrum-ProgressCircle {
     visibility: hidden;
     opacity: 0;
+    transition:
+        opacity 0.13s ease-in-out,
+        visibility 0s linear 0.13s;
     transition:
         opacity
             var(
@@ -673,6 +684,7 @@ 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(
             --mod-button-animation-duration,
@@ -681,6 +693,12 @@ governing permissions and limitations under the License.
         ease-in-out;
 }
 
+:host([no-wrap]) #label {
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+}
+
 :host([static='black']),
 :host([static='white']) {
     --spectrum-button-focus-indicator-color: var(
@@ -691,13 +709,31 @@ governing permissions and limitations under the License.
 
 @media (forced-colors: active) {
     :host {
+        --highcontrast-button-content-color-default: ButtonText;
+        --highcontrast-button-content-color-hover: ButtonText;
+        --highcontrast-button-content-color-focus: ButtonText;
+        --highcontrast-button-content-color-down: ButtonText;
+        --highcontrast-button-border-color-default: ButtonBorder;
+        --highcontrast-button-border-color-hover: ButtonBorder;
+        --highcontrast-button-border-color-focus: ButtonBorder;
+        --highcontrast-button-border-color-down: ButtonBorder;
+        --highcontrast-button-background-color-default: ButtonFace;
+        --highcontrast-button-background-color-hover: ButtonFace;
+        --highcontrast-button-background-color-down: ButtonFace;
+        --highcontrast-button-background-color-focus: ButtonFace;
+        --highcontrast-button-background-color-disabled: ButtonFace;
         --highcontrast-button-content-color-disabled: GrayText;
         --highcontrast-button-border-color-disabled: GrayText;
         --mod-progress-circle-track-border-color: ButtonText;
         --mod-progress-circle-track-border-color-over-background: ButtonText;
         --mod-progress-circle-thickness: var(
             --spectrum-progress-circle-thickness-medium
         );
+        --mod-button-animation-duration: 0s;
+    }
+
+    #label {
+        forced-color-adjust: none;
     }
 
     :host(:focus-visible):after {
@@ -713,17 +749,17 @@ governing permissions and limitations under the License.
     :host([variant='accent'][treatment='fill']) {
         --highcontrast-button-background-color-default: ButtonText;
         --highcontrast-button-content-color-default: ButtonFace;
+        --highcontrast-button-content-color-hover: HighlightText;
+        --highcontrast-button-content-color-down: HighlightText;
+        --highcontrast-button-content-color-focus: HighlightText;
         --highcontrast-button-background-color-disabled: ButtonFace;
         --highcontrast-button-background-color-hover: Highlight;
         --highcontrast-button-background-color-down: Highlight;
         --highcontrast-button-background-color-focus: Highlight;
-        --highcontrast-button-content-color-hover: ButtonFace;
-        --highcontrast-button-content-color-down: ButtonFace;
-        --highcontrast-button-content-color-focus: ButtonFace;
-    }
-
-    :host([variant='accent'][treatment='fill']) #label {
-        forced-color-adjust: none;
+        --highcontrast-button-border-color-default: ButtonText;
+        --highcontrast-button-border-color-hover: Highlight;
+        --highcontrast-button-border-color-focus: Highlight;
+        --highcontrast-button-border-color-down: Highlight;
     }
 }
 

packages/button/src/spectrum-config.js

@@ -70,6 +70,10 @@ const config = {
                 converter.classToHost(),
                 converter.classToAttribute('spectrum-Button--quiet'),
                 converter.classToAttribute('spectrum-Button--emphasized'),
+                converter.classToAttribute(
+                    'spectrum-Button--noWrap',
+                    'no-wrap'
+                ),
                 converter.classToAttribute('is-selected', 'selected'),
                 converter.classToAttribute('is-focused', 'focused'),
                 converter.classToAttribute('is-pending', 'pending'),

packages/button/stories/button-primary-fill.stories.ts

@@ -9,8 +9,9 @@ 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 { TemplateResult } from '@spectrum-web-components/base';
+import { html, TemplateResult } from '@spectrum-web-components/base';
 import {
+    renderButton,
     renderButtonSet,
     renderIconSizeOverridden,
     renderLink,
@@ -54,6 +55,20 @@ export const minWidthButton = (props: Properties): TemplateResult =>
 
 minWidthButton.storyName = 'min-width';
 
+export const noWrapButton = (props: Properties): TemplateResult =>
+    renderButton({ noWrap, content, ...props });
+
+const noWrap = true;
+const content = html`
+    Really long content that should not wrap, if it does wrap then we have a
+    problem. Do we have a problem? I hope we don't have a problem. Is this long
+    enough to show we do not have a problem? Awesome, we do not have a problem.
+    Really long content that should not wrap, if it does wrap then we have a
+    problem. Do we have a problem? I hope we don't have a problem. Is this long
+    enough to show we do not have a problem? Awesome, we do not have a problem.
+`;
+noWrapButton.storyName = 'no-wrap';
+
 export const link = (props: Properties): TemplateResult => renderLink(props);
 
 link.storyName = 'href';

packages/button/stories/index.ts

@@ -122,6 +122,7 @@ export function renderButton(properties: Properties): TemplateResult {
             ?icon-only=${properties.iconOnly}
             ?pending=${!!properties.pending}
             ?quiet="${!!properties.quiet}"
+            ?no-wrap="${!!properties.noWrap}"
             size=${properties.size}
             target=${ifDefined(properties.target)}
             treatment=${ifDefined(properties.treatment)}

packages/button/stories/template.ts

@@ -27,6 +27,7 @@ export interface Properties {
     size?: 's' | 'm' | 'l' | 'xl';
     href?: string;
     target?: '_blank' | '_parent' | '_self' | '_top';
+    noWrap?: boolean;
     iconOnly?: boolean;
 }
 

yarn.lock

@@ -5038,10 +5038,10 @@
   resolved "https://registry.yarnpkg.com/@spectrum-css/breadcrumb/-/breadcrumb-9.1.3.tgz#c1ea002a4e1f3f0b792b951b0768b1a35460da8a"
   integrity sha512-BHzCr5Q5f2+CQxSlq8rDM03wzvn9EozoI/xDP4kw5WrWI7gXUmCJc2iHzu94pQuWprSxoEE+wfx+r63VQ9gsOQ==
 
-"@spectrum-css/button@^13.1.1":
-  version "13.1.1"
-  resolved "https://registry.yarnpkg.com/@spectrum-css/button/-/button-13.1.1.tgz#42be27e8f8d03a7af3eca17fb7566ca2b8cc5f24"
-  integrity sha512-GyLNIErpuSfES0GftmzGgsBLgzdMd10PVU34TgYuRz9Ad3DeRpfT1PzA9jKDjqXXCtf91tB7lMkYPdUCHcHLgA==
+"@spectrum-css/button@^13.3.0":
+  version "13.3.0"
+  resolved "https://registry.yarnpkg.com/@spectrum-css/button/-/button-13.3.0.tgz#37690a6768cc9c82544014d1fb3115ef552a51c7"
+  integrity sha512-plco8vVj+YiSHZW1LfxWqwmQmKJHd5Ri6XqA47fdF9cU6gGjEvNXd3ZRt8qPI4oZ/RPMPxEkLsgdk44fD5d/Qw==
 
 "@spectrum-css/buttongroup@^7.1.1":
   version "7.1.1"