Use CSS Logical Properties, remove dir usage

[caripizza]

Summary
Refactor component styles to use CSS Logical Properties and Values, perhaps via Tailwind v2 plugin

Start using flow-relative CSS values like start/end (This would get rid of 99% of > the use for getElementDir())

Relevant Info

• Background discussion: Bug: Remove setting dir= on components #1831 (comment)
• MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Logical_Properties
• Tailwind plugins research: https://github.com/stevecochrane/tailwindcss-logical, https://github.com/stevecochrane/tailwindcss-logical#flow-relative-margins

Components

• calcite-accordion-item/calcite-accordion-item.tsx
• calcite-action-pad/calcite-action-pad.tsx
• calcite-alert/calcite-alert.tsx
• calcite-avatar/calcite-avatar.tsx
• calcite-button/calcite-button.tsx
• calcite-card/calcite-card.tsx
• calcite-chip/calcite-chip.tsx
• calcite-color-picker/calcite-color-picker.tsx
• calcite-color-picker-hex-input/calcite-color-picker-hex-input.tsx
• calcite-combobox/calcite-combobox.tsx
• calcite-combobox-item/calcite-combobox-item.tsx
• calcite-combobox-item-group/calcite-combobox-item-group.tsx
• calcite-date-picker/calcite-date-picker.tsx
• calcite-date-picker-day/calcite-date-picker-day.tsx
• calcite-date-picker-month/calcite-date-picker-month.tsx
• calcite-date-picker-month-header/calcite-date-picker-month-header.tsx
• calcite-dropdown/calcite-dropdown.tsx
• calcite-dropdown-group/calcite-dropdown-group.tsx
• calcite-dropdown-item/calcite-dropdown-item.tsx
• calcite-fab/calcite-fab.tsx
• calcite-filter/calcite-filter.tsx
• calcite-icon/calcite-icon.tsx
• calcite-input/calcite-input.tsx
• calcite-input-date-picker/calcite-input-date-picker.tsx
• calcite-input-message/calcite-input-message.tsx
• calcite-label/calcite-label.tsx
• calcite-link/calcite-link.tsx
• calcite-modal/calcite-modal.tsx
• calcite-notice/calcite-notice.tsx
• calcite-pagination/calcite-pagination.tsx
• calcite-panel/calcite-panel.tsx
• calcite-pick-list/shared-list-render.tsx
• calcite-pick-list-group/calcite-pick-list-group.tsx
• calcite-popover/calcite-popover.tsx
• calcite-radio-group-item/calcite-radio-group-item.tsx
• calcite-rating/calcite-rating.tsx
• calcite-select/calcite-select.tsx
• calcite-shell-center-row/calcite-shell-center-row.tsx
• calcite-split-button/calcite-split-button.tsx - has props to specify whether icon should flip in RTL contexts
• calcite-stepper-item/calcite-stepper-item.tsx
• calcite-switch/calcite-switch.tsx
• calcite-tab-title/calcite-tab-title.tsx
• calcite-tile-select/calcite-tile-select.tsx
• calcite-tree-item/calcite-tree-item.tsx
• functional/CalciteExpandToggle.tsx

[driskull]

I think we should bump the priority on this @jcfranco @julio8a.

We can proceed with this without upgrading to tailwind2 or using a tailwind plugin I think?

[jcfranco]

Yeah, I think we need to tackle the logical props part before 1.0.0. cc @julio8a @benelan

#2868 is sort of related to this, right?

[benelan]

I agree about tackling logical props before 1.0.0 but I'm not sure the cascading scale thing is related. @jcfranco

[jcfranco]

Gotcha. Never mind then. I was under the impression that logical properties would also work through the cascade, but I can't find any examples.

@caripizza Can this be done with our current version of Tailwind? I see that tailwindcss-logical is compatible w/ 1.2.0+.

[driskull]

In some places, we're already using logical properties without tailwind. https://github.com/Esri/calcite-components/blob/master/src/components/calcite-radio-group-item/calcite-radio-group-item.scss#L81-L107

[jcfranco]

@driskull Thanks, that's good to know. FWIW, I want to determine if we need to split this up into another issue or if we can tackle this one as is.

[caripizza]

Yep I've just been using manual margin-inline styles since they're not built into TW. The plugin could make sense down the road but I'm not sure it's necessary at the moment.

[jcfranco]

Thanks for the info, @caripizza.

In that case, let's create a separate issue to go ahead with the CSS logical properties work and repurpose this as a refactor issue. Does that sound alright? cc @benelan

[eriklharper]

Looks like it will be beneficial for me to convert button and action to use CSS logical properties so that the new snapshot visual tests will pass in support of #3140. I'm not sure if we want to use #2079 (this issue) to track all the components that need converted or not, but I thought I would alert others following this issue that I plan on tackling this for these two components even though there's not a specific issue to address doing this for button and action.

[driskull]

any component using getElementDir() needs to be converted and that utility method removed once all instances are no longer needed.

[driskull]

@benelan @jcfranco can we prioritize this for a sprint?

It would include...

• Replacing CSS with logical css properties instead of getElementDir usage
• Removing use of rtl css utiity

[eriklharper]

Hoo boy that's a lot!

[jcfranco]

@driskull Moved to the upcoming sprint. I can help with this early next sprint. Let me know how you want to divvy it up.

[driskull]

@jcfranco you want to just start from the bottom of the list? I've started from the top.

[github-actions]

Installed and assigned for verification.

[benelan]

This has been installed for two weeks and there have not been any reports of visual regressions or unintended changes. Closing as verified!