Item alignment for calcite-tree-items

[abp6318]

Check existing issues

• I have checked for existing issues to avoid duplicates

Description

Context:

• https://devtopia.esri.com/dc/hub/issues/2328
• https://github.com/ArcGIS/opendata-ui/pull/12651
• This story is a part of a bugs and accessibility epic

The Hub Discovery team is hoping to make our facets on the new search page more consistent and legible. Some facet labels are longer than others and words wrap to the next line (sometimes even twice). We are looking to consistently format our facets like so:

This is possible for our facet-options in list form, but not for tree facet items. I was able to create the ideal result in Chrome's inspect tool and locate the CSS class we'd like to be able to flexibly alter:

question.about.overwriting.calcite.css.mov

Other ideas already investigated include:

• altering the shadow-dom
• rendering the tree differently
• using ::part
• using more specified selectors

Here is the class we are hoping to alter:

calcite-design-system/packages/calcite-components/src/components/tree-item/tree-item.scss

Line 135 in aedd4f3

@apply pointer-events-none flex items-center;

Acceptance Criteria

• Provide a property or CSS variable for calcite tree items to set item alignment for facet labels and checkboxes rather than always using items-center

Relevant Info

No response

Which Component

Tree Item (

calcite-design-system/packages/calcite-components/src/components/tree-item/tree-item.scss

Line 135 in aedd4f3

@apply pointer-events-none flex items-center;

)

Example Use Case

No response

Priority impact

p2 - want for current milestone

Calcite package

• @esri/calcite-components
• @esri/calcite-components-react
• @esri/eslint-plugin-calcite-components

Esri team

ArcGIS Hub

[paulcpederson]

Want to add a plus one to the item spacing considerations here. Currently tree items have a minimum height, but no padding. So if the item title is short, there is a good amount of space between items, but for longer titles that wrap, they run together. Makes it very difficult to read and understand. I think using padding rather than min height would be better (ie. allow the item to grow and still have space around it.

Here is a codepen demonstrating the use case:

https://codepen.io/paulcp/pen/abxERBB?editors=1000

[ashetland]

Using padding instead of minHeights will be completed in issue #7096