List Item - some elements are misaligned

[ashetland]

Check existing issues

• I have checked for existing issues to avoid duplicates

Actual Behavior

In the new v3 List, the drag handle, selection icon, expand chevron, and action-start slot are misaligned when compared to the main item content.

Expected Behavior

Elements to the left of and inside the bordered area should align to each other. Possible solution is to update the bordered-area to use box-sizing: border-box;

Reproduction Sample

https://codepen.io/ashetland/pen/GgKjjQb

Reproduction Steps

Compare the position of icons in the aforementioned elements vs those in the content area.

Reproduction Version

v3.0.0-next.57

Relevant Info

cc @eriklharper

Regression?

No response

Priority impact

impact - p2 - want for an upcoming milestone

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 (design)

[ashetland]

cc @ellenupp

[ashetland]

@geospatialem This is a follow-up to #7100.

[driskull]

To accommodate the new border design, everything to the left of the bordered content area needs 1px of bottom space added to align correctly.

Can the area with the border use border-box box sizing to address this?

[ashetland]

Thanks @driskull! Updated the issue description.