calcite-design-system icon indicating copy to clipboard operation
calcite-design-system copied to clipboard

[Notice] improve text end padding

Open SkyeSeitz opened this issue 9 months ago • 1 comments

Check existing issues

Description

On medium scale, when the icon prop is populated, there is 16px of block end padding on the text container, which changes to 12px when the icon prop is not populated. On large scale, this is 20px & 16px. On small scale, this is 10px & 8px image

Acceptance Criteria

  1. Remove conditional block end padding that changes the 12px to 16px on medium, 16px 20px on large, and 8px to 10px on small when the icon prop is populated. image

  2. Add conditional padding to change the 12px to 16px on medium, 16px 20px on large, and 8px to 10px on small when no slot or prop is populated at the end of the text container, allowing the start and end padding to be visually balanced. image

Relevant Info

cc @ashetland @adam

Which Component

Notice

Example Use Case

No response

Priority impact

p4 - not time sensitive

Calcite package

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

Esri team

Calcite (design)

SkyeSeitz avatar May 08 '24 22:05 SkyeSeitz

cc @geospatialem, @brittneytewks

github-actions[bot] avatar May 08 '24 22:05 github-actions[bot]