wip: fix incorrect date/time order in rtl (pt 2) #7423

yihuiliao · 2024-11-21T19:15:24Z

Close #4711

Need to double check that nothing broke in #6562 with these changes.

✅ Pull Request Checklist:

Included link to corresponding React Spectrum GitHub Issue.
Added/updated unit tests and storybook for this change (for new code or code which already has tests).
Filled out test instructions.
Updated documentation (if it already exists for this component).
Looked at the Accessibility Practices for this feature - Aria Practices

📝 Test Instructions:

🧢 Your Project:

rspbot · 2024-11-21T19:25:42Z

Build successful! 🎉

sadeghbarati · 2024-12-02T06:41:49Z

Hey, Thanks for working on this PR

Is this also going to fix keyboard focus management on RTL too?

For example DateField component in the storybook link, if you pick Farsi locale, in order to focus DateSegments with arrow key you need to do it opposite direction to focus next date segment

DateField with Farsi locale:
- yyyy/mm/dd (روز/ماه/سال) format is right ✅
- focus management with arrow keys is not right ❌
DatePicker and DateRangePicker with Farsi locale:
- dd/mm/yyyy (سال/ماه/روز) format is not right ❌
- focus management with arrow keys is right ✅

yihuiliao · 2024-12-02T16:05:28Z

@sadeghbarati Yes, the plan is to also correct the keyboard navigation for RTL as well. The PR is still in the early stages so there's a lot that has yet to be implemented.

rspbot · 2024-12-04T19:00:48Z

Build successful! 🎉

rspbot · 2024-12-06T16:34:29Z

Build successful! 🎉

rspbot · 2024-12-20T21:46:31Z

Build successful! 🎉

rspbot · 2024-12-20T21:46:32Z

## API Changes

@react-aria/utils

/@react-aria/utils:useEnterAnimation

-useEnterAnimation {
-  ref: RefObject<HTMLElement | null>
-  isReady: boolean
-  returnVal: undefined
-}

/@react-aria/utils:useExitAnimation

-useExitAnimation {
-  ref: RefObject<HTMLElement | null>
-  isOpen: boolean
-  returnVal: undefined
-}

@react-spectrum/s2

/@react-spectrum/s2:ActionBar

-ActionBar {
-  children: ReactNode
-  isEmphasized?: boolean
-  onClearSelection?: () => void
-  scrollRef?: RefObject<HTMLElement | null>
-  selectedItemCount?: number | 'all'
-  slot?: string | null
-}

/@react-spectrum/s2:ActionBarContext

-ActionBarContext {
-  UNTYPED
-}

/@react-spectrum/s2:ActionButtonGroup

 ActionButtonGroup {
   UNSAFE_className?: string
   UNSAFE_style?: CSSProperties
-  aria-describedby?: string
-  aria-details?: string
-  aria-label?: string
-  aria-labelledby?: string
   children: ReactNode
   density?: 'compact' | 'regular' = "regular"
   isDisabled?: boolean
   isJustified?: boolean
   orientation?: 'horizontal' | 'vertical' = 'horizontal'
   size?: 'XS' | 'S' | 'M' | 'L' | 'XL' = "M"
   slot?: string | null
   staticColor?: 'white' | 'black' | 'auto'
   styles?: StylesPropWithHeight
 }

