feat(sp-button-group): sp-button-group react to size updates #5037

Rocss · 2025-01-17T13:03:40Z

Description

Makes sp-button-group react to changes in size attribute.

Related issue(s)

[Bug]: sp-button-group does not change button sizes based on button group size #5030

Motivation and context

#5030

How has this been tested?

Test case 1
1. Go here
2. Using the Controls Addon, change the size
3. Observe the component reacts to the change accordingly
Did it pass in Desktop?
Did it pass in Mobile?
Did it pass in iPad?

Screenshots (if appropriate)

Types of changes

Bug fix (non-breaking change which fixes an issue)
New feature (non-breaking change which adds functionality)
Breaking change (fix or feature that would cause existing functionality to change)
Chore (minor updates related to the tooling or maintenance of the repository, does not impact compiled assets)

Checklist

I have signed the Adobe Open Source CLA.
My code follows the code style of this project.
If my change required a change to the documentation, I have updated the documentation in this pull request.
I have read the CONTRIBUTING document.
I have added tests to cover my changes.
All new and existing tests passed.
I have reviewed at the Accessibility Practices for this feature, see: Aria Practices

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.

changeset-bot · 2025-01-17T13:03:44Z

⚠️ No Changeset found

Latest commit: aa642d3

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

Click here to learn what changesets are, and how to add one.

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

github-actions · 2025-01-17T13:07:50Z

Tachometer results

Currently, no packages are changed by this PR...

coveralls · 2025-01-17T13:10:45Z

Pull Request Test Coverage Report for Build 12871512838

Details

20 of 20 (100.0%) changed or added relevant lines in 1 file are covered.
No unchanged relevant lines lost coverage.
Overall coverage decreased (-0.001%) to 98.208%

Totals
Change from base Build 12823099042:	-0.001%
Covered Lines:	33025
Relevant Lines:	33449

💛 - Coveralls

github-actions · 2025-01-17T13:12:41Z

Branch preview

Review the following VRT differences

When a visual regression test fails (or has previously failed while working on this branch), its results can be found in the following URLs:

If the changes are expected, update the current_golden_images_cache hash in the circleci config to accept the new images. Instructions are included in that file.
If the changes are unexpected, you can investigate the cause of the differences and update the code accordingly.

github-actions · 2025-01-17T13:17:07Z

Lighthouse scores

Category	Latest (report)	Main (report)	Branch (report)
Performance	0.99	0.99	0.99
Accessibility	1	1	1
Best Practices	1	1	1
SEO	1	0.92	0.92
PWA	1	1	1

What is this?

Lighthouse scores comparing the documentation site built from the PR ("Branch") to that of the production documentation site ("Latest") and the build currently on main ("Main"). Higher scores are better, but note that the SEO scores on Netlify URLs are artifically constrained to 0.92.

Transfer Size

Category	Latest	Main	Branch
Total	250.52 kB	236.23 kB	235.845 kB 🏆
Scripts	60.416 kB	54.368 kB	53.919 kB 🏆
Stylesheet	53.891 kB	47.427 kB 🏆	47.478 kB
Document	6.227 kB	5.46 kB 🏆	5.475 kB
Font	126.978 kB	126.624 kB	126.624 kB

Request Count

Category	Latest	Main	Branch
Total	52	52	52
Scripts	41	41	41
Stylesheet	5	5	5
Document	1	1	1
Font	2	2	2

rubencarvalho · 2025-01-17T20:34:21Z

packages/button-group/src/ButtonGroup.ts

@@ -36,9 +40,24 @@ export class ButtonGroup extends SizedMixin(SpectrumElement, {
    @property({ type: Boolean, reflect: true })
    public vertical = false;



Not in the scope of this PR, but interestingly, I just noticed that when we extend the SizedMixin, the size property doesn’t appear in our documentation 😶‍🌫️.

I did too, I had to look in the code to see if this component actually supports a size attribute

As it stands, strictly speaking, this is not part of our official API because we don’t explicitly document it, even though it seems it was always intended to be included 😅 .
I’ll sync with our team briefly to decide how we want to address this - it shouldn’t impact this PR, but I’ll report back if it does.

packages/button-group/test/button-group.test.ts

rubencarvalho

🚢

feat: sp-button-group react to size updates

b55fd2f

Rocss added the Component: Button Group label Jan 17, 2025

Rocss marked this pull request as ready for review January 17, 2025 14:24

Rocss requested a review from a team as a code owner January 17, 2025 14:24

rubencarvalho reviewed Jan 17, 2025

View reviewed changes

Rajdeepc changed the title ~~feat: sp-button-group react to size updates~~ feat(sp-button-group): sp-button-group react to size updates Jan 20, 2025

Rajdeepc reviewed Jan 20, 2025

View reviewed changes

packages/button-group/test/button-group.test.ts Show resolved Hide resolved

chore: unit tests for sizedMixin

aa642d3

Rajdeepc approved these changes Jan 21, 2025

View reviewed changes

rubencarvalho approved these changes Jan 22, 2025

View reviewed changes

rubencarvalho merged commit 63bc618 into main Jan 22, 2025
27 checks passed

rubencarvalho deleted the rocss/5030 branch January 22, 2025 10:27

najikahalsema mentioned this pull request Jan 23, 2025

[Bug]: sp-button-group does not change button sizes based on button group size #5030

Closed

1 task

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(sp-button-group): sp-button-group react to size updates #5037

feat(sp-button-group): sp-button-group react to size updates #5037

Rocss commented Jan 17, 2025 •

edited

Loading

changeset-bot bot commented Jan 17, 2025 •

edited

Loading

github-actions bot commented Jan 17, 2025

coveralls commented Jan 17, 2025 •

edited

Loading

github-actions bot commented Jan 17, 2025

github-actions bot commented Jan 17, 2025 •

edited

Loading

rubencarvalho Jan 17, 2025

Rocss Jan 20, 2025

rubencarvalho Jan 20, 2025

rubencarvalho left a comment

		@@ -36,9 +40,24 @@ export class ButtonGroup extends SizedMixin(SpectrumElement, {
		@property({ type: Boolean, reflect: true })
		public vertical = false;

feat(sp-button-group): sp-button-group react to size updates #5037

feat(sp-button-group): sp-button-group react to size updates #5037

Conversation

Rocss commented Jan 17, 2025 • edited Loading

Description

Related issue(s)

Motivation and context

How has this been tested?

Screenshots (if appropriate)

Types of changes

Checklist

Best practices

changeset-bot bot commented Jan 17, 2025 • edited Loading

⚠️ No Changeset found

github-actions bot commented Jan 17, 2025

Tachometer results

coveralls commented Jan 17, 2025 • edited Loading

Pull Request Test Coverage Report for Build 12871512838

Details

💛 - Coveralls

github-actions bot commented Jan 17, 2025

Branch preview

Review the following VRT differences

github-actions bot commented Jan 17, 2025 • edited Loading

Lighthouse scores

Transfer Size

Request Count

rubencarvalho Jan 17, 2025

Choose a reason for hiding this comment

Rocss Jan 20, 2025

Choose a reason for hiding this comment

rubencarvalho Jan 20, 2025

Choose a reason for hiding this comment

rubencarvalho left a comment

Choose a reason for hiding this comment

Rocss commented Jan 17, 2025 •

edited

Loading

changeset-bot bot commented Jan 17, 2025 •

edited

Loading

coveralls commented Jan 17, 2025 •

edited

Loading

github-actions bot commented Jan 17, 2025 •

edited

Loading