Docs(web-react): Use spacing style props in all components #DS-475

lmc-eu · Dec 29, 2023 · 8b4bd9d · 8b4bd9d
1 parent d88b761
commit 8b4bd9d
Show file tree

Hide file tree

Showing 17 changed files with 37 additions and 48 deletions.
diff --git a/packages/web-react/src/components/Button/demo/ButtonDemoFactory.tsx b/packages/web-react/src/components/Button/demo/ButtonDemoFactory.tsx
@@ -22,7 +22,7 @@ const ButtonDemoFactory = ({ ...props }: ButtonBaseProps) => {
                   {`Button ${color}`}
                 </Button>{' '}
                 <Button size={size} color={color} {...props}>
-                  <Icon name="hamburger" UNSAFE_className="mr-400" />
+                  <Icon name="hamburger" marginRight="space-400" />
                   Menu
                 </Button>{' '}
                 <Button size={size} color={color} isSquare {...props}>

diff --git a/packages/web-react/src/components/Button/stories/Button.stories.tsx b/packages/web-react/src/components/Button/stories/Button.stories.tsx
@@ -28,7 +28,7 @@ const meta: Meta<typeof Button> = {
         '<Icon />': <Icon name="profile" />,
         '<Icon /> Text': (
           <>
-            <Icon name="profile" UNSAFE_className="mr-400" /> Text
+            <Icon name="profile" marginRight="space-400" /> Text
           </>
         ),
       },

diff --git a/packages/web-react/src/components/ButtonLink/demo/ButtonLinkDemoFactory.tsx b/packages/web-react/src/components/ButtonLink/demo/ButtonLinkDemoFactory.tsx
@@ -22,7 +22,7 @@ const ButtonLinkDemoFactory = ({ ...props }: ButtonBaseProps) => {
                   {`Button ${color}`}
                 </ButtonLink>{' '}
                 <ButtonLink size={size} color={color} {...props}>
-                  <Icon name="link" UNSAFE_className="mr-400" />
+                  <Icon name="link" marginRight="space-400" />
                   Menu
                 </ButtonLink>{' '}
                 <ButtonLink size={size} color={color} isSquare {...props}>

diff --git a/packages/web-react/src/components/ButtonLink/stories/ButtonLink.stories.tsx b/packages/web-react/src/components/ButtonLink/stories/ButtonLink.stories.tsx
@@ -28,7 +28,7 @@ const meta: Meta<typeof ButtonLink> = {
         '<Icon />': <Icon name="profile" />,
         '<Icon /> Text': (
           <>
-            <Icon name="profile" UNSAFE_className="mr-400" /> Text
+            <Icon name="profile" marginRight="space-400" /> Text
           </>
         ),
       },

diff --git a/packages/web-react/src/components/Dropdown/demo/DropdownPlacements.tsx b/packages/web-react/src/components/Dropdown/demo/DropdownPlacements.tsx
@@ -21,11 +21,7 @@ const DropdownPlacements = () => {
 
   return (
     <form autoComplete="off">
-      <Grid
-        cols={3}
-        UNSAFE_className="mx-auto"
-        UNSAFE_style={{ alignItems: 'center', justifyItems: 'center', maxWidth: '40rem' }}
-      >
+      <Grid cols={3} marginX="auto" UNSAFE_style={{ alignItems: 'center', justifyItems: 'center', maxWidth: '40rem' }}>
         <GridItem columnStart={2} rowStart={1}>
           <Radio
             name="placement"

diff --git a/packages/web-react/src/components/Dropdown/stories/Dropdown.stories.tsx b/packages/web-react/src/components/Dropdown/stories/Dropdown.stories.tsx
@@ -49,19 +49,19 @@ const meta: Meta<typeof Dropdown> = {
       <>
         <a href="#info" className="d-flex mb-400">
           <Icon name="info" />
-          <Text UNSAFE_className="ml-300">Information</Text>
+          <Text marginLeft="space-300">Information</Text>
         </a>
         <a href="#link" className="d-flex mb-400">
           <Icon name="link" />
-          <Text UNSAFE_className="ml-300">More links</Text>
+          <Text marginLeft="space-300">More links</Text>
         </a>
         <a href="#profile" className="d-flex mb-400">
           <Icon name="profile" />
-          <Text UNSAFE_className="ml-300">Profile</Text>
+          <Text marginLeft="space-300">Profile</Text>
         </a>
         <a href="#help" className="d-flex">
           <Icon name="help" />
-          <Text UNSAFE_className="ml-300">Help</Text>
+          <Text marginLeft="space-300">Help</Text>
         </a>
       </>
     ),

diff --git a/packages/web-react/src/components/DropdownModern/demo/DropdownModernPlacements.tsx b/packages/web-react/src/components/DropdownModern/demo/DropdownModernPlacements.tsx
@@ -19,11 +19,7 @@ const DropdownModernPlacements = () => {
 
   return (
     <form autoComplete="off">
-      <Grid
-        cols={3}
-        UNSAFE_className="mx-auto"
-        UNSAFE_style={{ alignItems: 'center', justifyItems: 'center', maxWidth: '40rem' }}
-      >
+      <Grid cols={3} marginX="auto" UNSAFE_style={{ alignItems: 'center', justifyItems: 'center', maxWidth: '40rem' }}>
         <GridItem columnStart={2} rowStart={1}>
           <Radio
             name="placement"

diff --git a/packages/web-react/src/components/DropdownModern/stories/DropdownModern.stories.tsx b/packages/web-react/src/components/DropdownModern/stories/DropdownModern.stories.tsx
@@ -50,19 +50,19 @@ const meta: Meta<typeof DropdownModern> = {
       <>
         <a href="#info" className="d-flex mb-400">
           <Icon name="info" />
-          <Text UNSAFE_className="ml-300">Information</Text>
+          <Text marginLeft="space-300">Information</Text>
         </a>
         <a href="#link" className="d-flex mb-400">
           <Icon name="link" />
-          <Text UNSAFE_className="ml-300">More links</Text>
+          <Text marginLeft="space-300">More links</Text>
         </a>
         <a href="#profile" className="d-flex mb-400">
           <Icon name="profile" />
-          <Text UNSAFE_className="ml-300">Profile</Text>
+          <Text marginLeft="space-300">Profile</Text>
         </a>
         <a href="#help" className="d-flex">
           <Icon name="help" />
-          <Text UNSAFE_className="ml-300">Help</Text>
+          <Text marginLeft="space-300">Help</Text>
         </a>
       </>
     ),

diff --git a/packages/web-react/src/components/DropdownModern/stories/DropdownPopover.stories.tsx b/packages/web-react/src/components/DropdownModern/stories/DropdownPopover.stories.tsx
@@ -25,19 +25,19 @@ const meta: Meta<typeof DropdownPopover> = {
       <>
         <a href="#info" className="d-flex mb-400">
           <Icon name="info" />
-          <Text UNSAFE_className="ml-300">Information</Text>
+          <Text marginLeft="space-300">Information</Text>
         </a>
         <a href="#link" className="d-flex mb-400">
           <Icon name="link" />
-          <Text UNSAFE_className="ml-300">More links</Text>
+          <Text marginLeft="space-300">More links</Text>
         </a>
         <a href="#profile" className="d-flex mb-400">
           <Icon name="profile" />
-          <Text UNSAFE_className="ml-300">Profile</Text>
+          <Text marginLeft="space-300">Profile</Text>
         </a>
         <a href="#help" className="d-flex">
           <Icon name="help" />
-          <Text UNSAFE_className="ml-300">Help</Text>
+          <Text marginLeft="space-300">Help</Text>
         </a>
       </>
     ),

diff --git a/packages/web-react/src/components/DropdownModern/stories/UncontolledDropdown.stories.tsx b/packages/web-react/src/components/DropdownModern/stories/UncontolledDropdown.stories.tsx
@@ -50,19 +50,19 @@ const meta: Meta<typeof UncontrolledDropdown> = {
       <>
         <a href="#info" className="d-flex mb-400">
           <Icon name="info" />
-          <Text UNSAFE_className="ml-300">Information</Text>
+          <Text marginLeft="space-300">Information</Text>
         </a>
         <a href="#link" className="d-flex mb-400">
           <Icon name="link" />
-          <Text UNSAFE_className="ml-300">More links</Text>
+          <Text marginLeft="space-300">More links</Text>
         </a>
         <a href="#profile" className="d-flex mb-400">
           <Icon name="profile" />
-          <Text UNSAFE_className="ml-300">Profile</Text>
+          <Text marginLeft="space-300">Profile</Text>
         </a>
         <a href="#help" className="d-flex">
           <Icon name="help" />
-          <Text UNSAFE_className="ml-300">Help</Text>
+          <Text marginLeft="space-300">Help</Text>
         </a>
       </>
     ),

diff --git a/packages/web-react/src/components/Header/demo/HeaderSimpleTransparent.tsx b/packages/web-react/src/components/Header/demo/HeaderSimpleTransparent.tsx
@@ -22,7 +22,7 @@ const HeaderSimpleTransparent = () => {
         </Link>
       </Header>
 
-      <Heading elementType="div" size="large" UNSAFE_className="text-center mb-1200">
+      <Heading elementType="div" size="large" marginBottom="space-1200" UNSAFE_className="text-center">
         Example Cover
       </Heading>
     </div>

diff --git a/packages/web-react/src/components/Modal/demo/ModalDefault.tsx b/packages/web-react/src/components/Modal/demo/ModalDefault.tsx
@@ -38,7 +38,7 @@ const ModalDefault = () => {
               <div>Footer alignment (from tablet up):</div>
               <Radio
                 id="footer_alignment_left"
-                UNSAFE_className="mr-600"
+                marginRight="space-600"
                 label="Left"
                 value="left"
                 name="footer_alignment"
@@ -48,7 +48,7 @@ const ModalDefault = () => {
               />
               <Radio
                 id="footer_alignment_center"
-                UNSAFE_className="mr-600"
+                marginRight="space-600"
                 label="Center"
                 value="center"
                 name="footer_alignment"
@@ -58,7 +58,7 @@ const ModalDefault = () => {
               />
               <Radio
                 id="footer_alignment_right"
-                UNSAFE_className="mr-600"
+                marginRight="space-600"
                 label="Right"
                 value="right"
                 name="footer_alignment"
@@ -95,7 +95,7 @@ const ModalDefault = () => {
         <ModalDialog elementType="form" method="dialog">
           <ModalHeader>Modal with a Form</ModalHeader>
           <ModalBody>
-            <TextField UNSAFE_className="mb-400" label="Label" id="textfield" placeholder="TextField" />
+            <TextField marginBottom="space-400" label="Label" id="textfield" placeholder="TextField" />
             <p>
               The primary action is a button with <code>type=&quot;submit&quot;</code> and closes the dialog on
               submission.

diff --git a/packages/web-react/src/components/ScrollView/demo/ScrollViewHorizontalBreakout.tsx b/packages/web-react/src/components/ScrollView/demo/ScrollViewHorizontalBreakout.tsx
@@ -6,7 +6,7 @@ import ScrollView from '../ScrollView';
 const ScrollViewHorizontalBreakout = () => (
   <div className="breakout-container">
     <ScrollView direction="horizontal">
-      <Grid cols={4} UNSAFE_className="mb-700" UNSAFE_style={{ paddingInline: 'var(--container-padding-inline)' }}>
+      <Grid cols={4} marginBottom="space-700" UNSAFE_style={{ paddingInline: 'var(--container-padding-inline)' }}>
         {[1, 2, 3, 4].map((i) => (
           <DocsBox key={i} size="small" UNSAFE_style={{ width: '20rem', aspectRatio: '2/1' }}>
             1/4

diff --git a/packages/web-react/src/components/ScrollView/demo/ScrollViewOverflowDecorators.tsx b/packages/web-react/src/components/ScrollView/demo/ScrollViewOverflowDecorators.tsx
@@ -10,7 +10,7 @@ const ScrollViewOverflowDecorators = () => (
       </ScrollView>
     </div>
 
-    <ScrollView direction="horizontal" overflowDecorators="borders" UNSAFE_className="mb-1000">
+    <ScrollView direction="horizontal" overflowDecorators="borders" marginBottom="space-1000">
       <p className="py-700" style={{ whiteSpace: 'nowrap' }}>
         {HORIZONTAL_CONTENT}
       </p>

diff --git a/packages/web-react/src/components/Tooltip/demo/TooltipOnHover.tsx b/packages/web-react/src/components/Tooltip/demo/TooltipOnHover.tsx
@@ -5,31 +5,31 @@ import TooltipWrapper from '../TooltipWrapper';
 
 const TooltipOnHover = () => (
   <div>
-    <TooltipWrapper UNSAFE_className="d-inline-block mr-600 mb-600">
+    <TooltipWrapper marginRight="space-600" marginBottom="space-600" UNSAFE_className="d-inline-block">
       <ButtonLink href="#" aria-describedby="my-tooltip-hover-top" UNSAFE_className="TooltipTarget">
         Tooltip on top
       </ButtonLink>
       <Tooltip id="my-tooltip-hover-top" placement="top">
         Hello there!
       </Tooltip>
     </TooltipWrapper>{' '}
-    <TooltipWrapper UNSAFE_className="d-inline-block mr-600 mb-600">
+    <TooltipWrapper marginRight="space-600" marginBottom="space-600" UNSAFE_className="d-inline-block">
       <ButtonLink href="#" aria-describedby="my-tooltip-hover-right" UNSAFE_className="TooltipTarget">
         Tooltip on right
       </ButtonLink>
       <Tooltip id="my-tooltip-hover-right" placement="right">
         Hello there!
       </Tooltip>
     </TooltipWrapper>{' '}
-    <TooltipWrapper UNSAFE_className="d-inline-block mr-600 mb-600">
+    <TooltipWrapper marginRight="space-600" marginBottom="space-600" UNSAFE_className="d-inline-block">
       <ButtonLink href="#" aria-describedby="my-tooltip-hover-bottom" UNSAFE_className="TooltipTarget">
         Tooltip on bottom
       </ButtonLink>
       <Tooltip id="my-tooltip-hover-bottom" placement="bottom">
         Hello there!
       </Tooltip>
     </TooltipWrapper>{' '}
-    <TooltipWrapper UNSAFE_className="d-inline-block mr-600 mb-600">
+    <TooltipWrapper marginRight="space-600" marginBottom="space-600" UNSAFE_className="d-inline-block">
       <ButtonLink href="#" aria-describedby="my-tooltip-hover-left" UNSAFE_className="TooltipTarget">
         Tooltip on left
       </ButtonLink>

diff --git a/packages/web-react/src/components/Tooltip/demo/TooltipPlacements.tsx b/packages/web-react/src/components/Tooltip/demo/TooltipPlacements.tsx
@@ -15,11 +15,7 @@ const TooltipPlacements = () => {
 
   return (
     <form autoComplete="off">
-      <Grid
-        cols={3}
-        UNSAFE_className="mx-auto"
-        UNSAFE_style={{ alignItems: 'center', justifyItems: 'center', maxWidth: '30rem' }}
-      >
+      <Grid cols={3} marginX="auto" UNSAFE_style={{ alignItems: 'center', justifyItems: 'center', maxWidth: '30rem' }}>
         <GridItem columnStart={2} rowStart={1}>
           <Radio
             name="placement"

diff --git a/packages/web-react/src/icons/demo/icons.tsx b/packages/web-react/src/icons/demo/icons.tsx
@@ -14,12 +14,13 @@ const Icons = () => {
     <Grid
       elementType="ul"
       cols={{ mobile: 2, tablet: 4, desktop: 6 }}
-      UNSAFE_className="text-center my-1000 list-unstyled"
+      marginY="space-1000"
+      UNSAFE_className="text-center list-unstyled"
     >
       {icons?.map((icon) => (
         <li key={icon} className="mb-600">
           <Icon name={icon} />
-          <Text UNSAFE_className="mt-500" emphasis="bold">
+          <Text marginTop="space-500" emphasis="bold">
             {icon}
           </Text>
         </li>