/@react-spectrum/s2:Button

 Button {
   UNSAFE_className?: string
   UNSAFE_style?: CSSProperties
   aria-controls?: string
   aria-describedby?: string
   aria-details?: string
   aria-expanded?: boolean | 'true' | 'false'
   aria-haspopup?: boolean | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog' | 'true' | 'false'
   aria-label?: string
   aria-labelledby?: string
   aria-pressed?: boolean | 'true' | 'false' | 'mixed'
   autoFocus?: boolean
   children?: ReactNode
   excludeFromTabOrder?: boolean
   fillStyle?: 'fill' | 'outline' = 'fill'
   form?: string
   formAction?: string
   formEncType?: string
   formMethod?: string
   formNoValidate?: boolean
   formTarget?: string
   id?: string
   isDisabled?: boolean
   isPending?: boolean
   name?: string
   onBlur?: (FocusEvent<Target>) => void
   onFocus?: (FocusEvent<Target>) => void
   onFocusChange?: (boolean) => void
   onKeyDown?: (KeyboardEvent) => void
   onKeyUp?: (KeyboardEvent) => void
   onPress?: (PressEvent) => void
   onPressChange?: (boolean) => void
   onPressEnd?: (PressEvent) => void
   onPressStart?: (PressEvent) => void
   onPressUp?: (PressEvent) => void
   preventFocusOnPress?: boolean
   size?: 'S' | 'M' | 'L' | 'XL' = 'M'
   slot?: string | null
   staticColor?: 'white' | 'black' | 'auto'
   styles?: StylesProp
   type?: 'button' | 'submit' | 'reset' = 'button'
   value?: string
-  variant?: 'primary' | 'secondary' | 'accent' | 'negative' | 'premium' | 'genai' = 'primary'
+  variant?: 'primary' | 'secondary' | 'accent' | 'negative' = 'primary'
 }

/@react-spectrum/s2:LinkButton

 LinkButton {
   UNSAFE_className?: string
   UNSAFE_style?: CSSProperties
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   autoFocus?: boolean
   children?: ReactNode
   download?: boolean | string
   fillStyle?: 'fill' | 'outline' = 'fill'
   href?: Href
   hrefLang?: string
   isDisabled?: boolean
   onBlur?: (FocusEvent<Target>) => void
   onFocus?: (FocusEvent<Target>) => void
   onFocusChange?: (boolean) => void
   onHoverChange?: (boolean) => void
   onHoverEnd?: (HoverEvent) => void
   onHoverStart?: (HoverEvent) => void
   onKeyDown?: (KeyboardEvent) => void
   onKeyUp?: (KeyboardEvent) => void
   onPress?: (PressEvent) => void
   onPressChange?: (boolean) => void
   onPressEnd?: (PressEvent) => void
   onPressStart?: (PressEvent) => void
   onPressUp?: (PressEvent) => void
   ping?: string
   referrerPolicy?: HTMLAttributeReferrerPolicy
   rel?: string
   routerOptions?: RouterOptions
   size?: 'S' | 'M' | 'L' | 'XL' = 'M'
   slot?: string | null
   staticColor?: 'white' | 'black' | 'auto'
   styles?: StylesProp
   target?: HTMLAttributeAnchorTarget
-  variant?: 'primary' | 'secondary' | 'accent' | 'negative' | 'premium' | 'genai' = 'primary'
+  variant?: 'primary' | 'secondary' | 'accent' | 'negative' = 'primary'
 }

/@react-spectrum/s2:CardView

 CardView <T extends {}> {
   UNSAFE_className?: string
   UNSAFE_style?: CSSProperties
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   children?: ReactNode | (T) => ReactNode
   defaultSelectedKeys?: 'all' | Iterable<Key>
   density?: 'compact' | 'regular' | 'spacious' = 'regular'
   dependencies?: Array<any>
   disabledBehavior?: DisabledBehavior
   disabledKeys?: Iterable<Key>
   disallowEmptySelection?: boolean
   dragAndDropHooks?: DragAndDropHooks
   id?: string
   items?: Iterable<T>
   layout?: 'grid' | 'waterfall' = 'grid'
   loadingState?: LoadingState
   onAction?: (Key) => void
   onLoadMore?: () => void
   onScroll?: (UIEvent<Element>) => void
   onSelectionChange?: (Selection) => void
-  renderActionBar?: ('all' | Set<Key>) => ReactElement
   renderEmptyState?: (GridListRenderProps) => ReactNode
   selectedKeys?: 'all' | Iterable<Key>
   selectionMode?: SelectionMode
   selectionStyle?: 'checkbox' | 'highlight' = 'checkbox'
   slot?: string | null
   styles?: StylesPropWithHeight
   variant?: 'primary' | 'secondary' | 'tertiary' | 'quiet' = 'primary'
 }

