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

[fdeters]

Check existing issues

• 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

1. https://codepen.io/driskull/pen/WNqjrpq
2. https://gis.oregonmetro.gov/metromap

Reproduction Steps

First sample

1. Open the sample
2. Watch the component load on initialization
3. 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:

1. Visit gis.oregonmetro.gov/metromap
2. 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".
   
3. Click "I agree", then navigate to the "About" page using the nav in the top-right.
4. Go to the "Terms of Use" section using the tab navigation on the About page.
5. 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

• @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:

1. Open the sample - https://codepen.io/driskull/pen/WNqjrpq?editors=1010.
2. Watch the component load on initialization
3. 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 - #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)

[jcfranco]

@fdeters Thanks for submitting this! Could you provide an isolated reproduction case for us to look into?

[driskull]

Here's a repro: https://codepen.io/driskull/pen/WNqjrpq?editors=1010

[geospatialem]

This was also filed as BUG-000169703