Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Closed
2 of 6 tasks
fdeters opened this issue Aug 2, 2024 · 5 comments
Closed
2 of 6 tasks

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

fdeters opened this issue Aug 2, 2024 · 5 comments
Assignees
@geospatialem @DitwanP
Labels
4 - verified Issues that have been released and confirmed resolved. bug Bug reports for broken functionality. Issues should include a reproduction of the bug. calcite-components Issues specific to the @esri/calcite-components package. estimate - 3 A day or two of work, likely requires updates to tests. impact - p3 - not time sensitive User set priority impact status of p3 - not time sensitive p - medium Issue is non core or affecting less that 60% of people using the library Support Issues accepted from Esri Support.
Milestone
2024-09-30 - 2.13...

Comments

@fdeters
Copy link

fdeters commented Aug 2, 2024 •
edited by geospatialem
Loading

Check existing issues

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".
    image
  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".
    image

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)
@fdeters fdeters added 0 - new New issues that need assignment. bug Bug reports for broken functionality. Issues should include a reproduction of the bug. needs triage Planning workflow - pending design/dev review. labels Aug 2, 2024
@github-actions github-actions bot added calcite-components Issues specific to the @esri/calcite-components package. impact - p3 - not time sensitive User set priority impact status of p3 - not time sensitive labels Aug 2, 2024
@jcfranco
Copy link
Member

jcfranco commented Aug 2, 2024

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

@jcfranco jcfranco added the need more info Issues that are missing information and/or a clear, actionable description. label Aug 2, 2024
@driskull
Copy link
Member

driskull commented Aug 2, 2024

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

@geospatialem geospatialem added p - medium Issue is non core or affecting less that 60% of people using the library estimate - 3 A day or two of work, likely requires updates to tests. and removed need more info Issues that are missing information and/or a clear, actionable description. needs triage Planning workflow - pending design/dev review. labels Aug 3, 2024
@geospatialem geospatialem added this to the 2024-10-29 - Oct Release milestone Aug 6, 2024
@geospatialem
Copy link
Member

This was also filed as BUG-000169703

@geospatialem geospatialem changed the title Segmented Control does not respect scale beyond first page load BUG-000169703 Segmented Control does not respect scale beyond first page load Sep 12, 2024
@geospatialem geospatialem added the Support Issues accepted from Esri Support. label Sep 12, 2024
@driskull driskull self-assigned this Sep 20, 2024
@driskull driskull added 2 - in development Issues that are actively being worked on. and removed 0 - new New issues that need assignment. labels Sep 20, 2024
driskull added a commit that referenced this issue Sep 20, 2024
@driskull
fix(segmented-control): honor appearance, layout and scale when items…
58e666d 
… are added after initialization. #9955
@driskull driskull mentioned this issue Sep 20, 2024
Merged
driskull added a commit that referenced this issue Sep 25, 2024
@driskull
fix(segmented-control): honor appearance, layout and scale when items…
98177f0 
… are added after initialization (#10368)

**Related Issue:** #9955

## Summary

- Use slotchange event to get items and update them when necessary
- No need for the mutation observer
- add e2e test
@driskull driskull added 3 - installed Issues that have been merged to master branch and are ready for final confirmation. and removed 2 - in development Issues that are actively being worked on. labels Sep 25, 2024
@github-actions GitHub Actions
Copy link
Contributor

Installed and assigned for verification.

@github-actions github-actions bot assigned DitwanP and unassigned driskull Sep 25, 2024
@geospatialem geospatialem added 4 - verified Issues that have been released and confirmed resolved. and removed 3 - installed Issues that have been merged to master branch and are ready for final confirmation. labels Sep 25, 2024
@geospatialem
Copy link
Member

Verified with the Chromatic build using Matt's example:

image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@geospatialem geospatialem

@DitwanP DitwanP

Labels
4 - verified Issues that have been released and confirmed resolved. bug Bug reports for broken functionality. Issues should include a reproduction of the bug. calcite-components Issues specific to the @esri/calcite-components package. estimate - 3 A day or two of work, likely requires updates to tests. impact - p3 - not time sensitive User set priority impact status of p3 - not time sensitive p - medium Issue is non core or affecting less that 60% of people using the library Support Issues accepted from Esri Support.
Projects
None yet
Milestone
2024-09-30 - 2.13.0 Sep Main release
Development

No branches or pull requests
5 participants
@jcfranco @driskull @geospatialem @DitwanP @fdeters