/@react-spectrum/s2:CloseButton

 CloseButton {
   UNSAFE_className?: string
   UNSAFE_style?: CSSProperties
   isDisabled?: boolean
-  onPress?: (PressEvent) => void
   size?: 'S' | 'M' | 'L' | 'XL' = 'M'
   staticColor?: 'white' | 'black' | 'auto'
   styles?: StylesProp
 }

/@react-spectrum/s2:TableView

 TableView {
   UNSAFE_className?: string
   UNSAFE_style?: CSSProperties
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   children?: ReactNode
   defaultSelectedKeys?: 'all' | Iterable<Key>
   density?: 'compact' | 'spacious' | 'regular' = 'regular'
   disabledKeys?: Iterable<Key>
   disallowEmptySelection?: boolean
   isQuiet?: boolean
   loadingState?: LoadingState
   onAction?: (Key) => void
   onLoadMore?: () => any
   onResize?: (Map<Key, ColumnSize>) => void
   onResizeEnd?: (Map<Key, ColumnSize>) => void
   onResizeStart?: (Map<Key, ColumnSize>) => void
   onSelectionChange?: (Selection) => void
   onSortChange?: (SortDescriptor) => any
   overflowMode?: 'wrap' | 'truncate' = 'truncate'
-  renderActionBar?: ('all' | Set<Key>) => ReactElement
   selectedKeys?: 'all' | Iterable<Key>
   selectionMode?: SelectionMode
   slot?: string | null
   sortDescriptor?: SortDescriptor
 }

/@react-spectrum/s2:ActionBarProps

-ActionBarProps {
-  children: ReactNode
-  isEmphasized?: boolean
-  onClearSelection?: () => void
-  scrollRef?: RefObject<HTMLElement | null>
-  selectedItemCount?: number | 'all'
-  slot?: string | null
-}

/@react-spectrum/s2:ActionButtonGroupProps

 ActionButtonGroupProps {
   UNSAFE_className?: string
   UNSAFE_style?: CSSProperties
-  aria-describedby?: string
-  aria-details?: string
-  aria-label?: string
-  aria-labelledby?: string
   children: ReactNode
   density?: 'compact' | 'regular' = "regular"
   isDisabled?: boolean
   isJustified?: boolean
   orientation?: 'horizontal' | 'vertical' = 'horizontal'
   size?: 'XS' | 'S' | 'M' | 'L' | 'XL' = "M"
   slot?: string | null
   staticColor?: 'white' | 'black' | 'auto'
   styles?: StylesPropWithHeight
 }

/@react-spectrum/s2:ButtonProps

 ButtonProps {
   UNSAFE_className?: string
   UNSAFE_style?: CSSProperties
   aria-controls?: string
   aria-describedby?: string
   aria-details?: string
   aria-expanded?: boolean | 'true' | 'false'
   aria-haspopup?: boolean | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog' | 'true' | 'false'
   aria-label?: string
   aria-labelledby?: string
   aria-pressed?: boolean | 'true' | 'false' | 'mixed'
   autoFocus?: boolean
   children?: ReactNode
   excludeFromTabOrder?: boolean
   fillStyle?: 'fill' | 'outline' = 'fill'
   form?: string
   formAction?: string
   formEncType?: string
   formMethod?: string
   formNoValidate?: boolean
   formTarget?: string
   id?: string
   isDisabled?: boolean
   isPending?: boolean
   name?: string
   onBlur?: (FocusEvent<Target>) => void
   onFocus?: (FocusEvent<Target>) => void
   onFocusChange?: (boolean) => void
   onKeyDown?: (KeyboardEvent) => void
   onKeyUp?: (KeyboardEvent) => void
   onPress?: (PressEvent) => void
   onPressChange?: (boolean) => void
   onPressEnd?: (PressEvent) => void
   onPressStart?: (PressEvent) => void
   onPressUp?: (PressEvent) => void
   preventFocusOnPress?: boolean
   size?: 'S' | 'M' | 'L' | 'XL' = 'M'
   slot?: string | null
   staticColor?: 'white' | 'black' | 'auto'
   styles?: StylesProp
   type?: 'button' | 'submit' | 'reset' = 'button'
   value?: string
-  variant?: 'primary' | 'secondary' | 'accent' | 'negative' | 'premium' | 'genai' = 'primary'
+  variant?: 'primary' | 'secondary' | 'accent' | 'negative' = 'primary'
 }

