Don't show separator lines on first child (#1969)

primer · May 2, 2023 · 37174d1 · 37174d1
1 parent 23b6b4d
commit 37174d1
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 8 deletions.
diff --git a/.changeset/fast-cobras-design.md b/.changeset/fast-cobras-design.md
@@ -0,0 +1,5 @@
+---
+'@primer/view-components': patch
+---
+
+Don't show segmented control item separator on first item
diff --git a/app/components/primer/alpha/segmented_control.pcss b/app/components/primer/alpha/segmented_control.pcss
@@ -28,7 +28,7 @@
     }
 
     &::before {
-      border-color: transparent;
+      border-color: transparent !important;
     }
 
     & + .SegmentedControl-item::before {
@@ -46,13 +46,15 @@
   }
 
   /* Separator lines */
-  &::before {
-    position: absolute;
-    inset: 0 0 0 -1px;
-    margin-top: var(--control-medium-paddingBlock, 6px);
-    margin-bottom: var(--control-medium-paddingBlock, 6px);
-    content: '';
-    border-left: var(--borderWidth-thin, max(1px, 0.0625rem)) solid var(--color-border-default);
+  &:not(:first-child) {
+    &::before {
+      position: absolute;
+      inset: 0 0 0 -1px;
+      margin-top: var(--control-medium-paddingBlock, 6px);
+      margin-bottom: var(--control-medium-paddingBlock, 6px);
+      content: '';
+      border-left: var(--borderWidth-thin, max(1px, 0.0625rem)) solid var(--color-border-default);
+    }
   }
 
   /* Button ----------------------------------------- */