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.

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

[block-section] Make gap around header uniform when outline offset is applied. #11175

Open
2 of 6 tasks
Elijbet opened this issue Dec 30, 2024 · 0 comments
Open
2 of 6 tasks
Labels
0 - new New issues that need assignment. bug Bug reports for broken functionality. Issues should include a reproduction of the bug. Calcite (dev) Issues logged by Calcite developers. calcite-components Issues specific to the @esri/calcite-components package. design Issues that need design consultation prior to development. impact - p3 - not time sensitive User set priority impact status of p3 - not time sensitive needs triage Planning workflow - pending design/dev review.

Comments

@Elijbet
Copy link
Contributor

Elijbet commented Dec 30, 2024

Check existing issues

Actual Behavior

When --calcite-block-section-background-color token is applied, it looks like the background doesn't accompany the same area as the focus.
Screenshot 2024-12-30 at 11 46 58 AM
When the offset is removed, this is the result:
Screenshot 2024-12-30 at 1 06 46 PM

The way it offsets, it hugs vertically, but not horizontally.
We need to address how the offset hugs the heading.
I think the offset needs to stay but designed so that the white gap is uniform around. This way, it doesn't look like a mistake.

Expected Behavior

Outline is offset uniformly on the heading.

Reproduction Sample

https://codepen.io/elijbet/pen/mybBWqJ

Reproduction Steps

Click on the heading and observe the outline offset.

Reproduction Version

2.13.2

Relevant Info

No response

Regression?

No response

Priority impact

impact - p3 - not time sensitive

Impact

No response

Calcite package

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

Esri team

Calcite (dev)

@Elijbet Elijbet added bug Bug reports for broken functionality. Issues should include a reproduction of the bug. design Issues that need design consultation prior to development. 0 - new New issues that need assignment. needs triage Planning workflow - pending design/dev review. labels Dec 30, 2024
@github-actions github-actions bot added Calcite (dev) Issues logged by Calcite developers. 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 Dec 30, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
0 - new New issues that need assignment. bug Bug reports for broken functionality. Issues should include a reproduction of the bug. Calcite (dev) Issues logged by Calcite developers. calcite-components Issues specific to the @esri/calcite-components package. design Issues that need design consultation prior to development. impact - p3 - not time sensitive User set priority impact status of p3 - not time sensitive needs triage Planning workflow - pending design/dev review.
Projects
None yet
Development

No branches or pull requests

1 participant