/@react-spectrum/s2:LinkButtonProps

 LinkButtonProps {
   UNSAFE_className?: string
   UNSAFE_style?: CSSProperties
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   autoFocus?: boolean
   children?: ReactNode
   download?: boolean | string
   fillStyle?: 'fill' | 'outline' = 'fill'
   href?: Href
   hrefLang?: string
   isDisabled?: boolean
   onBlur?: (FocusEvent<Target>) => void
   onFocus?: (FocusEvent<Target>) => void
   onFocusChange?: (boolean) => void
   onHoverChange?: (boolean) => void
   onHoverEnd?: (HoverEvent) => void
   onHoverStart?: (HoverEvent) => void
   onKeyDown?: (KeyboardEvent) => void
   onKeyUp?: (KeyboardEvent) => void
   onPress?: (PressEvent) => void
   onPressChange?: (boolean) => void
   onPressEnd?: (PressEvent) => void
   onPressStart?: (PressEvent) => void
   onPressUp?: (PressEvent) => void
   ping?: string
   referrerPolicy?: HTMLAttributeReferrerPolicy
   rel?: string
   routerOptions?: RouterOptions
   size?: 'S' | 'M' | 'L' | 'XL' = 'M'
   slot?: string | null
   staticColor?: 'white' | 'black' | 'auto'
   styles?: StylesProp
   target?: HTMLAttributeAnchorTarget
-  variant?: 'primary' | 'secondary' | 'accent' | 'negative' | 'premium' | 'genai' = 'primary'
+  variant?: 'primary' | 'secondary' | 'accent' | 'negative' = 'primary'
 }

/@react-spectrum/s2:CardViewProps

 CardViewProps <T> {
   UNSAFE_className?: string
   UNSAFE_style?: CSSProperties
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   children?: ReactNode | (T) => ReactNode
   defaultSelectedKeys?: 'all' | Iterable<Key>
   density?: 'compact' | 'regular' | 'spacious' = 'regular'
   dependencies?: Array<any>
   disabledBehavior?: DisabledBehavior
   disabledKeys?: Iterable<Key>
   disallowEmptySelection?: boolean
   dragAndDropHooks?: DragAndDropHooks
   id?: string
   items?: Iterable<T>
   layout?: 'grid' | 'waterfall' = 'grid'
   loadingState?: LoadingState
   onAction?: (Key) => void
   onLoadMore?: () => void
   onScroll?: (UIEvent<Element>) => void
   onSelectionChange?: (Selection) => void
-  renderActionBar?: ('all' | Set<Key>) => ReactElement
   renderEmptyState?: (GridListRenderProps) => ReactNode
   selectedKeys?: 'all' | Iterable<Key>
   selectionMode?: SelectionMode
   selectionStyle?: 'checkbox' | 'highlight' = 'checkbox'
   slot?: string | null
   styles?: StylesPropWithHeight
   variant?: 'primary' | 'secondary' | 'tertiary' | 'quiet' = 'primary'
 }

/@react-spectrum/s2:CloseButtonProps

 CloseButtonProps {
   UNSAFE_className?: string
   UNSAFE_style?: CSSProperties
   isDisabled?: boolean
-  onPress?: (PressEvent) => void
   size?: 'S' | 'M' | 'L' | 'XL' = 'M'
   staticColor?: 'white' | 'black' | 'auto'
   styles?: StylesProp
 }

