@primer/view-components 0.3.0-rc.dc2abcf9 → 0.3.0

package/app/components/primer/alpha/segmented_control.css

@@ -1 +1,175 @@
-.SegmentedControl{background-color:var(--controlTrack-bgColor-rest,var(--color-switch-track-bg));border-radius:var(--borderRadius-medium,6px);display:inline-flex;list-style:none}.SegmentedControl-item{border:var(--borderWidth-thin,max(1px,.0625rem)) solid #0000;border-radius:var(--borderRadius-medium,6px);display:inline-flex;padding:var(--control-xsmall-paddingInline-condensed,.25rem);position:relative}.SegmentedControl-item.SegmentedControl-item--selected{background-color:var(--controlKnob-bgColor-rest,var(--color-switch-knob-bg));border-color:var(--controlKnob-borderColor-rest,var(--color-switch-knob-border))}.SegmentedControl-item.SegmentedControl-item--selected .Button{font-weight:var(--base-text-weight-semibold,600)}.SegmentedControl-item.SegmentedControl-item--selected .Button:hover{background-color:initial}.SegmentedControl-item.SegmentedControl-item--selected:before{border-color:#0000!important}.SegmentedControl-item.SegmentedControl-item--selected+.SegmentedControl-item:before{border-color:#0000}.SegmentedControl-item .Button-label[data-content]:before{content:attr(data-content);display:block;font-weight:var(--base-text-weight-semibold,600);height:0;visibility:hidden}.SegmentedControl-item:not(:first-child):before{border-left:var(--borderWidth-thin,max(1px,.0625rem)) solid var(--borderColor-default,var(--color-border-default));content:"";inset:0 0 0 -1px;margin-bottom:var(--control-medium-paddingBlock,.375rem);margin-top:var(--control-medium-paddingBlock,.375rem);position:absolute}.SegmentedControl-item .Button{border:0;color:var(--control-fgColor-rest,var(--color-fg-default));font-weight:var(--base-text-weight-normal,400);transition:none}.SegmentedControl-item .Button:focus-visible{border-radius:calc(var(--borderRadius-medium,6px) - 5px);outline-offset:calc(var(--control-xsmall-paddingInline-condensed,.25rem) - var(--borderWidth-thin,max(1px, .0625rem)))}.SegmentedControl-item .Button--small{height:calc(var(--control-small-size,1.75rem) - var(--control-xsmall-paddingInline-condensed,.25rem)*2 - var(--borderWidth-thin,max(1px, .0625rem))*2);padding:0 calc(var(--control-small-paddingInline-condensed,.5rem) - var(--control-xsmall-paddingInline-condensed,.25rem))}.SegmentedControl-item .Button--small.Button--iconOnly{width:calc(var(--control-medium-size,2rem) - var(--control-xsmall-paddingInline-condensed,.25rem)*2 - var(--borderWidth-thin,max(1px, .0625rem))*2)}.SegmentedControl-item .Button--small.Button--iconOnly:before{content:"";height:100%;left:50%;min-height:var(--control-medium-size,2rem);min-width:var(--control-medium-size,2rem);position:absolute;top:50%;transform:translateX(-50%) translateY(-50%);width:100%}.SegmentedControl-item .Button--medium{height:calc(var(--control-medium-size,2rem) - var(--control-xsmall-paddingInline-condensed,.25rem)*2 - var(--borderWidth-thin,max(1px, .0625rem))*2);padding:0 calc(var(--control-medium-paddingInline-normal,.75rem) - var(--control-xsmall-paddingInline-condensed,.25rem))}.SegmentedControl-item .Button--medium.Button--iconOnly{width:calc(var(--control-medium-size,2rem) - var(--control-xsmall-paddingInline-condensed,.25rem)*2 - var(--borderWidth-thin,max(1px, .0625rem))*2)}.SegmentedControl-item .Button--medium.Button--iconOnly:before{content:"";height:100%;left:50%;min-height:var(--control-medium-size,2rem);min-width:var(--control-medium-size,2rem);position:absolute;top:50%;transform:translateX(-50%) translateY(-50%);width:100%}.SegmentedControl-item .Button--large{height:calc(var(--control-large-size,2.5rem) - var(--control-xsmall-paddingInline-condensed,.25rem)*2 - var(--borderWidth-thin,max(1px, .0625rem))*2);padding:0 calc(var(--control-large-paddingInline-spacious,1rem) - var(--control-xsmall-paddingInline-condensed,.25rem))}.SegmentedControl-item .Button--large.Button--iconOnly{width:calc(var(--control-large-size,2.5rem) - var(--control-xsmall-paddingInline-condensed,.25rem)*2 - var(--borderWidth-thin,max(1px, .0625rem))*2)}.SegmentedControl-item .Button--large.Button--iconOnly:before{content:"";height:100%;left:50%;min-height:var(--control-large-size,2.5rem);min-width:var(--control-large-size,2.5rem);position:absolute;top:50%;transform:translateX(-50%) translateY(-50%);width:100%}.SegmentedControl-item .Button--iconOnly{padding:initial}.SegmentedControl-item .Button--invisible.Button--invisible-noVisuals .Button-label{color:var(--control-fgColor-rest,var(--color-fg-default))}.SegmentedControl--fullWidth{display:flex}.SegmentedControl--fullWidth .SegmentedControl-item{flex:1;justify-content:center}.SegmentedControl--fullWidth .Button--iconOnly,.SegmentedControl--fullWidth .Button-withTooltip{width:100%}
+/* SegmentedControl */
+
+.SegmentedControl {
+  display: inline-flex;
+  list-style: none;
+  background-color: var(--controlTrack-bgColor-rest,var(--color-switch-track-bg));
+  border-radius: var(--borderRadius-medium,6px);
+}
+
+.SegmentedControl-item {
+  position: relative;
+  display: inline-flex;
+  border: var(--borderWidth-thin,max(1px, 0.0625rem)) solid transparent;
+  border-radius: var(--borderRadius-medium,6px);
+  padding: var(--control-xsmall-paddingInline-condensed,0.25rem);
+
+  /* Selected ---------------------------------------- */
+}
+
+.SegmentedControl-item.SegmentedControl-item--selected {
+    background-color: var(--controlKnob-bgColor-rest,var(--color-switch-knob-bg));
+    border-color: var(--controlKnob-borderColor-rest,var(--color-switch-knob-border));
+  }
+
+.SegmentedControl-item.SegmentedControl-item--selected .Button {
+      font-weight: var(--base-text-weight-semibold,600);
+    }
+
+.SegmentedControl-item.SegmentedControl-item--selected .Button:hover {
+        background-color: transparent;
+      }
+
+.SegmentedControl-item.SegmentedControl-item--selected::before {
+      border-color: transparent !important;
+    }
+
+.SegmentedControl-item.SegmentedControl-item--selected + .SegmentedControl-item::before {
+      border-color: transparent;
+    }
+
+/* renders a visibly hidden "copy" of the text in bold, reserving box space for when text becomes bold on selected */
+
+.SegmentedControl-item .Button-label[data-content]::before {
+    display: block;
+    height: 0;
+    font-weight: var(--base-text-weight-semibold,600);
+    visibility: hidden;
+    content: attr(data-content);
+  }
+
+/* Separator lines */
+
+.SegmentedControl-item:not(:first-child)::before {
+      position: absolute;
+      inset: 0 0 0 -1px;
+      margin-top: var(--control-medium-paddingBlock,calc((2rem - 1.25rem) / 2));
+      margin-bottom: var(--control-medium-paddingBlock,calc((2rem - 1.25rem) / 2));
+      content: '';
+      border-left: var(--borderWidth-thin,max(1px, 0.0625rem)) solid var(--borderColor-default,var(--color-border-default));
+    }
+
+/* Button ----------------------------------------- */
+
+.SegmentedControl-item .Button {
+    border: 0;
+    font-weight: var(--base-text-weight-normal,400);
+    transition: none;
+    color: var(--control-fgColor-rest,var(--color-fg-default));
+  }
+
+.SegmentedControl-item .Button:focus-visible {
+      outline-offset: calc(var(--control-xsmall-paddingInline-condensed,0.25rem) - var(--borderWidth-thin,max(1px, 0.0625rem)));
+      border-radius: calc(var(--borderRadius-medium,6px) - 5px);
+    }
+
+.SegmentedControl-item .Button--small {
+    height: calc(
+      var(--control-small-size,1.75rem) - var(--control-xsmall-paddingInline-condensed,0.25rem) * 2 - var(--borderWidth-thin,max(1px, 0.0625rem)) * 2
+    );
+    padding: 0 calc(var(--control-small-paddingInline-condensed,0.5rem) - var(--control-xsmall-paddingInline-condensed,0.25rem));
+  }
+
+.SegmentedControl-item .Button--small.Button--iconOnly {
+      width: calc(
+        var(--control-medium-size,2rem) - var(--control-xsmall-paddingInline-condensed,0.25rem) * 2 - var(--borderWidth-thin,max(1px, 0.0625rem)) * 2
+      );
+    }
+
+.SegmentedControl-item .Button--small.Button--iconOnly::before {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 100%;
+  height: 100%;
+  min-height: var(--control-medium-size,2rem);
+  content: "";
+  transform: translateX(-50%) translateY(-50%);
+  min-width: var(--control-medium-size,2rem);
+}
+
+.SegmentedControl-item .Button--medium {
+    height: calc(
+      var(--control-medium-size,2rem) - var(--control-xsmall-paddingInline-condensed,0.25rem) * 2 - var(--borderWidth-thin,max(1px, 0.0625rem)) * 2
+    );
+    padding: 0 calc(var(--control-medium-paddingInline-normal,0.75rem) - var(--control-xsmall-paddingInline-condensed,0.25rem));
+  }
+
+.SegmentedControl-item .Button--medium.Button--iconOnly {
+      width: calc(
+        var(--control-medium-size,2rem) - var(--control-xsmall-paddingInline-condensed,0.25rem) * 2 - var(--borderWidth-thin,max(1px, 0.0625rem)) * 2
+      );
+    }
+
+.SegmentedControl-item .Button--medium.Button--iconOnly::before {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 100%;
+  height: 100%;
+  min-height: var(--control-medium-size,2rem);
+  content: "";
+  transform: translateX(-50%) translateY(-50%);
+  min-width: var(--control-medium-size,2rem);
+}
+
+.SegmentedControl-item .Button--large {
+    height: calc(
+      var(--control-large-size,2.5rem) - var(--control-xsmall-paddingInline-condensed,0.25rem) * 2 - var(--borderWidth-thin,max(1px, 0.0625rem)) * 2
+    );
+    padding: 0 calc(var(--control-large-paddingInline-spacious,1rem) - var(--control-xsmall-paddingInline-condensed,0.25rem));
+  }
+
+.SegmentedControl-item .Button--large.Button--iconOnly {
+      width: calc(
+        var(--control-large-size,2.5rem) - var(--control-xsmall-paddingInline-condensed,0.25rem) * 2 - var(--borderWidth-thin,max(1px, 0.0625rem)) * 2
+      );
+    }
+
+.SegmentedControl-item .Button--large.Button--iconOnly::before {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 100%;
+  height: 100%;
+  min-height: var(--control-large-size,2.5rem);
+  content: "";
+  transform: translateX(-50%) translateY(-50%);
+  min-width: var(--control-large-size,2.5rem);
+}
+
+.SegmentedControl-item .Button--iconOnly {
+    padding: initial;
+  }
+
+.SegmentedControl-item .Button--invisible.Button--invisible-noVisuals .Button-label {
+    color: var(--control-fgColor-rest,var(--color-fg-default));
+  }
+
+/* fullWidth */
+
+.SegmentedControl--fullWidth {
+  display: flex;
+}
+
+.SegmentedControl--fullWidth .SegmentedControl-item {
+    flex: 1;
+    justify-content: center;
+  }
+
+/* is .Button-withTooltip used anywhere? can't find use of it */
+
+.SegmentedControl--fullWidth .Button--iconOnly,
+  .SegmentedControl--fullWidth .Button-withTooltip {
+    width: 100%;
+  }

package/app/components/primer/alpha/segmented_control.css.json

@@ -6,21 +6,21 @@
     ".SegmentedControl-item.SegmentedControl-item--selected",
     ".SegmentedControl-item.SegmentedControl-item--selected .Button",
     ".SegmentedControl-item.SegmentedControl-item--selected .Button:hover",
-    ".SegmentedControl-item.SegmentedControl-item--selected:before",
-    ".SegmentedControl-item.SegmentedControl-item--selected+.SegmentedControl-item:before",
-    ".SegmentedControl-item .Button-label[data-content]:before",
-    ".SegmentedControl-item:not(:first-child):before",
+    ".SegmentedControl-item.SegmentedControl-item--selected::before",
+    ".SegmentedControl-item.SegmentedControl-item--selected + .SegmentedControl-item::before",
+    ".SegmentedControl-item .Button-label[data-content]::before",
+    ".SegmentedControl-item:not(:first-child)::before",
     ".SegmentedControl-item .Button",
     ".SegmentedControl-item .Button:focus-visible",
     ".SegmentedControl-item .Button--small",
     ".SegmentedControl-item .Button--small.Button--iconOnly",
-    ".SegmentedControl-item .Button--small.Button--iconOnly:before",
+    ".SegmentedControl-item .Button--small.Button--iconOnly::before",
     ".SegmentedControl-item .Button--medium",
     ".SegmentedControl-item .Button--medium.Button--iconOnly",
-    ".SegmentedControl-item .Button--medium.Button--iconOnly:before",
+    ".SegmentedControl-item .Button--medium.Button--iconOnly::before",
     ".SegmentedControl-item .Button--large",
     ".SegmentedControl-item .Button--large.Button--iconOnly",
-    ".SegmentedControl-item .Button--large.Button--iconOnly:before",
+    ".SegmentedControl-item .Button--large.Button--iconOnly::before",
     ".SegmentedControl-item .Button--iconOnly",
     ".SegmentedControl-item .Button--invisible.Button--invisible-noVisuals .Button-label",
     ".SegmentedControl--fullWidth",

package/app/components/primer/alpha/tab_nav.css

@@ -1 +1,106 @@
-.tabnav{border-bottom:var(--borderWidth-thin,max(1px,.0625rem)) solid var(--borderColor-default,var(--color-border-default));margin-bottom:var(--stack-gap-normal,1rem);margin-top:0}.tabnav-tabs{display:flex;margin-bottom:calc(var(--borderWidth-thin,max(1px, .0625rem))*-1);overflow:auto}.tabnav-tab{background-color:initial;border:var(--borderWidth-thin,max(1px,.0625rem)) solid #0000;border-bottom:0;color:var(--fgColor-muted,var(--color-fg-muted));display:inline-block;flex-shrink:0;font-size:var(--text-body-size-medium,.875rem);line-height:23px;padding:var(--base-size-8,.5rem) var(--control-medium-paddingInline-spacious,1rem);text-decoration:none;transition:color .2s cubic-bezier(.3,0,.5,1)}.tabnav-tab.selected,.tabnav-tab[aria-current]:not([aria-current=false]),.tabnav-tab[aria-selected=true]{background-color:var(--bgColor-default,var(--color-canvas-default));border-color:var(--borderColor-default,var(--color-border-default));border-radius:var(--borderRadius-medium,6px) var(--borderRadius-medium,6px) 0 0;color:var(--fgColor-default,var(--color-fg-default))}.tabnav-tab.selected .octicon,.tabnav-tab[aria-current]:not([aria-current=false]) .octicon,.tabnav-tab[aria-selected=true] .octicon{color:inherit}.tabnav-tab:hover{color:var(--fgColor-default,var(--color-fg-default));text-decoration:none;transition-duration:.1s}.tabnav-tab:focus,.tabnav-tab:focus-visible{border-radius:var(--borderRadius-medium,6px) var(--borderRadius-medium,6px) 0 0!important}.tabnav-tab:focus,.tabnav-tab:focus-visible{outline-offset:-6px}.tabnav-tab .octicon,.tabnav-tab:active{color:var(--fgColor-muted,var(--color-fg-muted))}.tabnav-tab .octicon{margin-right:var(--control-small-gap,.25rem)}.tabnav-tab .Counter{color:inherit;margin-left:var(--control-small-gap,.25rem)}.tabnav-extra{color:var(--fgColor-muted,var(--color-fg-muted));display:inline-block;font-size:var(--text-body-size-small,.75rem);margin-left:10px;padding-top:10px}.tabnav-extra>.octicon{margin-right:2px}a.tabnav-extra:hover{color:var(--fgColor-accent,var(--color-accent-fg));text-decoration:none}.tabnav-btn{margin-left:var(--controlStack-medium-gap-condensed,.5rem)}
+/* tabnav */
+
+/* Outer wrapper */
+
+.tabnav {
+  margin-top: 0;
+  margin-bottom: var(--stack-gap-normal,1rem);
+  border-bottom: var(--borderWidth-thin,max(1px, 0.0625rem)) solid var(--borderColor-default,var(--color-border-default));
+}
+
+.tabnav-tabs {
+  display: flex;
+  margin-bottom: calc(var(--borderWidth-thin,max(1px, 0.0625rem)) * -1);
+  overflow: auto;
+}
+
+.tabnav-tab {
+  display: inline-block;
+  flex-shrink: 0;
+  padding: var(--base-size-8,0.5rem) var(--control-medium-paddingInline-spacious,1rem);
+  font-size: var(--text-body-size-medium,0.875rem);
+  line-height: 23px;
+  color: var(--fgColor-muted,var(--color-fg-muted));
+  text-decoration: none;
+  background-color: transparent;
+  border: var(--borderWidth-thin,max(1px, 0.0625rem)) solid transparent;
+  border-bottom: 0;
+  transition: color 0.2s cubic-bezier(0.3, 0, 0.5, 1);
+}
+
+.tabnav-tab.selected,
+  .tabnav-tab[aria-selected='true'],
+  .tabnav-tab[aria-current]:not([aria-current='false']) {
+    color: var(--fgColor-default,var(--color-fg-default));
+    background-color: var(--bgColor-default,var(--color-canvas-default)); /* cover bottom border */
+    border-color: var(--borderColor-default,var(--color-border-default));
+    border-radius: var(--borderRadius-medium,6px) var(--borderRadius-medium,6px) 0 0;
+  }
+
+.tabnav-tab.selected .octicon, .tabnav-tab[aria-selected='true'] .octicon, .tabnav-tab[aria-current]:not([aria-current='false']) .octicon {
+      color: inherit;
+    }
+
+.tabnav-tab:hover {
+    color: var(--fgColor-default,var(--color-fg-default));
+    text-decoration: none;
+    transition-duration: 0.1s;
+  }
+
+.tabnav-tab:focus,
+  .tabnav-tab:focus-visible {
+    border-radius: var(--borderRadius-medium,6px) var(--borderRadius-medium,6px) 0 0 !important;
+  }
+
+.tabnav-tab:focus,
+  .tabnav-tab:focus-visible {
+    outline-offset: -6px;
+  }
+
+.tabnav-tab:active {
+    color: var(--fgColor-muted,var(--color-fg-muted));
+  }
+
+.tabnav-tab .octicon {
+    margin-right: var(--control-small-gap,0.25rem);
+    color: var(--fgColor-muted,var(--color-fg-muted));
+  }
+
+.tabnav-tab .Counter {
+    margin-left: var(--control-small-gap,0.25rem);
+    color: inherit;
+  }
+
+/* Tabnav extras
+**
+** Tabnav extras are non-tab elements that sit in the tabnav. Usually they're
+** inline text or links. */
+
+.tabnav-extra {
+  display: inline-block;
+  padding-top: 10px;
+  margin-left: 10px;
+  font-size: var(--text-body-size-small,0.75rem);
+  color: var(--fgColor-muted,var(--color-fg-muted));
+}
+
+.tabnav-extra > .octicon {
+    margin-right: 2px;
+  }
+
+/* When tabnav-extra are anchors
+** stylelint-disable-next-line selector-no-qualifying-type */
+
+a.tabnav-extra:hover {
+  color: var(--fgColor-accent,var(--color-accent-fg));
+  text-decoration: none;
+}
+
+/* Tabnav buttons
+**
+** For when there are multiple buttons, space them out appropriately. Requires
+** the buttons to be floated or inline-block. */
+
+.tabnav-btn {
+  margin-left: var(--controlStack-medium-gap-condensed,0.5rem);
+}

package/app/components/primer/alpha/tab_nav.css.json

@@ -5,19 +5,19 @@
     ".tabnav-tabs",
     ".tabnav-tab",
     ".tabnav-tab.selected",
-    ".tabnav-tab[aria-current]:not([aria-current=false])",
-    ".tabnav-tab[aria-selected=true]",
+    ".tabnav-tab[aria-selected='true']",
+    ".tabnav-tab[aria-current]:not([aria-current='false'])",
     ".tabnav-tab.selected .octicon",
-    ".tabnav-tab[aria-current]:not([aria-current=false]) .octicon",
-    ".tabnav-tab[aria-selected=true] .octicon",
+    ".tabnav-tab[aria-selected='true'] .octicon",
+    ".tabnav-tab[aria-current]:not([aria-current='false']) .octicon",
     ".tabnav-tab:hover",
     ".tabnav-tab:focus",
     ".tabnav-tab:focus-visible",
-    ".tabnav-tab .octicon",
     ".tabnav-tab:active",
+    ".tabnav-tab .octicon",
     ".tabnav-tab .Counter",
     ".tabnav-extra",
-    ".tabnav-extra>.octicon",
+    ".tabnav-extra > .octicon",
     "a.tabnav-extra:hover",
     ".tabnav-btn"
   ]