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

[Block] Icon in slot="icon" vertically misaligned #6627

Closed
macandcheese opened this issue Mar 22, 2023 · 2 comments
Closed

[Block] Icon in slot="icon" vertically misaligned #6627

macandcheese opened this issue Mar 22, 2023 · 2 comments
Assignees
@geospatialem
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 (design) Issues logged by Calcite designers. p4 - not time sensitive User set priority status of p4 - not time sensitive
Milestone
2023 May Priorities

Comments

@macandcheese
Copy link
Contributor

macandcheese commented Mar 22, 2023 •
edited

Actual Behavior

There is a misalignment in Block when icon is slotted into the "icon" slot. This isn't the case in Figma so opening as bug. Happens with or without other slotted content, open / not open, and with / without description.

Capture-2023-03-21-165533

Capture-2023-03-21-165552

Capture-2023-03-21-170557

Expected Behavior

I'd expect the icon to be vertically centered in the block header component.

Reproduction Sample

https://developers.arcgis.com/calcite-design-system/components/block/

Reproduction Steps

  1. Open doc site link
  2. See visual misalignment
  3. Panic

Reproduction Version

1.1.0

Relevant Info

No response

Regression?

No response

Priority impact

p4 - not time sensitive

Impact

No response

Esri team

Calcite (design)
@macandcheese macandcheese 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 Mar 22, 2023
@github-actions github-actions bot added p4 - not time sensitive User set priority status of p4 - not time sensitive Calcite (design) Issues logged by Calcite designers. labels Mar 22, 2023
@macandcheese macandcheese changed the title [Block] Icon in slot="icon" misaligned [Block] Icon in slot="icon" vertically misaligned Mar 22, 2023
@macandcheese macandcheese added 2 - in development Issues that are actively being worked on. and removed 0 - new New issues that need assignment. needs triage Planning workflow - pending design/dev review. labels Apr 28, 2023
@macandcheese macandcheese added this to the 2023 May Priorities milestone Apr 28, 2023
@macandcheese macandcheese mentioned this issue Apr 28, 2023
Merged
@macandcheese macandcheese self-assigned this Apr 28, 2023
macandcheese added a commit that referenced this issue Apr 28, 2023
@macandcheese
fix(block): Corrects alignment of slotted icon (#6883)
8fec45e 
**Related Issue:** #6627 

## Summary
Adjust slotted icon container css to better align the icon container.
Small misalignments due to icon may still occur but this should be
better than before. Adds a handful of test-only stories to capture more
Block states, and fixes some instance of an outdated prop used in demo
pages.

cc @ashetland @SkyeSeitz - I think this was already correct in Figma,
but FYI as this will likely require Chromatic approval.
cc @asangma @mitc7862 - FYI

Before:
<img width="800" alt="Screen Shot 2023-04-28 at 10 29 41 AM"
src="https://user-images.githubusercontent.com/4733155/235215454-66f2c11e-5e5b-44cb-b3ca-194137e6d58b.png">


After:
<img width="800" alt="Screen Shot 2023-04-28 at 10 29 32 AM"
src="https://user-images.githubusercontent.com/4733155/235215463-d2ff17f1-c309-4cef-ac12-ddaab1f4f33c.png">
@macandcheese macandcheese 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 Apr 28, 2023
@github-actions
Copy link
Contributor

Installed and assigned for verification.

@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 May 4, 2023
@geospatialem
Copy link
Member

Verified on 1.4.0-next.7

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

@geospatialem geospatialem

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 (design) Issues logged by Calcite designers. p4 - not time sensitive User set priority status of p4 - not time sensitive
Projects
None yet
Milestone
2023 May Priorities
Development

No branches or pull requests
2 participants
@macandcheese @geospatialem