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(calcite-button): shadow dom width does not match host width #8490

Closed
2 of 6 tasks
maxpatiiuk opened this issue Dec 22, 2023 · 3 comments
Closed
2 of 6 tasks

bug(calcite-button): shadow dom width does not match host width #8490

maxpatiiuk opened this issue Dec 22, 2023 · 3 comments
Assignees
@geospatialem @DitwanP
Labels
4 - verified Issues that have been released and confirmed resolved. ArcGIS Maps SDK for JavaScript Issues logged by ArcGIS SDK for JavaScript team members. 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 - 2 Small fix or update, may require updates to tests. impact - p3 - not time sensitive User set priority impact status of p3 - not time sensitive low risk Issues with low risk for consideration in low risk milestones p - medium Issue is non core or affecting less that 60% of people using the library
Milestone
2024-05-28 - May ...

Comments

@maxpatiiuk
Copy link
Member

Check existing issues

Actual Behavior

If <calcite-button scale="s"> is told to take 32px x 32px, the host element takes the desired size, but the shadow DOM's <button> is 24px x 32px

Expected Behavior

If <calcite-button> has attribute width="full", <button> has width: 100%; style applied, matching the width of the container

Reproduction Sample

https://codepen.io/maxpatiiuk/pen/NWJWXBP?editors=1100

Reproduction Steps

  1. Open the codepen
  2. See pink - should not be visible

Reproduction Version

2.1.0

Relevant Info

Chrome 120, macOS 14.2

Regression?

No response

Priority impact

p4 - not time sensitive

Impact

I need to hardcode 32px x 32px size for the button because button may either display iconStart, or have a legacy Esri font icon slotted in - in both cases, I want it to maintain the same size (it does not right now as styles for when button has slotted content are quite different)

Current workaround:

  1. Still have 32px x 32px size set in CSS
  2. If button has iconStart, set scale="m"
  3. If button has slotted in legacy font icon, set scale="s"

Calcite package

  • @esri/calcite-components
  • @esri/calcite-components-angular
  • @esri/calcite-components-react
  • @esri/calcite-design-tokens
  • @esri/eslint-plugin-calcite-components

Esri team

ArcGIS Maps SDK for JavaScript
@maxpatiiuk maxpatiiuk added bug Bug reports for broken functionality. Issues should include a reproduction of the bug. 0 - new New issues that need assignment. needs triage Planning workflow - pending design/dev review. labels Dec 22, 2023
@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 ArcGIS Maps SDK for JavaScript Issues logged by ArcGIS SDK for JavaScript team members. labels Dec 22, 2023
@driskull
Copy link
Member

It seems like its the inline-size being set with w-6. here: https://github.com/Esri/calcite-design-system/blob/f199b3cafc40438c32a12cad2aef4d26be4526f6/packages/calcite-components/src/components/button/button.scss#L670C4-L670C22

@geospatialem geospatialem added estimate - 2 Small fix or update, may require updates to tests. p - medium Issue is non core or affecting less that 60% of people using the library needs milestone Planning workflow - pending milestone assignment, has priority and/or estimate. and removed needs triage Planning workflow - pending design/dev review. labels Jan 11, 2024
@brittneytewks brittneytewks removed the needs milestone Planning workflow - pending milestone assignment, has priority and/or estimate. label Apr 3, 2024
@josercarcamo josercarcamo self-assigned this Apr 17, 2024
@josercarcamo josercarcamo mentioned this issue Apr 17, 2024
Merged
@josercarcamo josercarcamo added 2 - in development Issues that are actively being worked on. and removed 0 - new New issues that need assignment. labels Apr 18, 2024
@geospatialem geospatialem mentioned this issue Apr 29, 2024
Open
6 tasks
josercarcamo added a commit that referenced this issue May 1, 2024
@josercarcamo @driskull
fix(calcite-button): Make shadow dom button 100% width (#9145)
dd61b7f 
**Related Issue:** #8490

## Summary
When the host element button is set to "full" the shadow dom button is set to 100% width to span the entire space.

---------

Co-authored-by: Matt Driscoll <[email protected]>
@josercarcamo josercarcamo 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 May 1, 2024
@github-actions GitHub Actions
Copy link
Contributor

github-actions bot commented May 1, 2024

Installed and assigned for verification.

@github-actions github-actions bot assigned geospatialem and DitwanP and unassigned josercarcamo May 1, 2024
@geospatialem geospatialem added the low risk Issues with low risk for consideration in low risk milestones label May 1, 2024
@DitwanP
Copy link
Contributor

DitwanP commented May 13, 2024

🍧 Verified on 2.9.0-next.4

@DitwanP DitwanP closed this as completed May 13, 2024
@DitwanP DitwanP 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 May 13, 2024
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. ArcGIS Maps SDK for JavaScript Issues logged by ArcGIS SDK for JavaScript team members. 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 - 2 Small fix or update, may require updates to tests. impact - p3 - not time sensitive User set priority impact status of p3 - not time sensitive low risk Issues with low risk for consideration in low risk milestones p - medium Issue is non core or affecting less that 60% of people using the library
Projects
None yet
Milestone
2024-05-28 - May Main Release
Development

No branches or pull requests
6 participants
@driskull @geospatialem @maxpatiiuk @DitwanP @brittneytewks @josercarcamo