RTL - Core followup for RTL changes

[andrew-ronaldson]

Goal
The core team is implementing RTL support and some components may require react followup.

This is a placeholder issue until testing is complete.

Check components:

• About modal #9585
• Accordion
• Action list
• Alert
• Avatar
• Back to top
• Background image
• Badge
• Banner
• Brand
• Breadcrumb - RTL #9587
• Button - RTL support #9589
• Calendar month
• Card
• Checkbox - update example CSS for RTL #9590
• Chip
• Clipboard Copy - RTL support patternfly#5926
• Code block
• Code editor
• Data list - update icon in demo to use RTL modifier class #9591
• Date picker
• Date and time picker
• Description list
• Divider
• Drag and drop
• Drawer - RTL position prop values, example names, resizable drawer #9596
• Dropdown - default position should be switched in right-to-left mode #9594
• Dual list selector
• Empty state
• Expandable section
• File upload
• File upload - multiple
• Form
• Form control
• Form select
• Helper text
• Hint
• Icon - add new prop to add RTL modifier class #9595
• Input group
• Jump links
• Label
• List
• Login page
• Masthead
• Menu - breadcrumb drilldown arrow PR chore: update breadcrumb dropdown item arrow to work in RTL #9603
• Menu toggle
• Modal
• Nav - Horizontal scrolling broken in RTL #9607
• Notification badge
• Notification drawer
• Number input
• Overflow menu
• Page
• Pagination - RTL support #9599
• Panel
• Popover - arrow does not position properly in RTL #9608
• Progress
• Progress stepper
• Radio
• Search input
• Select
• Sidebar
• Simple list
• Skeleton
• Skip to content
• Slider - RTL support #9593
• Spinner
• Switch
• Tabs - RTL #9597
• Text
• Text area
• Text input
• Text input group
• Tile
• Time picker
• Timestamp
• Title
• Toggle group
• Toolbar
• Tooltip
• Tree view
• Truncate
• Wizard #9586

[wise-king-sullyman]

One item that will be needed as part of this: reviewing the components in React and identifying any issues with the final React implementation after pulling in the updated styles from core.

[thatblindgeye]

Just jotting down to keep in mind: DataList and Date Picker examples will have to be checked once/if any update to Popper is implemented to support RTL. DataList has some kebab dropdowns that end up being aligned incorrectly in RTL, DatePicker uses Popover internally which ends up having the arrow positioned incorrectly in RTL.

Note: DatePicker may or may not be a Popper issue; possibly related to #9576

DataList example with a dropdown menu in RTL:

DatePicker in RTL:

[thatblindgeye]

We'll need to double check Progress once patternfly/patternfly#5923 is merged and pulled into React

[mcoker]

@kmcfaul currently, there is a CSS var --pf-v5-global--inverse--multiplier with a value set to 1 or -1 depending on whether you're in an LTR or RTL block via the dir attribute value or using .pf-v5-m-dir-[ltr/rtl]. The CSS property direction should always return "ltr" if you're in an LTR block or "RTL" if in an RTL block. You can get the val using this technique https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties#values_in_javascript

getComputedStyle(element).getPropertyValue("direction")

[srambach]

The dropdowns in the toolbar demo need to be checked once the dropdown menu is fixed up to switch l/r when there isn't room. https://react-staging.patternfly.org/components/toolbar/react-demos/console-log-viewer-toolbar-demo/

[wise-king-sullyman]

All items in this epic have been completed 🎉