feat(button): add label text wrap option by aramos-adobe · Pull Request #3086 · adobe/spectrum-css

aramos-adobe · 2024-09-09T15:07:10Z

Description

This change makes buttons not wrap label text by default.
Introducing a class to make label text wrap if dev chooses to do so.
Added label wrap class in Text Overflow story in Storybook

How and where has this been tested?

Please tag yourself on the tests you've marked complete to confirm the tests have been run by someone other than the author.

Validation steps

Regression testing

Validate:

The documentation pages for at least two other components are still loading, including:

The pages render correctly, are accessible, and are responsive.

If components have been modified, VRTs have been run on this branch:

VRTs have been run and looked at.
Any VRT changes have been accepted (by reviewer and/or PR author), or there are no changes.

Screenshots

To-do list

I have read the contribution guidelines.
I have updated relevant storybook stories and templates.
I have tested these changes in Windows High Contrast mode.
If my change impacts other components, I have tested to make sure they don't break.
If my change impacts documentation, I have updated the documentation accordingly.
✨ This pull request is ready to merge. ✨

changeset-bot · 2024-09-09T15:07:14Z

🦋 Changeset detected

Latest commit: 1308f38

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@spectrum-css/button	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

github-actions · 2024-09-09T15:11:57Z

🚀 Deployed on https://pr-3086--spectrum-css.netlify.app

github-actions · 2024-09-09T15:17:04Z

File metrics

Summary

Total size: 4.11 MB^*
Total change (Δ): ⬆ 0.61 KB (0.01%)

Table reports on changes to a package's main file. Other changes can be found in the collapsed Details section below.

Package	Size	Δ
button	84.16 KB	⬆ 0.20 KB

Details

button

File	Head	Base	Δ
index-base.css	54.20 KB	54.01 KB	⬆ 0.20 KB (0.37%)
index-theme.css	30.56 KB	30.56 KB	-
index-vars.css	84.16 KB	83.96 KB	⬆ 0.20 KB (0.23%)
index.css	84.16 KB	83.96 KB	⬆ 0.20 KB (0.23%)
themes/express.css	29.37 KB	29.37 KB	-
themes/spectrum.css	29.43 KB	29.43 KB	-

* Size determined by adding together the size of the main file for all packages in the library.
* Results are not gzipped or minified.
* An ASCII character in UTF-8 is 8 bits or 1 byte.

aramos-adobe · 2024-09-11T13:42:38Z

jawinn

I think the nowrap CSS should work here. This and the added control look good!

Could you make sure that we have this included in the VRTs, by adding a noWrap: true test in the button.test.js file? It will need either a set width on the wrapperStyles, or a min-inline-size like the text overflow examples in order for wrapping to happen. When added it'll be viewable on the Default story with "Show testing preview" turned on.

jawinn · 2024-09-16T19:21:26Z


