[Joy] Use orientation prop for consistency (#33786)

mui · Aug 4, 2022 · 17f04ee · 17f04ee
1 parent 58b5d72
commit 17f04ee
Show file tree

Hide file tree

Showing 54 changed files with 222 additions and 194 deletions.
diff --git a/docs/data/joy/components/aspect-ratio/CarouselRatio.js b/docs/data/joy/components/aspect-ratio/CarouselRatio.js
@@ -40,7 +40,7 @@ export default function CarouselRatio() {
     >
       {data.map((item) => (
         <Card
-          row
+          orientation="horizontal"
           key={item.title}
           variant="outlined"
           sx={{

diff --git a/docs/data/joy/components/aspect-ratio/CarouselRatio.tsx b/docs/data/joy/components/aspect-ratio/CarouselRatio.tsx
@@ -40,7 +40,7 @@ export default function CarouselRatio() {
     >
       {data.map((item) => (
         <Card
-          row
+          orientation="horizontal"
           key={item.title}
           variant="outlined"
           sx={{

diff --git a/docs/data/joy/components/card/InteractiveCard.js b/docs/data/joy/components/card/InteractiveCard.js
@@ -10,7 +10,7 @@ export default function InteractiveCard() {
   return (
     <Card
       variant="outlined"
-      row
+      orientation="horizontal"
       sx={{
         minWidth: '320px',
         gap: 2,

diff --git a/docs/data/joy/components/card/InteractiveCard.tsx b/docs/data/joy/components/card/InteractiveCard.tsx
@@ -10,7 +10,7 @@ export default function InteractiveCard() {
   return (
     <Card
       variant="outlined"
-      row
+      orientation="horizontal"
       sx={{
         minWidth: '320px',
         gap: 2,

diff --git a/docs/data/joy/components/card/RowCard.js b/docs/data/joy/components/card/RowCard.js
@@ -8,7 +8,7 @@ import Typography from '@mui/joy/Typography';
 export default function InteractiveCard() {
   return (
     <Card
-      row
+      orientation="horizontal"
       variant="outlined"
       sx={{
         minWidth: '260px',

diff --git a/docs/data/joy/components/card/RowCard.tsx b/docs/data/joy/components/card/RowCard.tsx
@@ -8,7 +8,7 @@ import Typography from '@mui/joy/Typography';
 export default function InteractiveCard() {
   return (
     <Card
-      row
+      orientation="horizontal"
       variant="outlined"
       sx={{
         minWidth: '260px',

diff --git a/docs/data/joy/components/checkbox/ExampleButtonCheckbox.js b/docs/data/joy/components/checkbox/ExampleButtonCheckbox.js
@@ -14,7 +14,7 @@ export default function ExampleButtonCheckbox() {
       variant="soft"
       aria-label="Screens"
       role="group"
-      row
+      orientation="horizontal"
       sx={{
         flexGrow: 0,
         '--List-gap': '8px',

diff --git a/docs/data/joy/components/checkbox/ExampleChoiceChipCheckbox.js b/docs/data/joy/components/checkbox/ExampleChoiceChipCheckbox.js
@@ -16,7 +16,7 @@ export default function ExampleChoiceChipCheckbox() {
       </Typography>
       <Box role="group" aria-labelledby="rank">
         <List
-          row
+          orientation="horizontal"
           wrap
           sx={{
             '--List-gap': '8px',

diff --git a/docs/data/joy/components/checkbox/IconlessCheckbox.js b/docs/data/joy/components/checkbox/IconlessCheckbox.js
@@ -13,7 +13,7 @@ export default function IconlessCheckbox() {
       </Typography>
       <Box role="group" aria-labelledby="topping">
         <List
-          row
+          orientation="horizontal"
           wrap
           sx={{
             '--List-gap': '8px',

diff --git a/docs/data/joy/components/chip/RadioChip.js b/docs/data/joy/components/chip/RadioChip.js
@@ -18,7 +18,7 @@ export default function RadioChip() {
         <RadioGroup
           name="best-movie"
           aria-labelledby="best-movie"
-          row
+          orientation="horizontal"
           sx={{ flexWrap: 'wrap', gap: 1 }}
         >
           {[

diff --git a/docs/data/joy/components/chip/RadioChip.tsx b/docs/data/joy/components/chip/RadioChip.tsx
@@ -18,7 +18,7 @@ export default function RadioChip() {
         <RadioGroup
           name="best-movie"
           aria-labelledby="best-movie"
-          row
+          orientation="horizontal"
           sx={{ flexWrap: 'wrap', gap: 1 }}
         >
           {[

diff --git a/docs/data/joy/components/list/ExampleNavigationMenu.js b/docs/data/joy/components/list/ExampleNavigationMenu.js
@@ -303,7 +303,7 @@ export default function ExampleNavigationMenu() {
     <Box sx={{ minHeight: 190 }}>
       <List
         role="menubar"
-        row
+        orientation="horizontal"
         sx={{
           '--List-radius': '8px',
           '--List-padding': '4px',

diff --git a/docs/data/joy/components/list/HorizontalDividedList.js b/docs/data/joy/components/list/HorizontalDividedList.js
@@ -8,7 +8,7 @@ import ListItemDecorator from '@mui/joy/ListItemDecorator';
 export default function HorizontalDividedList() {
   return (
     <List
-      row
+      orientation="horizontal"
       variant="outlined"
       sx={{
         borderRadius: 'sm',

diff --git a/docs/data/joy/components/list/HorizontalList.js b/docs/data/joy/components/list/HorizontalList.js
@@ -10,7 +10,7 @@ import Person from '@mui/icons-material/Person';
 export default function HorizontalList() {
   return (
     <Box component="nav" aria-label="My site" sx={{ flexGrow: 1 }}>
-      <List role="menubar" row>
+      <List role="menubar" orientation="horizontal">
         <ListItem role="none">
           <ListItemButton
             role="menuitem"

diff --git a/docs/data/joy/components/menu/MenuToolbarExample.js b/docs/data/joy/components/menu/MenuToolbarExample.js
@@ -144,7 +144,7 @@ export default function MenuToolbarExample() {
 
   return (
     <List
-      row
+      orientation="horizontal"
       aria-label="Example application menu bar"
       role="menubar"
       data-joy-color-scheme="dark"

diff --git a/docs/data/joy/components/radio/ExampleAlignmentButtons.js b/docs/data/joy/components/radio/ExampleAlignmentButtons.js
@@ -11,7 +11,7 @@ export default function RadioButtonsGroup() {
   const [alignment, setAlignment] = React.useState('left');
   return (
     <RadioGroup
-      row
+      orientation="horizontal"
       aria-label="Alignment"
       name="alignment"
       variant="outlined"

diff --git a/docs/data/joy/components/radio/ExamplePaymentChannels.js b/docs/data/joy/components/radio/ExamplePaymentChannels.js
@@ -50,7 +50,7 @@ export default function ExamplePaymentChannels() {
       >
         <List
           variant="outlined"
-          row={row}
+          orientation={row ? 'horizontal' : 'vertical'}
           sx={{
             borderRadius: 'sm',
             boxShadow: 'sm',

diff --git a/docs/data/joy/components/radio/OverlayRadio.js b/docs/data/joy/components/radio/OverlayRadio.js
@@ -25,7 +25,7 @@ export default function OverlayRadio() {
         name="member"
         aria-labelledby="member"
         defaultValue="person1"
-        row
+        orientation="horizontal"
         sx={{ gap: 2 }}
       >
         {[1, 2, 3].map((num) => (

diff --git a/docs/data/joy/components/radio/RadioUsage.js b/docs/data/joy/components/radio/RadioUsage.js
@@ -29,16 +29,19 @@ export default function RadioUsage() {
           defaultValue: 'md',
         },
         {
-          propName: 'row',
-          knob: 'switch',
-          defaultValue: false,
+          propName: 'orientation',
+          knob: 'radio',
+          options: ['vertical', 'horizontal'],
+          defaultValue: 'vertical',
           codeBlockDisplay: false,
         },
       ]}
-      getCodeBlock={(code, props) => `<RadioGroup${props.row ? ` row` : ''}>
+      getCodeBlock={(code, props) => `<RadioGroup${
+        props.row ? ` orientation="horizontal"` : ''
+      }>
 ${prependLinesSpace(code, 2)}
 </RadioGroup>`}
-      renderDemo={({ row, ...props }) => (
+      renderDemo={({ orientation, ...props }) => (
         <div>
           <FormLabel
             id="radio-button-usage-label"
@@ -54,7 +57,7 @@ ${prependLinesSpace(code, 2)}
             Pizza crust
           </FormLabel>
           <RadioGroup
-            row={row}
+            orientation={orientation}
             defaultValue="1"
             name="radio-button-usage"
             aria-labelledby="radio-button-usage-label"

diff --git a/docs/data/joy/getting-started/templates/email/components/EmailContent.tsx b/docs/data/joy/getting-started/templates/email/components/EmailContent.tsx
@@ -173,7 +173,7 @@ export default function EmailContent() {
             />
           </AspectRatio>
         </Card>
-        <Card variant="outlined" row>
+        <Card variant="outlined" orientation="horizontal">
           <CardOverflow>
             <AspectRatio ratio="1" sx={{ minWidth: 80 }}>
               <Box

diff --git a/docs/src/modules/components/JoyUsageDemo.tsx b/docs/src/modules/components/JoyUsageDemo.tsx
@@ -298,7 +298,7 @@ export default function JoyUsageDemo<T extends { [k: string]: any } = {}>({
                     {propName}
                   </Typography>
                   <RadioGroup
-                    row
+                    orientation="horizontal"
                     name={labelId}
                     aria-labelledby={labelId}
                     value={resolvedValue}
@@ -343,7 +343,7 @@ export default function JoyUsageDemo<T extends { [k: string]: any } = {}>({
                     Color
                   </Typography>
                   <RadioGroup
-                    row
+                    orientation="horizontal"
                     name={`${componentName}-color`}
                     aria-labelledby={`${componentName}-color`}
                     value={resolvedValue || ''}

diff --git a/packages/mui-joy/src/Card/Card.tsx b/packages/mui-joy/src/Card/Card.tsx
@@ -9,18 +9,18 @@ import styled from '../styles/styled';
 import { getCardUtilityClass } from './cardClasses';
 import { CardProps, CardTypeMap } from './CardProps';
 import { resolveSxValue } from '../styles/styleUtils';
-import { CardRowContext } from './CardContext';
+import { CardOrientationContext } from './CardContext';
 
 const useUtilityClasses = (ownerState: CardProps) => {
-  const { size, variant, color, row } = ownerState;
+  const { size, variant, color, orientation } = ownerState;
 
   const slots = {
     root: [
       'root',
+      orientation,
       variant && `variant${capitalize(variant)}`,
       color && `color${capitalize(color)}`,
       size && `size${capitalize(size)}`,
-      row && 'row',
     ],
   };
 
@@ -74,7 +74,7 @@ const CardRoot = styled('div', {
     transition: 'box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms',
     position: 'relative',
     display: 'flex',
-    flexDirection: ownerState.row ? 'row' : 'column',
+    flexDirection: ownerState.orientation === 'horizontal' ? 'row' : 'column',
   },
   theme.variants[ownerState.variant!]?.[ownerState.color!],
 ]);
@@ -92,23 +92,23 @@ const Card = React.forwardRef(function Card(inProps, ref) {
     size = 'md',
     variant = 'plain',
     children,
-    row = false,
+    orientation = 'vertical',
     ...other
   } = props;
 
   const ownerState = {
     ...props,
     color,
     component,
-    row,
+    orientation,
     size,
     variant,
   };
 
   const classes = useUtilityClasses(ownerState);
 
   return (
-    <CardRowContext.Provider value={row}>
+    <CardOrientationContext.Provider value={orientation}>
       <CardRoot
         as={component}
         ownerState={ownerState}
@@ -129,7 +129,7 @@ const Card = React.forwardRef(function Card(inProps, ref) {
           return child;
         })}
       </CardRoot>
-    </CardRowContext.Provider>
+    </CardOrientationContext.Provider>
   );
 }) as OverridableComponent<CardTypeMap>;
 
@@ -161,10 +161,10 @@ Card.propTypes /* remove-proptypes */ = {
    */
   component: PropTypes.elementType,
   /**
-   * If `true`, flex direction is set to 'row'.
-   * @default false
+   * The flow direction of the content.
+   * @default 'vertical'
    */
-  row: PropTypes.bool,
+  orientation: PropTypes.oneOf(['horizontal', 'vertical']),
   /**
    * The size of the component.
    * It accepts theme values between 'xs' and 'xl'.

diff --git a/packages/mui-joy/src/Card/CardContext.ts b/packages/mui-joy/src/Card/CardContext.ts
@@ -2,4 +2,4 @@ import * as React from 'react';
 
 // internal logic
 // eslint-disable-next-line import/prefer-default-export
-export const CardRowContext = React.createContext<boolean>(false);
+export const CardOrientationContext = React.createContext<'vertical' | 'horizontal'>('vertical');
diff --git a/packages/mui-joy/src/Card/CardProps.ts b/packages/mui-joy/src/Card/CardProps.ts
@@ -21,10 +21,10 @@ export interface CardTypeMap<P = {}, D extends React.ElementType = 'div'> {
      */
     color?: OverridableStringUnion<ColorPaletteProp, CardPropsColorOverrides>;
     /**
-     * If `true`, flex direction is set to 'row'.
-     * @default false
+     * The flow direction of the content.
+     * @default 'vertical'
      */
-    row?: boolean;
+    orientation?: 'vertical' | 'horizontal';
     /**
      * The size of the component.
      * It accepts theme values between 'xs' and 'xl'.

diff --git a/packages/mui-joy/src/Card/cardClasses.ts b/packages/mui-joy/src/Card/cardClasses.ts
@@ -29,8 +29,10 @@ export interface CardClasses {
   sizeMd: string;
   /** Styles applied to the root element if `size="lg"`. */
   sizeLg: string;
-  /** Styles applied to the root element if `row={true}`. */
-  row: string;
+  /** Styles applied to the root element, if `orientation="vertical"`. */
+  vertical: string;
+  /** Styles applied to the root element, if `orientation="horizontal"`. */
+  horizontal: string;
 }
 
 export type CardClassKey = keyof CardClasses;
@@ -54,7 +56,8 @@ const cardClasses: CardClasses = generateUtilityClasses('JoyCard', [
   'sizeSm',
   'sizeMd',
   'sizeLg',
-  'row',
+  'vertical',
+  'horizontal',
 ]);
 
 export default cardClasses;
diff --git a/packages/mui-joy/src/CardOverflow/CardOverflow.tsx b/packages/mui-joy/src/CardOverflow/CardOverflow.tsx
@@ -8,7 +8,7 @@ import { useThemeProps } from '../styles';
 import styled from '../styles/styled';
 import { getCardOverflowUtilityClass } from './cardOverflowClasses';
 import { CardOverflowProps, CardOverflowTypeMap } from './CardOverflowProps';
-import { CardRowContext } from '../Card/CardContext';
+import { CardOrientationContext } from '../Card/CardContext';
 
 const useUtilityClasses = (ownerState: CardOverflowProps) => {
   const { variant, color } = ownerState;
@@ -29,14 +29,14 @@ const CardOverflowRoot = styled('div', {
   overridesResolver: (props, styles) => styles.root,
 })<{
   ownerState: CardOverflowProps & {
-    row: boolean;
+    orientation: 'horizontal' | 'vertical';
     'data-first-child'?: string;
     'data-last-child'?: string;
   };
 }>(({ theme, ownerState }) => {
   const childRadius = 'calc(var(--CardOverflow-radius) - var(--variant-borderWidth))';
   return [
-    ownerState.row
+    ownerState.orientation === 'horizontal'
       ? {
           '--AspectRatio-margin': 'calc(-1 * var(--Card-padding)) 0px',
           marginTop: 'var(--CardOverflow-offset)',
@@ -89,7 +89,7 @@ const CardOverflow = React.forwardRef(function CardOverflow(inProps, ref) {
     name: 'JoyCardOverflow',
   });
 
-  const row = React.useContext(CardRowContext);
+  const orientation = React.useContext(CardOrientationContext);
 
   const {
     className,
@@ -105,7 +105,7 @@ const CardOverflow = React.forwardRef(function CardOverflow(inProps, ref) {
     component,
     color,
     variant,
-    row,
+    orientation,
   };
 
   const classes = useUtilityClasses(ownerState);