Divider: VR adjusments (#3900)

pinterest · Nov 29, 2024 · 00d40cc · 00d40cc
1 parent 7a12cf4
commit 00d40cc
Show file tree

Hide file tree

Showing 5 changed files with 30 additions and 9 deletions.
diff --git a/packages/gestalt/src/Divider.css b/packages/gestalt/src/Divider.css
@@ -2,7 +2,14 @@
   composes: block from "./Layout.css";
   composes: borderTop solid from "./Borders.css";
   composes: m0 from "./Whitespace.css";
-  composes: borderColorLightGray from "./Borders.css";
   border-bottom: 0;
   border-left: 0;
 }
+
+.borderColor {
+  composes: borderColorLightGray from "./Borders.css";
+}
+
+.VRborderColor {
+  border-color: var(--sema-color-border-decorative);
+}
diff --git a/packages/gestalt/src/Divider.tsx b/packages/gestalt/src/Divider.tsx
@@ -1,4 +1,6 @@
+import classnames from 'classnames';
 import styles from './Divider.css';
+import useInExperiment from './useInExperiment';
 
 /**
  * [Divider](https://gestalt.pinterest.systems/web/divider) is a light gray 1px horizontal or vertical line which groups and divides content in lists and layouts.
@@ -9,7 +11,19 @@ import styles from './Divider.css';
  */
 // eslint-disable-next-line no-empty-pattern
 export default function Divider({}: Record<any, any>) {
-  return <hr className={styles.divider} />;
+  const isInVRExperiment = useInExperiment({
+    webExperimentName: 'web_gestalt_visualRefresh',
+    mwebExperimentName: 'web_gestalt_visualRefresh',
+  });
+
+  return (
+    <hr
+      className={classnames(
+        styles.divider,
+        isInVRExperiment ? styles.VRborderColor : styles.borderColor,
+      )}
+    />
+  );
 }
 
 Divider.displayName = 'Divider';
diff --git a/packages/gestalt/src/__snapshots__/AccordionExpandable.test.tsx.snap b/packages/gestalt/src/__snapshots__/AccordionExpandable.test.tsx.snap
@@ -122,7 +122,7 @@ exports[`Module Expandable renders correctly with multiple items 1`] = `
     </div>
   </div>
   <hr
-    className="divider"
+    className="divider borderColor"
   />
   <div
     className="box paddingX600 paddingY600"
@@ -242,7 +242,7 @@ exports[`Module Expandable renders correctly with multiple items 1`] = `
     </div>
   </div>
   <hr
-    className="divider"
+    className="divider borderColor"
   />
   <div
     className="box paddingX600 paddingY600"
@@ -644,7 +644,7 @@ exports[`renders correctly with multiple items with expandedId 1`] = `
     </div>
   </div>
   <hr
-    className="divider"
+    className="divider borderColor"
   />
   <div
     className="box paddingX600 paddingY600"
@@ -764,7 +764,7 @@ exports[`renders correctly with multiple items with expandedId 1`] = `
     </div>
   </div>
   <hr
-    className="divider"
+    className="divider borderColor"
   />
   <div
     className="box paddingX600 paddingY600"

diff --git a/packages/gestalt/src/__snapshots__/Divider.test.tsx.snap b/packages/gestalt/src/__snapshots__/Divider.test.tsx.snap
@@ -2,6 +2,6 @@
 
 exports[`Divider renders 1`] = `
 <hr
-  className="divider"
+  className="divider borderColor"
 />
 `;
diff --git a/packages/gestalt/src/__snapshots__/SideNavigation.test.tsx.snap b/packages/gestalt/src/__snapshots__/SideNavigation.test.tsx.snap
@@ -81,7 +81,7 @@ exports[`SideNavigation renders Header + Footer 1`] = `
                   className="FlexItem"
                 >
                   <hr
-                    className="divider"
+                    className="divider borderColor"
                   />
                 </div>
               </div>
@@ -160,7 +160,7 @@ exports[`SideNavigation renders Header + Footer 1`] = `
                   className="FlexItem"
                 >
                   <hr
-                    className="divider"
+                    className="divider borderColor"
                   />
                 </div>
                 <div