+/* Disable button label wrap  */
+.spectrum-Button--noWrap {
+	justify-content: flex-start;


With the overflow and text-overflow additions, is this addition still needed? With short text plus the minimum width and for buttons with some other set width, the text will no longer be centered:

@jawinn When the max-inline-size is set all the button content gets cut off from left and right edges of the container. I was thinking of doing a flex-start and overflow additions it'll show the dev the text is too long and they need to make an adjustment character wise.

After some thought, I'm going to remove this because it's not a design specification and I don't want teams to get mislead in anyway.

I do think what you had, .spectrum-Button-label { overflow: hidden; text-overflow: ellipsis; } is a good idea. I think we should handle the text overflow for cases where the button's width is constrained, as it gets a bit broken as seen in the Chromatic testing view right now. Does it work okay with just those two properties?

@jawinn Yes, they work with just these two properties.

…specs

…hangeset

jawinn · 2024-09-19T18:40:09Z

 		staticColor,
+		noWrap: {
+			name: "Disable label wrap",
+			description: "Used only to keep the button label text in one line. It is intended to have the label wrap as it is part of design specifications.",


Suggested change

description: "Used only to keep the button label text in one line. It is intended to have the label wrap as it is part of design specifications.",

description: "Used to keep the button label text on one line. Note that this option is not a part of the design specifications which intend for the label to wrap. Use with care and consideration of this option's overflow behavior and the readability of the button's content.",

jawinn · 2024-09-19T18:44:22Z

+Adds the ability to disable text wrapping within the button component's label by applying the class `.spectrum-Button--noWrap` to `.spectrum-Button`.
+
+If the text is longer than the button container an ellipsis `...` indicator will show. Please adjust text length and `max-inline-size` of the button container.


Suggested change

Adds the ability to disable text wrapping within the button component's label by applying the class `.spectrum-Button--noWrap` to `.spectrum-Button`.

If the text is longer than the button container an ellipsis `...` indicator will show. Please adjust text length and `max-inline-size` of the button container.

Adds the ability to disable text wrapping within the button component's label by applying the class `.spectrum-Button--noWrap` to `.spectrum-Button`. If the text overflows the maximum allowed width of the button, an ellipsis `...` indicator will show. 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.

I was unclear about what the last "Please..." sentence was suggesting the user should do. I took a shot at rewording a bit, with a bit more warning.

pfulton

Thanks!!

pfulton · 2024-09-11T19:15:44Z

@@ -0,0 +1,5 @@
+---


Oh interesting that two of these got generated. I think we could delete one of them, as they're signifying the same changes. Maybe remove this one.

aramos-adobe · 2024-09-23T12:39:21Z

Aziz Ramos added 3 commits September 9, 2024 10:41

feat: adding wrap option to button

3d567cd

Merge branch 'main' into aramos-adobe/button-wrap-prop

1621a83

chore: build and changesets

383ad48

aramos-adobe added the ready-for-review label Sep 9, 2024

aramos-adobe self-assigned this Sep 9, 2024

Aziz Ramos added 2 commits September 11, 2024 09:20

Merge branch 'main' into aramos-adobe/button-wrap-prop

83804d5

feat(button): adding nowrap option for button label

d49ea11

jawinn suggested changes Sep 12, 2024

View reviewed changes

Comment thread .changeset/mean-shrimps-press.md Outdated

Comment thread components/button/stories/template.js Outdated

Comment thread components/button/stories/template.js Outdated

Comment thread components/button/stories/button.stories.js Outdated

jawinn reviewed Sep 12, 2024

View reviewed changes

Comment thread components/button/stories/button.stories.js Outdated

Aziz Ramos and others added 3 commits September 12, 2024 15:39

fix(button): removing unnecessary variables

4b62da7

fix(button): add test cases for button and show overflow indication

76d068a

Merge branch 'main' into aramos-adobe/button-wrap-prop

b21c8aa

aramos-adobe requested a review from jawinn September 13, 2024 20:46

Aziz Ramos added 4 commits September 16, 2024 09:14

Merge branch 'main' into aramos-adobe/button-wrap-prop

9e240f3

fix(button): removing comment in nowrap class

033f07e

fix(button): linting

5346698

fix(button): remove changeset

817f05d

jawinn suggested changes Sep 16, 2024

View reviewed changes

Aziz Ramos added 3 commits September 17, 2024 08:55

fix(button): removing truncation visual indicator not part of design …

ec45816

…specs

chore(button): updating packages

46c05e1

feat(button): update changeset

b3b706b

aramos-adobe requested a review from jawinn September 17, 2024 15:09

pfulton added the s1 label Sep 17, 2024

Aziz Ramos added 3 commits September 17, 2024 17:12

Merge branch 'main' into aramos-adobe/button-wrap-prop

6069311

feat(button): adding tooltip to truncated buttons that do not wrap

ef49e4d

docs(button): adding button docs for nowrapping feature and note in c…

d705ec1

…hangeset

Aziz Ramos added 3 commits September 18, 2024 20:41

Merge branch 'main' into aramos-adobe/button-wrap-prop

bca59e9

Merge branch 'main' into aramos-adobe/button-wrap-prop

34c4c2b

fix(button): adding metadata

c9e8f43

jawinn suggested changes Sep 19, 2024

View reviewed changes

feat(button): adding max inline size mod and updating docs

ae002b1

pfulton approved these changes Sep 19, 2024

View reviewed changes

jawinn approved these changes Sep 20, 2024

View reviewed changes

Merge branch 'main' into aramos-adobe/button-wrap-prop

1308f38

aramos-adobe merged commit 088c104 into main Sep 23, 2024

aramos-adobe deleted the aramos-adobe/button-wrap-prop branch September 23, 2024 12:39

github-actions Bot mentioned this pull request Sep 23, 2024

chore: release #3150

Merged

marissahuysentruyt mentioned this pull request May 2, 2025

fix(button,statuslight,picker,etc): address regressions in migrated components #3687

Merged

18 tasks

	description: "Used only to keep the button label text in one line. It is intended to have the label wrap as it is part of design specifications.",
	description: "Used to keep the button label text on one line. Note that this option is not a part of the design specifications which intend for the label to wrap. Use with care and consideration of this option's overflow behavior and the readability of the button's content.",

		Adds the ability to disable text wrapping within the button component's label by applying the class `.spectrum-Button--noWrap` to `.spectrum-Button`.

		If the text is longer than the button container an ellipsis `...` indicator will show. Please adjust text length and `max-inline-size` of the button container.

Conversation

aramos-adobe commented Sep 9, 2024

Description

How and where has this been tested?

Validation steps

Regression testing

Screenshots

To-do list

Uh oh!

changeset-bot Bot commented Sep 9, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

github-actions Bot commented Sep 9, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions Bot commented Sep 9, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

File metrics

Summary

button

Uh oh!

aramos-adobe commented Sep 11, 2024

Uh oh!

jawinn left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

jawinn Sep 16, 2024

Choose a reason for hiding this comment

Uh oh!

aramos-adobe Sep 17, 2024

Choose a reason for hiding this comment

Uh oh!

jawinn Sep 17, 2024

Choose a reason for hiding this comment

Uh oh!

aramos-adobe Sep 17, 2024

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

jawinn Sep 19, 2024

Choose a reason for hiding this comment

Uh oh!

jawinn Sep 19, 2024

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

pfulton left a comment

Choose a reason for hiding this comment

Uh oh!

pfulton Sep 11, 2024

Choose a reason for hiding this comment

Uh oh!

aramos-adobe commented Sep 23, 2024

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

changeset-bot Bot commented Sep 9, 2024 •

edited

Loading

github-actions Bot commented Sep 9, 2024 •

edited

Loading

github-actions Bot commented Sep 9, 2024 •

edited

Loading

jawinn left a comment •

edited

Loading