updates to examples from design feedback

jpmorganchase · Jan 24, 2025 · 2db0f1d · 2db0f1d
1 parent bff66ec
commit 2db0f1d
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 47 deletions.
diff --git a/site/src/examples/flex-layout/Spacing.module.css b/site/src/examples/flex-layout/Spacing.module.css
@@ -2,15 +2,14 @@
   content: "";
   background: var(--salt-category-5-subtle-background);
   height: 100%;
-  width: var(--flexLayout-gap);
+  width: calc(var(--flexLayout-gap) - 2px);
   position: absolute;
-  top: 0;
-  right: calc(var(--flexLayout-gap) * -1);
-  box-sizing: border-box;
+  top: -1px;
+  right: calc((var(--flexLayout-gap) + 1px) * -1);
   border: dotted 1px var(--salt-category-3-subtle-borderColor);
 }
 .item {
-  border: var(--salt-container-primary-border);
+  border: solid 1px var(--salt-container-primary-borderColor);
   background: var(--salt-container-primary-background);
 }
 .spacingExamplePadding {

diff --git a/site/src/examples/flow-layout/Spacing.module.css b/site/src/examples/flow-layout/Spacing.module.css
@@ -2,15 +2,14 @@
   content: "";
   background: var(--salt-category-5-subtle-background);
   height: 100%;
-  width: var(--flexLayout-gap);
+  width: calc(var(--flexLayout-gap) - 2px);
   position: absolute;
-  top: 0;
-  right: calc(var(--flexLayout-gap) * -1);
-  box-sizing: border-box;
+  top: -1px;
+  right: calc((var(--flexLayout-gap) + 1px) * -1);
   border: dotted 1px var(--salt-category-3-subtle-borderColor);
 }
 .item {
-  border: var(--salt-container-primary-border);
+  border: solid 1px var(--salt-container-primary-borderColor);
   background: var(--salt-container-primary-background);
 }
 .spacingExamplePadding {

diff --git a/site/src/examples/split-layout/Spacing.module.css b/site/src/examples/split-layout/Spacing.module.css
@@ -2,18 +2,17 @@
   content: "";
   background: var(--salt-category-5-subtle-background);
   height: 100%;
-  width: var(--flexLayout-gap);
+  width: calc(var(--flexLayout-gap) - 2px);
   position: absolute;
-  top: 0;
-  right: calc(var(--flexLayout-gap) * -1);
-  box-sizing: border-box;
+  top: -1px;
+  right: calc((var(--flexLayout-gap) + 1px) * -1);
   border: dotted 1px var(--salt-category-3-subtle-borderColor);
 }
 .container {
   width: 100%;
 }
 .item {
-  border: var(--salt-container-primary-border);
+  border: solid 1px var(--salt-container-primary-borderColor);
   background: var(--salt-container-primary-background);
 }
 .spacingExamplePadding {

diff --git a/site/src/examples/split-layout/Spacing.tsx b/site/src/examples/split-layout/Spacing.tsx
@@ -13,7 +13,6 @@ import { type ReactElement, useState } from "react";
 import styles from "./Spacing.module.css";
 
 export const Spacing = (): ReactElement => {
-  const [gap, setGap] = useState<number>(3);
   const [padding, setPadding] = useState<number>(0);
   const [margin, setMargin] = useState<number>(0);
 
@@ -22,12 +21,7 @@ export const Spacing = (): ReactElement => {
       {Array.from({ length: 3 }, (_, index) => (
         <FlexItem
           key={index}
-          className={clsx(
-            {
-              [styles.spacingExampleGap]: gap > 0,
-            },
-            styles.item,
-          )}
+          className={clsx(styles.spacingExampleGap, styles.item)}
           padding={2}
         >
           {index + 1}
@@ -40,12 +34,7 @@ export const Spacing = (): ReactElement => {
       {Array.from({ length: 2 }, (_, index) => (
         <FlexItem
           key={index}
-          className={clsx(
-            {
-              [styles.spacingExampleGap]: gap > 0,
-            },
-            styles.item,
-          )}
+          className={clsx(styles.spacingExampleGap, styles.item)}
           padding={2}
         >
           {index + 4}
@@ -68,27 +57,13 @@ export const Spacing = (): ReactElement => {
           className={clsx({
             [styles.spacingExamplePadding]: padding > 0,
           })}
-          gap={gap}
           padding={padding}
           margin={margin}
           startItem={startItem}
           endItem={endItem}
         />
       </div>
       <StackLayout>
-        <FormField>
-          <FormFieldLabel>Gap</FormFieldLabel>
-          <RadioButtonGroup
-            onChange={(e) => setGap(Number.parseInt(e.target.value))}
-            direction="horizontal"
-            value={`${gap}`}
-          >
-            <RadioButton label="0" value="0" />
-            <RadioButton label="1" value="1" />
-            <RadioButton label="2" value="2" />
-            <RadioButton label="3" value="3" />
-          </RadioButtonGroup>
-        </FormField>
         <FormField>
           <FormFieldLabel>Padding</FormFieldLabel>
           <RadioButtonGroup

diff --git a/site/src/examples/stack-layout/Spacing.module.css b/site/src/examples/stack-layout/Spacing.module.css
@@ -2,15 +2,14 @@
   content: "";
   background: var(--salt-category-5-subtle-background);
   width: 100%;
-  height: var(--flexLayout-gap);
+  height: calc(var(--flexLayout-gap) - 2px);
   position: absolute;
-  left: 0;
-  bottom: calc(var(--flexLayout-gap) * -1);
-  box-sizing: border-box;
+  left: -1px;
+  bottom: calc((var(--flexLayout-gap) + 1px) * -1);
   border: dotted 1px var(--salt-category-3-subtle-borderColor);
 }
 .item {
-  border: var(--salt-container-primary-border);
+  border: solid 1px var(--salt-container-primary-borderColor);
   background: var(--salt-container-primary-background);
 }
 .spacingExamplePadding {