/@react-spectrum/s2:TableViewProps

 TableViewProps {
   UNSAFE_className?: string
   UNSAFE_style?: CSSProperties
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   children?: ReactNode
   defaultSelectedKeys?: 'all' | Iterable<Key>
   density?: 'compact' | 'spacious' | 'regular' = 'regular'
   disabledKeys?: Iterable<Key>
   disallowEmptySelection?: boolean
   isQuiet?: boolean
   loadingState?: LoadingState
   onAction?: (Key) => void
   onLoadMore?: () => any
   onResize?: (Map<Key, ColumnSize>) => void
   onResizeEnd?: (Map<Key, ColumnSize>) => void
   onResizeStart?: (Map<Key, ColumnSize>) => void
   onSelectionChange?: (Selection) => void
   onSortChange?: (SortDescriptor) => any
   overflowMode?: 'wrap' | 'truncate' = 'truncate'
-  renderActionBar?: ('all' | Set<Key>) => ReactElement
   selectedKeys?: 'all' | Iterable<Key>
   selectionMode?: SelectionMode
   slot?: string | null
   sortDescriptor?: SortDescriptor
 }

yihuiliao added 2 commits November 21, 2024 14:09

bdo on timefield, reverse segments on timefield in datefield

bbe6191

fix lint

0716ad5

adobe deleted a comment from rspbot Nov 21, 2024

make things inline

76b8d0e

use unicode character to wrap segments

47e2af5

yihuiliao added 3 commits December 4, 2024 14:11

fix test

ef0b637

append unicode to text in hooks, update rac

b3e2f70

Merge branch 'main' into bidi-override

7b77f1e

yihuiliao added 5 commits December 17, 2024 12:53

add comment

fd5a902

Merge branch 'main' into bidi-override

d9b69a8

skip failing test for now

a9f732e

update keyboard nav

8df5ad6

update logic of how unicode is applied

679e355

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

wip: fix incorrect date/time order in rtl (pt 2) #7423

wip: fix incorrect date/time order in rtl (pt 2) #7423

yihuiliao commented Nov 21, 2024 •

edited

Loading

rspbot commented Nov 21, 2024

sadeghbarati commented Dec 2, 2024 •

edited

Loading

yihuiliao commented Dec 2, 2024

rspbot commented Dec 4, 2024

rspbot commented Dec 6, 2024

rspbot commented Dec 20, 2024

rspbot commented Dec 20, 2024

wip: fix incorrect date/time order in rtl (pt 2) #7423

Are you sure you want to change the base?

wip: fix incorrect date/time order in rtl (pt 2) #7423

Conversation

yihuiliao commented Nov 21, 2024 • edited Loading

✅ Pull Request Checklist:

📝 Test Instructions:

🧢 Your Project:

rspbot commented Nov 21, 2024

sadeghbarati commented Dec 2, 2024 • edited Loading

yihuiliao commented Dec 2, 2024

rspbot commented Dec 4, 2024

rspbot commented Dec 6, 2024

rspbot commented Dec 20, 2024

rspbot commented Dec 20, 2024

@react-aria/utils

/@react-aria/utils:useEnterAnimation

/@react-aria/utils:useExitAnimation

@react-spectrum/s2

/@react-spectrum/s2:ActionBar

/@react-spectrum/s2:ActionBarContext

/@react-spectrum/s2:ActionButtonGroup

/@react-spectrum/s2:Button

/@react-spectrum/s2:LinkButton

/@react-spectrum/s2:CardView

/@react-spectrum/s2:CloseButton

/@react-spectrum/s2:TableView

/@react-spectrum/s2:ActionBarProps

/@react-spectrum/s2:ActionButtonGroupProps

/@react-spectrum/s2:ButtonProps

/@react-spectrum/s2:LinkButtonProps

/@react-spectrum/s2:CardViewProps

/@react-spectrum/s2:CloseButtonProps

/@react-spectrum/s2:TableViewProps

yihuiliao commented Nov 21, 2024 •

edited

Loading

sadeghbarati commented Dec 2, 2024 •

edited

Loading