[Block Section] Text hierarchy and spacing

Esri / calcite-design-system

A monorepo containing the packages for Esri's Calcite Design System

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

Other

289 stars 76 forks source link

[Block Section] Text hierarchy and spacing #6905

Closed asangma closed 4 months ago

asangma commented 1 year ago

Description

BlockSection heading is very similar to Block's heading.

Suggest using normal font weight for BlockSection headings.

Also, it seems that the padding in the content area of Block doesn't match the inline padding used in most other areas. Right now, it's at 0.625rem whereas most other places 0.75rem is used. Suggest updating to 0.75rem for better alignment.

@SkyeSeitz would appreciate your feedback.

Acceptance Criteria

Better text hierarchy and padding alignment.

Relevant Info

No response

Which Component

Block and BlockSection

Example Use Case

Using Block and BlockSection together.

Priority impact

p4 - not time sensitive

Esri team

N/A

Final design recommendations

See comment

SkyeSeitz commented 1 year ago

I agree, I think better text hierarchy is something we could take a look at 👍🏽

Funnily enough, the Block content section padding in Figma lines up Block text and Block Section text at 0.75rem/12px already. So either Figma missed this change or we have just been slightly misaligned since the Figma component was built- thanks for pointing out, Alan! This fix would also nicely center align Block's expand chevron and Block Section's Switch.

asangma commented 1 year ago

Thanks @SkyeSeitz.

@geospatialem This isn't urgent but the UtilityNetwork widget would be much happier if this change gets in soon. :)

ashetland commented 12 months ago

Design notes for this issue (Figma file available as well):

Block

Update --calcite-block-padding default to 0.75rem

Bock Section

Update idle font weight to regular
Font color should be text.1 while hovering/focused and while open

CleanShot 2024-05-14 at 07 46 14@2x

github-actions[bot] commented 12 months ago

cc @geospatialem, @brittneytewks

ashetland commented 11 months ago

Could be coupled with #7146

geospatialem commented 5 months ago

Opened https://github.com/Esri/calcite-design-system/issues/9323 to address block, the above has been re-scoped, targeted for June's release to address block-section.

github-actions[bot] commented 5 months ago

Installed and assigned for verification.

github-actions[bot] commented 4 months ago

Installed and assigned for verification.

DitwanP commented 4 months ago

🍡 Verified locally on dev