@workday/canvas-kit-react 14.1.21 → 14.2.0-0017-next.0

package/pagination/lib/Pagination/Controls.tsx

@@ -11,7 +11,6 @@ import {mergeStyles} from '@workday/canvas-kit-react/layout';
 import {TertiaryButton} from '@workday/canvas-kit-react/button';
 import {system} from '@workday/canvas-tokens-web';
 
-import {useRTL} from './common/utils/useRTL';
 import {PaginationContext} from './usePaginationModel';
 
 export interface ControlButtonProps extends ExtractProps<typeof TertiaryButton, never> {
@@ -28,6 +27,16 @@ export const paginationControlsStencil = createStencil({
   },
 });
 
+const controlButtonStencil = createStencil({
+  base: {
+    '&:dir(rtl)': {
+      '& .wd-icon': {
+        transform: 'scaleX(-1)',
+      },
+    },
+  },
+});
+
 export const PaginationControls = createComponent('div')({
   displayName: 'Pagination.Controls',
   Component(elemProps: PaginationControlsProps, ref, Element) {
@@ -47,8 +56,6 @@ export const JumpToFirstButton = createComponent('button')({
       onClick?.(e);
       model.events.setCurrentPage(model.state.firstPage);
     };
-    const {shouldUseRTL} = useRTL();
-    const icon = shouldUseRTL ? chevron2xRightSmallIcon : chevron2xLeftSmallIcon;
 
     return (
       <TertiaryButton
@@ -56,9 +63,9 @@ export const JumpToFirstButton = createComponent('button')({
         as={Element}
         aria-disabled={isDisabled || undefined}
         size="small"
-        icon={icon}
+        icon={chevron2xLeftSmallIcon}
         onClick={handleClick}
-        {...restProps}
+        {...mergeStyles(restProps, controlButtonStencil())}
       />
     );
   },
@@ -76,17 +83,16 @@ export const StepToPreviousButton = createComponent('button')({
       onClick?.(e);
       model.events.setCurrentPage(model.state.currentPage - 1);
     };
-    const {shouldUseRTL} = useRTL();
-    const icon = shouldUseRTL ? chevronRightSmallIcon : chevronLeftSmallIcon;
+
     return (
       <TertiaryButton
         ref={ref}
         as={Element}
         aria-disabled={isDisabled || undefined}
         size="small"
-        icon={icon}
+        icon={chevronLeftSmallIcon}
         onClick={handleClick}
-        {...restProps}
+        {...mergeStyles(restProps, controlButtonStencil())}
       />
     );
   },
@@ -104,17 +110,16 @@ export const StepToNextButton = createComponent('button')({
       onClick?.(e);
       model.events.setCurrentPage(model.state.currentPage + 1);
     };
-    const {shouldUseRTL} = useRTL();
-    const icon = shouldUseRTL ? chevronLeftSmallIcon : chevronRightSmallIcon;
+
     return (
       <TertiaryButton
         ref={ref}
         as={Element}
         aria-disabled={isDisabled || undefined}
         size="small"
-        icon={icon}
+        icon={chevronRightSmallIcon}
         onClick={handleClick}
-        {...restProps}
+        {...mergeStyles(restProps, controlButtonStencil())}
       />
     );
   },
@@ -132,17 +137,16 @@ export const JumpToLastButton = createComponent('button')({
       onClick?.(e);
       model.events.setCurrentPage(model.state.lastPage);
     };
-    const {shouldUseRTL} = useRTL();
-    const icon = shouldUseRTL ? chevron2xLeftSmallIcon : chevron2xRightSmallIcon;
+
     return (
       <TertiaryButton
         ref={ref}
         as={Element}
         aria-disabled={isDisabled || undefined}
         size="small"
-        icon={icon}
+        icon={chevron2xRightSmallIcon}
         onClick={handleClick}
-        {...restProps}
+        {...mergeStyles(restProps, controlButtonStencil())}
       />
     );
   },

package/testing/lib/ComponentStatesTable.tsx

@@ -28,14 +28,14 @@ export interface ComponentStatesTableProps {
 const Table = styled('table')({
   width: '100%',
   thead: {
-    textAlign: 'left',
-    paddingBottom: 16,
+    textAlign: 'start',
+    paddingBlockEnd: 16,
   },
   'td, th': {
     minWidth: 100,
-    paddingBottom: 16,
-    paddingRight: 16,
-    textAlign: 'left',
+    paddingBlockEnd: 16,
+    paddingInlineEnd: 16,
+    textAlign: 'start',
   },
 });