BUG-000169703 Segmented Control does not respect `scale` beyond first page load

fdeters commented 2 months ago

Check existing issues

[X] I have checked for existing issues to avoid duplicates

Actual Behavior

Filed as BUG-000169703 🐛

The calcite-segmented-control-item does not respect the scale property on the calcite-segmented-control if the element was rendered after the initial page load. Specifically, I'm seeing a calcite-segmented-control with scale="s" render as though it had scale="m".

Expected Behavior

I expect the calcite-segmented-control and calcite-segmented-control-item to respect the scale property at all times.

Reproduction Samples

Reproduction Steps

First sample

Open the sample
Watch the component load on initialization
Observe the appended child item load in with a different scale than the parent

Second sample

Also, we can see this behavior on my team's live app:

Visit gis.oregonmetro.gov/metromap
Once the page loads, you should see a modal with a legal disclaimer. The modal has a calcite-segmented-control in the bottom left that can be used to switch the language. It is rendering correctly with scale="s".
Click "I agree", then navigate to the "About" page using the nav in the top-right.
Go to the "Terms of Use" section using the tab navigation on the About page.
Click "View disclaimer" in the body of the Terms of Use section. This re-opens the same calcite-modal we saw in step 2. You can now see that the calcite-segmented-control-item is rendering as though it had scale="m", even though it still has scale="s".

Notice that the calcite-segmented-control visible in the site header never changes and always shows as scale="s", like it should.

When I first encountered this bug, we were using that same calcite-segmented-control component in other areas of the application, and it exhibited the same issue.

Reproduction Version

2.9.0

Relevant Info

OS: Windows 10 Browser: Observed on recent versions of Chrome, Edge, and Firefox JS Framework: EmberJS 5.10 with @embroider/router@2.1.8

Regression?

No response

Priority impact

impact - p3 - not time sensitive

Impact

Currently, it's just a minor annoyance. It could cause layout issues for other users.

Calcite package

[X] @esri/calcite-components
[ ] @esri/calcite-components-angular
[ ] @esri/calcite-components-react
[ ] @esri/calcite-design-tokens
[ ] @esri/eslint-plugin-calcite-components

Esri team

N/A

The calcite-segmented-control-item does not honor the scale property on calcite-segmented-control of Calcite Design System if the element is rendered post the initial page load.

Salesforce ID: BUG-000169703
Salesforce Submitter: Ashish Boban
Salesforce Submit Date: 8/02/2024 10:47 PM
Salesforce Bug Type: Failure/Error
Salesforce Severity: Medium
Steps to Repro:

Steps to Reproduce:

Open the sample - https://codepen.io/driskull/pen/WNqjrpq?editors=1010.
Watch the component load on initialization
Observe the appended child item loads with a different scale than the parent.

Other Information: This issue is also highlighted in the GitHub page for Calcite Design System - https://github.com/Esri/calcite-design-system/issues/9955.

Customer Data Specific Bug:

No

Repro Environment Details:

Windows OS 11.0, ArcGIS Maps SDK for JavaScript v4.30, Chrome browser.

Sample Environment Access Information: NA

Development/PSIRT request?

No

Attached Files: Yes

Attached Video: No

Attached Logs: No

Attached Data: Yes

Reproducible in Latest Version: Yes

Repro Data: \esri.com\sf_filestore\PRD\Attachments\Defects\BUG-000169703
Work Around: (n/a)
Product: Calcite Design System
Functional Category: Calcite Design System
Client Platform: (n/a)
Version Found: 2.8
Planned Version Fixed: (n/a)
Comment: (n/a)