fix(react-drawer): rename values of position prop from left/right to …

…start/end (microsoft#28905)

change/@fluentui-react-drawer-7b43baa1-25d5-44e7-8c7d-a8f4a3e8ea58.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "fix: rename values of position prop from left/right to start/end",
+  "packageName": "@fluentui/react-drawer",
+  "email": "marcosvmmoura@gmail.com",
+  "dependentChangeType": "patch"
+}

packages/react-components/react-drawer/docs/Spec.md

@@ -76,7 +76,7 @@ By default, the `overlay` acts as a modal, rendering an overlay scrim behind the
 | Property     | Values                                     | Default   | Description                                             |
 | ------------ | ------------------------------------------ | --------- | ------------------------------------------------------- |
 | type         | `overlay`, `inline`                        | `overlay` | Set the [type](#type) of Drawer                         |
-| position     | `left`, `right`                            | `left`    | Set the position of the Drawer                          |
+| position     | `start`, `end`                             | `start`   | Set the position of the Drawer                          |
 | size         | `small`, `medium`, `large`, `full`, number | `small`   | The drawer width [size](#size)                          |
 | modal        | boolean                                    | `true`    | Set the visibility of the `overlay` scrim               |
 | open         | boolean                                    | `false`   | Define the Drawer visibility                            |

packages/react-components/react-drawer/src/components/Drawer/Drawer.cy.tsx

@@ -31,7 +31,7 @@ describe('Drawer', () => {
 
       return (
         <>
-          <ControlledDrawer position="right" open={open} />
+          <ControlledDrawer position="end" open={open} />
           <button id="button" onClick={() => setOpen(true)}>
             Open
           </button>

packages/react-components/react-drawer/src/components/DrawerInline/useDrawerInlineStyles.styles.ts

@@ -18,10 +18,10 @@ const useStyles = makeStyles({
   },
 
   /* Separator */
-  separatorLeft: {
+  separatorStart: {
     ...shorthands.borderRight('1px', 'solid', tokens.colorNeutralBackground3),
   },
-  separatorRight: {
+  separatorEnd: {
     ...shorthands.borderLeft('1px', 'solid', tokens.colorNeutralBackground3),
   },
 });
@@ -38,8 +38,8 @@ export const useDrawerInlineStyles_unstable = (state: DrawerInlineState): Drawer
       return undefined;
     }
 
-    return state.position === 'left' ? styles.separatorLeft : styles.separatorRight;
-  }, [state.position, state.separator, styles.separatorRight, styles.separatorLeft]);
+    return state.position === 'start' ? styles.separatorStart : styles.separatorEnd;
+  }, [state.position, state.separator, styles.separatorEnd, styles.separatorStart]);
 
   state.root.className = mergeClasses(
     drawerInlineClassNames.root,

packages/react-components/react-drawer/src/util/DrawerBase.types.ts

@@ -2,9 +2,9 @@ export type DrawerBaseProps = {
   /**
    * Position of the drawer.
    *
-   * @default 'left'
+   * @default 'start'
    */
-  position?: 'left' | 'right';
+  position?: 'start' | 'end';
 
   /**
    * Size of the drawer.

packages/react-components/react-drawer/src/util/getDefaultDrawerProps.ts

@@ -1,7 +1,7 @@
 import { DrawerBaseProps } from './DrawerBase.types';
 
 export function getDefaultDrawerProps(props: DrawerBaseProps) {
-  const { open = false, defaultOpen = false, size = 'small', position = 'left' } = props;
+  const { open = false, defaultOpen = false, size = 'small', position = 'start' } = props;
 
   return {
     size,

packages/react-components/react-drawer/src/util/useDrawerBaseStyles.styles.ts

@@ -22,11 +22,11 @@ export const useDrawerBaseStyles = makeStyles({
   },
 
   /* Positioning */
-  left: {
+  start: {
     left: 0,
     right: 'auto',
   },
-  right: {
+  end: {
     right: 0,
     left: 'auto',
   },

packages/react-components/react-drawer/stories/Drawer/DrawerCustomSize.stories.tsx

@@ -28,7 +28,7 @@ export const CustomSize = () => {
     <div>
       <DrawerOverlay
         open={open}
-        position="right"
+        position="end"
         onOpenChange={(_, state) => setOpen(state.open)}
         style={{ width: `${customSize}px` }}
       >

packages/react-components/react-drawer/stories/Drawer/DrawerInline.stories.tsx

@@ -61,7 +61,7 @@ export const Inline = () => {
         </Button>
       </div>
 
-      <DrawerInline position="right" open={rightOpen}>
+      <DrawerInline position="end" open={rightOpen}>
         <DrawerHeader>
           <DrawerHeaderTitle
             action={

packages/react-components/react-drawer/stories/Drawer/DrawerPosition.stories.tsx

@@ -16,15 +16,15 @@ export const Position = () => {
   const styles = useStyles();
 
   const [isOpen, setIsOpen] = React.useState(false);
-  const [position, setPosition] = React.useState<DrawerProps['position']>('left');
+  const [position, setPosition] = React.useState<DrawerProps['position']>('start');
 
   const onClickLeftButton = React.useCallback(() => {
-    setPosition('left');
+    setPosition('start');
     setIsOpen(true);
   }, []);
 
   const onClickRightButton = React.useCallback(() => {
-    setPosition('right');
+    setPosition('end');
     setIsOpen(true);
   }, []);
 
@@ -42,7 +42,7 @@ export const Position = () => {
               />
             }
           >
-            {position === 'left' ? 'Left' : 'Right'} Drawer
+            {position === 'start' ? 'Left' : 'Right'} Drawer
           </DrawerHeaderTitle>
         </DrawerHeader>
 

packages/react-components/react-drawer/stories/Drawer/DrawerPreventClose.stories.tsx

@@ -8,7 +8,7 @@ export const PreventClose = () => {
 
   return (
     <div>
-      <DrawerOverlay position="right" open={open} modalType="alert">
+      <DrawerOverlay position="end" open={open} modalType="alert">
         <DrawerHeader>
           <DrawerHeaderTitle
             action={

packages/react-components/react-drawer/stories/Drawer/DrawerResponsive.stories.tsx

@@ -45,7 +45,7 @@ export const Responsive = () => {
 
   return (
     <div className={styles.root}>
-      <Drawer type={type} separator position="left" open={isOpen} onOpenChange={(_, { open }) => setIsOpen(open)}>
+      <Drawer type={type} separator position="start" open={isOpen} onOpenChange={(_, { open }) => setIsOpen(open)}>
         <DrawerHeader>
           <DrawerHeaderTitle
             action={

packages/react-components/react-drawer/stories/Drawer/DrawerSeparator.stories.tsx

@@ -30,7 +30,7 @@ export const Separator = () => {
 
   return (
     <div className={styles.root}>
-      <DrawerInline position="left" open={leftOpen}>
+      <DrawerInline position="start" open={leftOpen}>
         <DrawerHeader>
           <DrawerHeaderTitle
             action={
@@ -61,7 +61,7 @@ export const Separator = () => {
         </Button>
       </div>
 
-      <DrawerInline separator position="right" open={rightOpen}>
+      <DrawerInline separator position="end" open={rightOpen}>
         <DrawerHeader>
           <DrawerHeaderTitle
             action={

packages/react-components/react-drawer/stories/Drawer/DrawerSize.stories.tsx

@@ -34,7 +34,7 @@ export const Size = () => {
 
   return (
     <div>
-      <DrawerOverlay size={size} position="right" open={open} onOpenChange={(_, state) => setOpen(state.open)}>
+      <DrawerOverlay size={size} position="end" open={open} onOpenChange={(_, state) => setOpen(state.open)}>
         <DrawerHeader>
           <DrawerHeaderTitle
             action={

packages/react-components/react-drawer/stories/Drawer/DrawerWithNavigation.stories.tsx

@@ -25,7 +25,7 @@ export const WithNavigation = () => {
 
   return (
     <div>
-      <DrawerOverlay position="left" open={isOpen} onOpenChange={(_, { open }) => setIsOpen(open)}>
+      <DrawerOverlay position="start" open={isOpen} onOpenChange={(_, { open }) => setIsOpen(open)}>
         <DrawerHeader>
           <DrawerHeaderNavigation>
             <Toolbar className={styles.toolbar}>