Add RTL support

mui · Nov 7, 2024 · e4f7794 · e4f7794
1 parent edd60ff
commit e4f7794
Show file tree

Hide file tree

Showing 9 changed files with 302 additions and 42 deletions.
diff --git a/docs/data/components/toggle-button-group/ToggleButtonGroupRtl.js b/docs/data/components/toggle-button-group/ToggleButtonGroupRtl.js
@@ -0,0 +1,67 @@
+'use client';
+import * as React from 'react';
+import { ToggleButtonGroup } from '@base_ui/react/ToggleButtonGroup';
+import classes from './styles.module.css';
+
+export default function ToggleButtonGroupRtl() {
+  return (
+    <ToggleButtonGroup.Root
+      direction="rtl"
+      toggleMultiple
+      aria-label="Text formatting"
+      className={classes.root}
+    >
+      <ToggleButtonGroup.Item
+        value="bold"
+        aria-label="Toggle bold"
+        className={classes.button}
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="24"
+          height="24"
+          viewBox="0 0 24 24"
+          className={classes.icon}
+        >
+          <path d="M6 4h8a4 4 0 0 1 4 4 4 4 0 0 1-4 4H6z" />
+          <path d="M6 12h9a4 4 0 0 1 4 4 4 4 0 0 1-4 4H6z" />
+        </svg>
+      </ToggleButtonGroup.Item>
+
+      <ToggleButtonGroup.Item
+        value="italics"
+        aria-label="Toggle italics"
+        className={classes.button}
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="24"
+          height="24"
+          viewBox="0 0 24 24"
+          className={classes.icon}
+        >
+          <line x1="19" y1="4" x2="10" y2="4" />
+          <line x1="14" y1="20" x2="5" y2="20" />
+          <line x1="15" y1="4" x2="9" y2="20" />
+        </svg>
+      </ToggleButtonGroup.Item>
+
+      <ToggleButtonGroup.Item
+        value="underline"
+        aria-label="Toggle underline"
+        className={classes.button}
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="24"
+          height="24"
+          viewBox="0 0 24 24"
+          className={classes.icon}
+        >
+          <path d="M6 3v7a6 6 0 0 0 6 6 6 6 0 0 0 6-6V3" />
+          <line x1="4" y1="21" x2="20" y2="21" />
+        </svg>
+      </ToggleButtonGroup.Item>
+    </ToggleButtonGroup.Root>
+  );
+}
diff --git a/docs/data/components/toggle-button-group/ToggleButtonGroupRtl.tsx b/docs/data/components/toggle-button-group/ToggleButtonGroupRtl.tsx
@@ -0,0 +1,67 @@
+'use client';
+import * as React from 'react';
+import { ToggleButtonGroup } from '@base_ui/react/ToggleButtonGroup';
+import classes from './styles.module.css';
+
+export default function ToggleButtonGroupRtl() {
+  return (
+    <ToggleButtonGroup.Root
+      direction="rtl"
+      toggleMultiple
+      aria-label="Text formatting"
+      className={classes.root}
+    >
+      <ToggleButtonGroup.Item
+        value="bold"
+        aria-label="Toggle bold"
+        className={classes.button}
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="24"
+          height="24"
+          viewBox="0 0 24 24"
+          className={classes.icon}
+        >
+          <path d="M6 4h8a4 4 0 0 1 4 4 4 4 0 0 1-4 4H6z" />
+          <path d="M6 12h9a4 4 0 0 1 4 4 4 4 0 0 1-4 4H6z" />
+        </svg>
+      </ToggleButtonGroup.Item>
+
+      <ToggleButtonGroup.Item
+        value="italics"
+        aria-label="Toggle italics"
+        className={classes.button}
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="24"
+          height="24"
+          viewBox="0 0 24 24"
+          className={classes.icon}
+        >
+          <line x1="19" y1="4" x2="10" y2="4" />
+          <line x1="14" y1="20" x2="5" y2="20" />
+          <line x1="15" y1="4" x2="9" y2="20" />
+        </svg>
+      </ToggleButtonGroup.Item>
+
+      <ToggleButtonGroup.Item
+        value="underline"
+        aria-label="Toggle underline"
+        className={classes.button}
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="24"
+          height="24"
+          viewBox="0 0 24 24"
+          className={classes.icon}
+        >
+          <path d="M6 3v7a6 6 0 0 0 6 6 6 6 0 0 0 6-6V3" />
+          <line x1="4" y1="21" x2="20" y2="21" />
+        </svg>
+      </ToggleButtonGroup.Item>
+    </ToggleButtonGroup.Root>
+  );
+}
diff --git a/docs/data/components/toggle-button-group/styles.module.css b/docs/data/components/toggle-button-group/styles.module.css
@@ -4,8 +4,10 @@
 
 .button {
   --size: 2.5rem;
-  --corner: 0.4rem;
+  --corner-radius: 0.4rem;
   --border-color: var(--gray-outline-2);
+  --border-radius-visual-right: 0 var(--corner-radius) var(--corner-radius) 0;
+  --border-radius-visual-left: var(--corner-radius) 0 0 var(--corner-radius);
 
   display: flex;
   flex-flow: row nowrap;
@@ -19,16 +21,24 @@
 }
 
 .button:first-child {
-  border-radius: var(--corner) 0 0 var(--corner);
+  border-radius: var(--border-radius-visual-left);
   border-right-color: transparent;
 }
 
 .button:last-child {
-  border-radius: 0 var(--corner) var(--corner) 0;
+  border-radius: var(--border-radius-visual-right);
   border-left-color: transparent;
 }
 
