chore(button): CSS for icon-only attribute #3716
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
13 tasks
|
FYI: #3398 |
najikahalsema
approved these changes
Oct 11, 2023
|
@najikahalsema @Westbrook If everything looks good here can we merge this? |
Tachometer resultsChromeaction-bar permalink
action-button permalink
action-group permalink
action-menu permalink
alert-dialog permalink
button-group permalink
button permalink
dialog permalink
infield-button permalink
menu permalink
number-field permalink
overlay permalink
picker-button permalink
picker permalink
popover permalink
search permalink
slider permalink
split-button permalink
tags permalink
toast permalink
tooltip permalink
Firefoxaction-bar permalink
action-button permalink
action-group permalink
action-menu permalink
alert-dialog permalink
button-group permalink
button permalink
dialog permalink
infield-button permalink
menu permalink
number-field permalink
overlay permalink
picker-button permalink
picker permalink
popover permalink
search permalink
slider permalink
split-button permalink
tags permalink
toast permalink
tooltip permalink
|
najikahalsema
approved these changes
Oct 31, 2023
najikahalsema
previously requested changes
Oct 31, 2023
1 task
Westbrook
reviewed
Nov 6, 2023
There was a problem hiding this comment.
Some things for this:
-
please add stories with the icon only button in isolation so we can manage it via regression testing
-
Should a user be able to set
buttonRef.iconOnly = trueor do we want to requirebuttonRef.toggleAttribute('icon-only', true)? Either way works, but we should add content about this to the documentation site based on the decisions we make there for today. -
see https://spectrum.adobe.com/page/button/#Label-and-icon, particularly:
The label can be hidden to create an icon-only button. If the label is hidden, an icon is required, and the label will appear in a tooltip.
I'm OK not to block on that, though it would be nice to have this feature, too. We can land this for Coachmark work as is (with stories) and then keep [Feat][Button]: Support
icon-onlyattribute #3398 open for the follow up work around a Tooltip.
@Westbrook Added the required stories and also updated the tests and docs to cater icon-only attribute for Icon Only Button element |
Westbrook
approved these changes
Nov 7, 2023
| @@ -84,7 +84,7 @@ describe('Button', () => { | |||
| it('loads default only icon', async () => { | |||
| const el = await fixture<Button>( | |||
| html` | |||
| <sp-button label="Button"> | |||
| <sp-button label="Button" icon-only> | |||
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Description
Added CSS for icon-only attribute for
sp-buttonMotivation and context
To solve the below issue on a rounded button with icon
How has this been tested?
Screenshots (if appropriate)
Types of changes
Checklist
Best practices
This repository uses conventional commit syntax for each commit message; note that the GitHub UI does not use this by default so be cautious when accepting suggested changes. Avoid the "Update branch" button on the pull request and opt instead for rebasing your branch against
main.