feat: change lg util to xl. use 1.5rem as lg

chanzuckerberg · Jun 10, 2022 · 8a676e9 · 8a676e9
1 parent c1a09dd
commit 8a676e9
Show file tree

Hide file tree

Showing 10 changed files with 182 additions and 40 deletions.
diff --git a/.storybook/components/Utilities/SpacingMarginUtilities.js b/.storybook/components/Utilities/SpacingMarginUtilities.js
@@ -31,9 +31,18 @@ export class SpacingMarginUtilities extends Component {
 
         <Hr />
 
-        <code>u-margin-lg</code>
+        <code>u-margin-left-lg</code>
         <div className="sg-demo-container-box">
-          <div className="u-margin-lg sg-demo-box-2">Large margin</div>
+          <div className="u-margin-left-lg sg-demo-box-2">
+            Margin left large
+          </div>
+        </div>
+
+        <Hr />
+
+        <code>u-margin-xl</code>
+        <div className="sg-demo-container-box">
+          <div className="u-margin-xl sg-demo-box-2">Large margin</div>
         </div>
 
         <Hr />
@@ -124,6 +133,15 @@ export class SpacingMarginUtilities extends Component {
 
         <Hr />
 
+        <code>u-margin-right-xl</code>
+        <div className="sg-demo-container-box">
+          <div className="u-margin-right-xl sg-demo-box-2">
+            Margin right large
+          </div>
+        </div>
+
+        <Hr />
+
         <h2>
           <code>margin-bottom</code>
         </h2>
@@ -167,7 +185,7 @@ export class SpacingMarginUtilities extends Component {
         <code>u-margin-bottom-xl</code>
         <div className="sg-demo-container-box">
           <div className="u-margin-bottom-xl sg-demo-box-2">
-            Margin bottom xl
+            Margin bottom large
           </div>
         </div>
 
@@ -179,6 +197,14 @@ export class SpacingMarginUtilities extends Component {
             Margin bottom xxl
           </div>
         </div>
+        <Hr />
+
+        <code>u-margin-bottom-xxxl</code>
+        <div className="sg-demo-container-box">
+          <div className="u-margin-bottom-xxxl sg-demo-box-2">
+            Margin bottom xxxl
+          </div>
+        </div>
 
         <Hr />
 
@@ -219,6 +245,15 @@ export class SpacingMarginUtilities extends Component {
             Margin left large
           </div>
         </div>
+
+        <Hr />
+
+        <code>u-margin-left-xl</code>
+        <div className="sg-demo-container-box">
+          <div className="u-margin-left-xl sg-demo-box-2">
+            Margin left large
+          </div>
+        </div>
       </div>
     );
   }

diff --git a/.storybook/components/Utilities/SpacingPaddingUtilities.js b/.storybook/components/Utilities/SpacingPaddingUtilities.js
@@ -38,6 +38,13 @@ export class SpacingPaddingUtilities extends Component {
 
         <Hr />
 
+        <code>u-padding-xl</code>
+        <div className="u-padding-xl sg-demo-container-box">
+          <div className=" sg-demo-box-2">XL padding</div>
+        </div>
+
+        <Hr />
+
         <h2>
           <code>padding-top</code>
         </h2>
@@ -70,6 +77,13 @@ export class SpacingPaddingUtilities extends Component {
 
         <Hr />
 
+        <code>u-padding-top-xl</code>
+        <div className="u-padding-top-xl sg-demo-container-box">
+          <div className=" sg-demo-box-2">Padding top XL</div>
+        </div>
+
+        <Hr />
+
         <h2>
           <code>padding-right</code>
         </h2>
@@ -102,6 +116,13 @@ export class SpacingPaddingUtilities extends Component {
 
         <Hr />
 
+        <code>u-padding-right-xl</code>
+        <div className="u-padding-right-xl sg-demo-container-box">
+          <div className=" sg-demo-box-2">Padding right XL</div>
+        </div>
+
+        <Hr />
+
         <h2>
           <code>padding-bottom</code>
         </h2>
@@ -134,6 +155,13 @@ export class SpacingPaddingUtilities extends Component {
 
         <Hr />
 
+        <code>u-padding-bottom-xl</code>
+        <div className="u-padding-bottom-xl sg-demo-container-box">
+          <div className=" sg-demo-box-2">Padding bottom XL</div>
+        </div>
+
+        <Hr />
+
         <h2>
           <code>padding-left</code>
         </h2>
@@ -161,7 +189,14 @@ export class SpacingPaddingUtilities extends Component {
 
         <code>u-padding-left-lg</code>
         <div className="u-padding-left-lg sg-demo-container-box">
-          <div className="sg-demo-box-2">Padding left large</div>
+          <div className=" sg-demo-box-2">Padding left large</div>
+        </div>
+
+        <Hr />
+
+        <code>u-padding-left-xl</code>
+        <div className="u-padding-left-xl sg-demo-container-box">
+          <div className="sg-demo-box-2">Padding left XL</div>
         </div>
       </div>
     );

diff --git a/.storybook/pages/Cad/Cad.tsx b/.storybook/pages/Cad/Cad.tsx
@@ -297,10 +297,10 @@ export const Cad = () => (
       <Layout variant="67-33">
         <LayoutSection region="main">
           <Panel>
-            <Heading as="h2" className="u-margin-bottom-lg" size="headline-sm">
+            <Heading as="h2" className="u-margin-bottom-md" size="headline-sm">
               Select projects for your History 6 plan
             </Heading>
-            <Text as="div" className="u-margin-bottom-lg">
+            <Text as="div" className="u-margin-bottom-xl">
               <p>
                 Make a plan so that you can stay connected to learning
                 objectives even as changes occur throughout the year.
@@ -318,7 +318,7 @@ export const Cad = () => (
                   itemIds: ['item-1', 'item-2', 'item-3', 'item-4', 'item-5'],
                   emptyContent: (
                     <>
-                      <Text as="div" className="u-margin-bottom-lg">
+                      <Text as="div" className="u-margin-bottom-xl">
                         <p>
                           There are no more available projects to create your
                           course plan
@@ -349,7 +349,7 @@ export const Cad = () => (
                   itemIds: [],
                   emptyContent: (
                     <>
-                      <Text as="div" className="u-margin-bottom-lg">
+                      <Text as="div" className="u-margin-bottom-xl">
                         <p>
                           Drag in available projects to build your course plan
                         </p>

diff --git a/.storybook/pages/CadStep1/CadStep1.tsx b/.storybook/pages/CadStep1/CadStep1.tsx
@@ -50,7 +50,7 @@ export const CadStep1 = () => (
     <LayoutContainer>
       <Layout gap="lg-xl" variant="50-50">
         <LayoutSection region="main">
-          <Grid className="u-margin-bottom-lg" variant="1-2-1up">
+          <Grid className="u-margin-bottom-xl" variant="1-2-1up">
             <img alt="compass vignette" src={CompassCenter} />
             <Heading as="h2" size="headline-lg">
               Let&apos;s start planning, Amy Frankle.
@@ -62,7 +62,7 @@ export const CadStep1 = () => (
           </Text>
         </LayoutSection>
         <LayoutSection region="main">
-          <Text as="div" className="u-margin-bottom-lg">
+          <Text as="div" className="u-margin-bottom-xl">
             <h3>Tell us how often your course meets.</h3>
             <p>
               We’ll adjust project plans based on your schedule. This way, you
@@ -78,7 +78,7 @@ export const CadStep1 = () => (
             How many times per week do you have class?
           </Text>
           <TextField
-            className="u-margin-bottom-lg"
+            className="u-margin-bottom-xl"
             hideLabel
             label="times per week"
             min={0}
@@ -89,7 +89,7 @@ export const CadStep1 = () => (
             How many minutes is each class?
           </Text>
           <TextField
-            className="u-margin-bottom-lg"
+            className="u-margin-bottom-xl"
             hideLabel
             label="minutes"
             min={0}

diff --git a/.storybook/pages/ProjectOverview/ProjectOverview.tsx b/.storybook/pages/ProjectOverview/ProjectOverview.tsx
@@ -39,7 +39,7 @@ export const ProjectOverview = () => {
       />
       <ListDetail>
         <ListDetailPanel title="Overview" variant="success">
-          <Heading as="h2" className="u-margin-bottom-lg" size="headline-lg">
+          <Heading as="h2" className="u-margin-bottom-xl" size="headline-lg">
             What is this Project About?
           </Heading>
           <Text size="lg">
@@ -48,13 +48,13 @@ export const ProjectOverview = () => {
             mattis sem turpis id dictum. Volutpat ornare turpis ultrices augue
             bibendum pellentesque. Habitasse.
           </Text>
-          <Button className="u-margin-bottom-lg" variant="link">
+          <Button className="u-margin-bottom-xl" variant="link">
             See More
           </Button>
           <Heading as="h3" className="u-margin-bottom-sm" size="title-md">
             Essential Questions
           </Heading>
-          <Text as="div" className="u-margin-bottom-lg">
+          <Text as="div" className="u-margin-bottom-xl">
             <ul>
               <li>How are structures in the body organized?</li>
               <li>
@@ -68,7 +68,7 @@ export const ProjectOverview = () => {
           <Heading as="h3" className="u-margin-bottom-sm" size="title-md">
             Key Take Aways
           </Heading>
-          <Text as="div" className="u-margin-bottom-lg">
+          <Text as="div" className="u-margin-bottom-xl">
             <ol>
               <li>
                 Groups of specialized cells make up organs and body systems,

diff --git a/docs/CODE_GUIDELINES.md b/docs/CODE_GUIDELINES.md
@@ -249,7 +249,7 @@ import { EdsThemeColorUtilitySuccessForeground } from 'src/tokens-dist/ts/colors
 
 ## Utility classes <a name="utility-classes"></a>
 
-EDS provides a number of utility classes (e.g. `u-margin-bottom-lg` and `u-padding-none`) that can be appended to components (e.g. `<TableCell className="u-padding-none">`) in order to achieve certain style results. Utility classes provide an additional layer to help "massage" components into place without having to overwhelm component styles with too many style variants.
+EDS provides a number of utility classes (e.g. `u-margin-bottom-xl` and `u-padding-none`) that can be appended to components (e.g. `<TableCell className="u-padding-none">`) in order to achieve certain style results. Utility classes provide an additional layer to help "massage" components into place without having to overwhelm component styles with too many style variants.
 
 - Utility classes can be found in `src/components/Utilities`
 - Utility classes use the `!important` declaration to override any existing component styles

diff --git a/src/components/DragDrop/DragDrop.stories.tsx b/src/components/DragDrop/DragDrop.stories.tsx
@@ -95,7 +95,7 @@ Default.args = {
       itemIds: [],
       emptyContent: (
         <>
-          <Text as="div" className="u-margin-bottom-lg">
+          <Text as="div" className="u-margin-bottom-xl">
             <p>Drag in available projects to build your couse plan</p>
           </Text>
           <svg

diff --git a/src/components/DragDrop/__snapshots__/DragDrop.test.tsx.snap b/src/components/DragDrop/__snapshots__/DragDrop.test.tsx.snap
@@ -252,7 +252,7 @@ exports[`<DragDrop /> Default story renders snapshot 1`] = `
           data-rbd-droppable-id="container-2"
         >
           <div
-            class="layout-linelength-container text text--body text-passage text-passage--body u-margin-bottom-lg"
+            class="layout-linelength-container text text--body text-passage text-passage--body u-margin-bottom-xl"
           >
             <p>
               Drag in available projects to build your couse plan