-.button:hover {
+[dir='rtl'] .button:first-child {
+  border-radius: var(--border-radius-visual-right);
+}
+
+[dir='rtl'] .button:last-child {
+  border-radius: var(--border-radius-visual-left);
+}
+
+.button:not(:disabled):hover {
   background-color: var(--gray-surface-1);
   outline: 1px solid var(--gray-500);
   outline-offset: -1px;
@@ -38,7 +48,7 @@
 }
 
 .button:focus-visible {
-  outline: 2px solid var(--gray-900);
+  outline: 2px solid var(--color-violet);
   z-index: 1;
 }
 

diff --git a/docs/data/components/toggle-button-group/toggle-button-group.mdx b/docs/data/components/toggle-button-group/toggle-button-group.mdx
@@ -57,7 +57,7 @@ When uncontrolled, use the `defaultValue` prop to set the initial state of the g
 When controlled, pass the `value` and `onValueChange` props to `ToggleButtonGroup.Root`:
 
 ```tsx
-const [value, setValue] = React.useState(['italics']);
+const [value, setValue] = React.useState(['align-center']);
 
 return (
   <ToggleButtonGroup.Root value={value} onValueChange={setValue}>
@@ -114,6 +114,8 @@ Use the `direction` prop to configure a RTL toggle button group:
 <ToggleButtonGroup.Root direction="rtl">{/* toggle buttons */}</ToggleButtonGroup.Root>
 ```
 
+<Demo demo="ToggleButtonGroupRtl" />
+
 ## Accessibility
 
 - The `Root` component, and every `Item` must be given must be given an accessible name with `aria-label` or `aria-labelledby`.

diff --git a/docs/data/components/toggle-button/styles.module.css b/docs/data/components/toggle-button/styles.module.css
@@ -20,7 +20,7 @@
 }
 
 .button:focus-visible {
-  outline: 2px solid var(--gray-900);
+  outline: 2px solid var(--color-violet);
 }
 
 .icon {

diff --git a/packages/mui-base/src/ToggleButtonGroup/Item/ToggleButtonGroupItem.test.tsx b/packages/mui-base/src/ToggleButtonGroup/Item/ToggleButtonGroupItem.test.tsx
@@ -5,6 +5,7 @@ import { act } from '@mui/internal-test-utils';
 import { ToggleButtonGroup } from '@base_ui/react/ToggleButtonGroup';
 import { createRenderer, describeConformance } from '#test-utils';
 import { NOOP } from '../../utils/noop';
+import { CompositeRoot } from '../../Composite/Root/CompositeRoot';
 import { ToggleButtonGroupRootContext } from '../Root/ToggleButtonGroupRootContext';
 
 const contextValue: ToggleButtonGroupRootContext = {
@@ -21,7 +22,7 @@ describe('<ToggleButtonGroup.Item />', () => {
     render: (node) =>
       render(
         <ToggleButtonGroupRootContext.Provider value={contextValue}>
-          {node}
+          <CompositeRoot>{node}</CompositeRoot>
         </ToggleButtonGroupRootContext.Provider>,
       ),
   }));

diff --git a/packages/mui-base/src/ToggleButtonGroup/Item/ToggleButtonGroupItem.tsx b/packages/mui-base/src/ToggleButtonGroup/Item/ToggleButtonGroupItem.tsx
@@ -3,6 +3,7 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useComponentRenderer } from '../../utils/useComponentRenderer';
 import type { BaseUIComponentProps } from '../../utils/types';
+import { CompositeItem } from '../../Composite/Item/CompositeItem';
 import { useToggleButtonGroupRootContext } from '../Root/ToggleButtonGroupRootContext';
 import { useToggleButtonGroupItem } from './useToggleButtonGroupItem';
 
@@ -67,7 +68,7 @@ const ToggleButtonGroupItem = React.forwardRef(function ToggleButtonGroupItem(
     extraProps: otherProps,
   });
 
-  return renderElement();
+  return <CompositeItem render={renderElement()} />;
 });
 
 export { ToggleButtonGroupItem };