From 2db0f1df3f167e613463182a3e1126410f55dae2 Mon Sep 17 00:00:00 2001
From: Fernanda Castillo <fersitacastillo123@gmail.com>
Date: Fri, 24 Jan 2025 10:20:19 +0000
Subject: [PATCH] updates to examples from design feedback

---
 .../examples/flex-layout/Spacing.module.css   |  9 +++---
 .../examples/flow-layout/Spacing.module.css   |  9 +++---
 .../examples/split-layout/Spacing.module.css  |  9 +++---
 site/src/examples/split-layout/Spacing.tsx    | 29 ++-----------------
 .../examples/stack-layout/Spacing.module.css  |  9 +++---
 5 files changed, 18 insertions(+), 47 deletions(-)

diff --git a/site/src/examples/flex-layout/Spacing.module.css b/site/src/examples/flex-layout/Spacing.module.css
index 7a1c3ca02e5..03821254124 100644
--- 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
index 7a1c3ca02e5..03821254124 100644
--- 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
index c41950bb626..09c4e0c8acf 100644
--- 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
index 23ce174964b..ab1b5401757 100644
--- 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,7 +57,6 @@ export const Spacing = (): ReactElement => {
           className={clsx({
             [styles.spacingExamplePadding]: padding > 0,
           })}
-          gap={gap}
           padding={padding}
           margin={margin}
           startItem={startItem}
@@ -76,19 +64,6 @@ export const Spacing = (): ReactElement => {
         />
       </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
index 1d7baadf870..aefaba32717 100644
--- 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 {