Audit components for consistent border-box box-sizing · Esri/calcite-design-system#11421

(2 comments) (1 reaction) (1 assignee)TypeScript (88 forks)auto 404

3 - in developmentestimate - 3good first issuep - lowrefactor

Repository metrics

monday.com sync: #18048689262

Some components do not have box-sizing: border-box set and could produce inconsistent layouts.

Consistent box-sizing and more predictable layout.

all of the components!

From https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing#:~:text=Note%3A%20It,is%20sometimes%20desirable:

Note: It is often useful to set box-sizing to border-box to lay out elements. This makes dealing with the sizes of elements much easier, and generally eliminates a number of pitfalls you can stumble on while laying out your content. On the other hand, when using position: relative or position: absolute, use of box-sizing: content-box allows the positioning values to be relative to the content, and independent of changes to border and padding sizes, which is sometimes desirable.
https://www.paulirish.com/2012/box-sizing-border-box-ftw/

Research direction: Audit all components in the codebase to find those without 'box sizing: border box' and add it to their CSS styles.
Tech stack: typescriptcss
Domain: frontend
Issue type: Refactor
Difficulty: 2
Estimated time: Half day
Activity status: Active
Clarity: Clear
Prerequisites: CSS
Newbie friendliness: 80