Rename direction prop to dir

mui · Nov 18, 2024 · 23cfc62 · 23cfc62
1 parent d2ea1de
commit 23cfc62
Show file tree

Hide file tree

Showing 11 changed files with 124 additions and 16 deletions.
diff --git a/docs/data/api/toggle-button-group-root.json b/docs/data/api/toggle-button-group-root.json
@@ -2,7 +2,7 @@
   "props": {
     "className": { "type": { "name": "union", "description": "func<br>&#124;&nbsp;string" } },
     "defaultValue": { "type": { "name": "arrayOf", "description": "Array&lt;string&gt;" } },
-    "direction": {
+    "dir": {
       "type": { "name": "enum", "description": "'ltr'<br>&#124;&nbsp;'rtl'" },
       "default": "'ltr'"
     },

diff --git a/docs/data/components/toggle-button-group/ToggleButtonGroupRtl.js b/docs/data/components/toggle-button-group/ToggleButtonGroupRtl.js
@@ -6,7 +6,7 @@ import classes from './styles.module.css';
 export default function ToggleButtonGroupRtl() {
   return (
     <ToggleButtonGroup.Root
-      direction="rtl"
+      dir="rtl"
       toggleMultiple
       aria-label="Text formatting"
       className={classes.root}

diff --git a/docs/data/components/toggle-button-group/ToggleButtonGroupRtl.tsx b/docs/data/components/toggle-button-group/ToggleButtonGroupRtl.tsx
@@ -6,7 +6,7 @@ import classes from './styles.module.css';
 export default function ToggleButtonGroupRtl() {
   return (
     <ToggleButtonGroup.Root
-      direction="rtl"
+      dir="rtl"
       toggleMultiple
       aria-label="Text formatting"
       className={classes.root}

diff --git a/docs/data/translations/api-docs/toggle-button-group-root/toggle-button-group-root.json b/docs/data/translations/api-docs/toggle-button-group-root/toggle-button-group-root.json
@@ -7,7 +7,7 @@
     "defaultValue": {
       "description": "The open state of the ToggleButtonGroup represented by an array of the values of all pressed <code>&lt;ToggleButtonGroup.Item/&gt;</code>s This is the uncontrolled counterpart of <code>value</code>."
     },
-    "direction": { "description": "Text direction" },
+    "dir": { "description": "Text direction" },
     "onValueChange": {
       "description": "Callback fired when the pressed states of the ToggleButtonGroup changes.",
       "typeDescriptions": {

diff --git a/docs/reference/generated/toggle-button-group-item.json b/docs/reference/generated/toggle-button-group-item.json
@@ -0,0 +1,31 @@
+{
+  "name": "ToggleButtonGroupItem",
+  "description": "",
+  "props": {
+    "value": {
+      "type": "string",
+      "required": true,
+      "description": "A unique string that identifies the component when used\ninside a ToggleButtonGroup"
+    },
+    "aria-label": {
+      "type": "string",
+      "description": "The label for the toggle button."
+    },
+    "aria-labelledby": {
+      "type": "string",
+      "description": "An id or space-separated list of ids of elements that label the toggle button."
+    },
+    "className": {
+      "type": "string | (state) => string",
+      "description": "Class names applied to the element or a function that returns them based on the component's state."
+    },
+    "onPressedChange": {
+      "type": "function(pressed: boolean, event: Event) => void",
+      "description": "Callback fired when the pressed state is changed."
+    },
+    "render": {
+      "type": "React.ReactElement | (props, state) => React.ReactElement",
+      "description": "A function to customize rendering of the component."
+    }
+  }
+}
diff --git a/docs/reference/generated/toggle-button-group-root.json b/docs/reference/generated/toggle-button-group-root.json
@@ -0,0 +1,36 @@
+{
+  "name": "ToggleButtonGroupRoot",
+  "description": "",
+  "props": {
+    "className": {
+      "type": "string | (state) => string",
+      "description": "Class names applied to the element or a function that returns them based on the component's state."
+    },
+    "defaultValue": {
+      "type": "string[]",
+      "description": "The open state of the ToggleButtonGroup represented by an array of\nthe values of all pressed `<ToggleButtonGroup.Item/>`s\nThis is the uncontrolled counterpart of `value`."
+    },
+    "dir": {
+      "type": "'ltr' | 'rtl'",
+      "default": "'ltr'",
+      "description": "Text direction"
+    },
+    "onValueChange": {
+      "type": "function(groupValue: Array<string>, event: Event) => void",
+      "description": "Callback fired when the pressed states of the ToggleButtonGroup changes."
+    },
+    "render": {
+      "type": "React.ReactElement | (props, state) => React.ReactElement",
+      "description": "A function to customize rendering of the component."
+    },
+    "toggleMultiple": {
+      "type": "boolean",
+      "default": "false",
+      "description": "When `false` only one item in the group can be pressed. If any item in\nthe group becomes pressed, the others will become unpressed.\nWhen `true` multiple items can be pressed."
+    },
+    "value": {
+      "type": "string[]",
+      "description": "The open state of the ToggleButtonGroup represented by an array of\nthe values of all pressed `<ToggleButtonGroup.Item/>`s\nThis is the controlled counterpart of `defaultValue`."
+    }
+  }
+}
diff --git a/docs/reference/generated/toggle-button-root.json b/docs/reference/generated/toggle-button-root.json
@@ -0,0 +1,41 @@
+{
+  "name": "ToggleButtonRoot",
+  "description": "",
+  "props": {
+    "aria-label": {
+      "type": "string",
+      "description": "The label for the ToggleButton."
+    },
+    "aria-labelledby": {
+      "type": "string",
+      "description": "An id or space-separated list of ids of elements that label the ToggleButton."
+    },
+    "className": {
+      "type": "string | (state) => string",
+      "description": "Class names applied to the element or a function that returns them based on the component's state."
+    },
+    "defaultPressed": {
+      "type": "boolean",
+      "default": "false",
+      "description": "The default pressed state. Use when the component is not controlled."
+    },
+    "disabled": {
+      "type": "boolean",
+      "default": "false",
+      "description": "If `true`, the component is disabled."
+    },
+    "onPressedChange": {
+      "type": "function(pressed: boolean, event: Event) => void",
+      "description": "Callback fired when the pressed state is changed."
+    },
+    "pressed": {
+      "type": "boolean",
+      "default": "undefined",
+      "description": "If `true`, the component is pressed."
+    },
+    "render": {
+      "type": "React.ReactElement | (props, state) => React.ReactElement",
+      "description": "A function to customize rendering of the component."
+    }
+  }
+}
diff --git a/docs/src/app/experiments/toggle-group.tsx b/docs/src/app/experiments/toggle-group.tsx
@@ -82,7 +82,7 @@ export default function ToggleButtonGroupDemo() {
       <ToggleButtonGroup.Root
         toggleMultiple
         aria-label="Text formatting"
-        direction="rtl"
+        dir="rtl"
         className={classes.group}
       >
         <ToggleButtonGroup.Item

diff --git a/packages/mui-base/src/ToggleButtonGroup/Root/ToggleButtonGroupRoot.test.tsx b/packages/mui-base/src/ToggleButtonGroup/Root/ToggleButtonGroupRoot.test.tsx
@@ -243,7 +243,7 @@ describe('<ToggleButtonGroup.Root />', () => {
 
     it('rtl', async () => {
       const { getAllByRole, user } = await render(
-        <ToggleButtonGroup.Root direction="rtl">
+        <ToggleButtonGroup.Root dir="rtl">
           <ToggleButtonGroup.Item value="one" />
           <ToggleButtonGroup.Item value="two" />
         </ToggleButtonGroup.Root>,

diff --git a/packages/mui-base/src/ToggleButtonGroup/Root/ToggleButtonGroupRoot.tsx b/packages/mui-base/src/ToggleButtonGroup/Root/ToggleButtonGroupRoot.tsx
@@ -35,7 +35,7 @@ const ToggleButtonGroupRoot = React.forwardRef(function ToggleButtonGroupRoot(
   const {
     value: valueProp,
     defaultValue: defaultValueProp,
-    direction,
+    dir,
     disabled: disabledProp,
     toggleMultiple = false,
     onValueChange,
@@ -55,7 +55,7 @@ const ToggleButtonGroupRoot = React.forwardRef(function ToggleButtonGroupRoot(
   const { getRootProps, disabled, setGroupValue, value } = useToggleButtonGroupRoot({
     value: valueProp,
     defaultValue,
-    direction,
+    dir,
     disabled: disabledProp,
     toggleMultiple,
     onValueChange,
@@ -87,7 +87,7 @@ const ToggleButtonGroupRoot = React.forwardRef(function ToggleButtonGroupRoot(
 
   return (
     <ToggleButtonGroupRootContext.Provider value={contextValue}>
-      <CompositeRoot render={renderElement()} rtl={direction === 'rtl'} />
+      <CompositeRoot render={renderElement()} rtl={dir === 'rtl'} />
     </ToggleButtonGroupRootContext.Provider>
   );
 });
@@ -103,9 +103,9 @@ export namespace ToggleButtonGroupRoot {
   export interface Props
     extends Pick<
         UseToggleButtonGroupRoot.Parameters,
-        'value' | 'defaultValue' | 'onValueChange' | 'disabled' | 'toggleMultiple' | 'direction'
+        'value' | 'defaultValue' | 'onValueChange' | 'disabled' | 'toggleMultiple' | 'dir'
       >,
-      Omit<BaseUIComponentProps<'div', OwnerState>, 'defaultValue'> {
+      Omit<BaseUIComponentProps<'div', OwnerState>, 'defaultValue' | 'dir'> {
     /**
      * @default false
      */
@@ -136,7 +136,7 @@ ToggleButtonGroupRoot.propTypes /* remove-proptypes */ = {
    * Text direction
    * @default 'ltr'
    */
-  direction: PropTypes.oneOf(['ltr', 'rtl']),
+  dir: PropTypes.oneOf(['ltr', 'rtl']),
   /**
    * @default false
    */

diff --git a/packages/mui-base/src/ToggleButtonGroup/Root/useToggleButtonGroupRoot.ts b/packages/mui-base/src/ToggleButtonGroup/Root/useToggleButtonGroupRoot.ts
@@ -11,7 +11,7 @@ export function useToggleButtonGroupRoot(
   const {
     value,
     defaultValue,
-    direction = 'ltr',
+    dir = 'ltr',
     disabled = false,
     onValueChange,
     toggleMultiple = false,
@@ -46,9 +46,9 @@ export function useToggleButtonGroupRoot(
     (externalProps = {}) =>
       mergeReactProps<'div'>(externalProps, {
         role: 'group',
-        dir: direction,
+        dir,
       }),
-    [direction],
+    [dir],
   );
 
   return React.useMemo(
@@ -101,7 +101,7 @@ export namespace UseToggleButtonGroupRoot {
      * Text direction
      * @default 'ltr'
      */
-    direction?: Direction;
+    dir?: Direction;
   }
 
   export interface ReturnValue {