@primer/css 20.3.0-rc.dea587d3 → 20.3.0

package/dist/stats/segmented-control.json

@@ -0,0 +1 @@
+{"size":2604,"gzipSize":743,"humanizedSize":"3KB","humanizedGzipSize":"743B","rules":{"total":20,"size":{"graph":[4,9,2,2,3,7,1,8,1,5,1,2,1,2,1,2,1,1,8,1],"max":9,"average":3.1},"selectorByRuleSizes":[{"selector":".SegmentedControl-button","declarations":9},{"selector":".SegmentedControl-button::after","declarations":8},{"selector":".SegmentedControl-content","declarations":8},{"selector":".SegmentedControl-button+.SegmentedControl-button::before","declarations":7},{"selector":".SegmentedControl-text[data-content]::before","declarations":5},{"selector":".SegmentedControl","declarations":4},{"selector":".SegmentedControl-button.SegmentedControl-button--selected","declarations":3},{"selector":".SegmentedControl--iconOnly-whenNarrow .SegmentedControl-content","declarations":2},{"selector":".SegmentedControl-button--iconOnly .SegmentedControl-content","declarations":2},{"selector":".SegmentedControl--fullWidth .SegmentedControl-button","declarations":2},{"selector":".SegmentedControl-button:not(.SegmentedControl-button--selected):active .SegmentedControl-content","declarations":2},{"selector":".SegmentedControl-button:not(.SegmentedControl-button--selected):hover .SegmentedControl-content","declarations":2},{"selector":".SegmentedControl-button--iconOnly,.SegmentedControl--iconOnly-whenNarrow .SegmentedControl-button","declarations":1},{"selector":".SegmentedControl-button","declarations":1},{"selector":".SegmentedControl--iconOnly-whenNarrow .SegmentedControl-text","declarations":1},{"selector":".SegmentedControl--iconOnly-whenNarrow .SegmentedControl-button","declarations":1},{"selector":".SegmentedControl-button--iconOnly","declarations":1},{"selector":".SegmentedControl--fullWidth","declarations":1},{"selector":".SegmentedControl-leadingVisual","declarations":1},{"selector":".SegmentedControl-button.SegmentedControl-button--selected::before,.SegmentedControl-button.SegmentedControl-button--selected+.SegmentedControl-button::before","declarations":1}]},"selectors":{"total":22,"type":0,"class":22,"id":0,"pseudoClass":2,"pseudoElement":5,"values":[".SegmentedControl",".SegmentedControl-button",".SegmentedControl-button:not(.SegmentedControl-button--selected):hover .SegmentedControl-content",".SegmentedControl-button:not(.SegmentedControl-button--selected):active .SegmentedControl-content",".SegmentedControl-button.SegmentedControl-button--selected",".SegmentedControl-button+.SegmentedControl-button::before",".SegmentedControl-button.SegmentedControl-button--selected::before",".SegmentedControl-button.SegmentedControl-button--selected+.SegmentedControl-button::before",".SegmentedControl-content",".SegmentedControl-leadingVisual",".SegmentedControl-text[data-content]::before",".SegmentedControl--fullWidth",".SegmentedControl--fullWidth .SegmentedControl-button",".SegmentedControl-button--iconOnly",".SegmentedControl-button--iconOnly .SegmentedControl-content",".SegmentedControl--iconOnly-whenNarrow .SegmentedControl-button",".SegmentedControl--iconOnly-whenNarrow .SegmentedControl-content",".SegmentedControl--iconOnly-whenNarrow .SegmentedControl-text",".SegmentedControl-button",".SegmentedControl-button::after",".SegmentedControl-button--iconOnly",".SegmentedControl--iconOnly-whenNarrow .SegmentedControl-button"],"specificity":{"max":40,"average":18.40909090909091}},"declarations":{"total":62,"unique":49,"uniqueToTotalRatio":0.7903225806451613,"properties":{"display":["inline-flex","inline-flex","flex","block","flex","none"],"background-color":["var(--color-segmented-control-bg)","transparent","var(--color-segmented-control-button-hover-bg)","var(--color-segmented-control-button-active-bg)","var(--color-btn-bg)"],"border-radius":["6px","6px","6px"],"box-shadow":["inset 0 0 0 1px var(--color-border-default)"],"position":["relative","absolute","absolute"],"height":["32px","16px","100%","0","100%"],"padding":["calc(4px - 1px)","0 8px","0","0"],"font-size":["14px"],"color":["var(--color-fg-default)","var(--color-fg-muted)"],"border":["1px solid transparent"],"transition-duration":["80ms","0"],"font-weight":["600","600"],"border-color":["var(--color-segmented-control-button-selected-border)","transparent"],"inset":["1px 0 0 calc(1px*-1)"],"margin-top":["6px"],"content":["\"\"","attr(data-content)","\"\""],"border-left":["1px solid var(--color-border-default)"],"transition":["border-color 160ms cubic-bezier(0.3, 0.1, 0.5, 1)","background-color 160ms cubic-bezier(0.3, 0.1, 0.5, 1)"],"align-items":["center"],"justify-content":["center","center"],"gap":["8px"],"visibility":["hidden"],"flex":["1","1","1"],"width":["32px","32px","100%"],"min-width":["44px","unset"],"top":["50%"],"left":["50%"],"min-height":["44px"],"transform":["translateX(-50%) translateY(-50%)"]}},"mediaQueries":{"total":2,"unique":2,"values":["(max-width: 768px)","(pointer: coarse)"],"contents":[{"value":"(max-width: 768px)","rules":{"total":3,"size":{"graph":[1,2,1],"max":2,"average":1.3333333333333333},"selectorByRuleSizes":[{"selector":",.SegmentedControl--iconOnly-whenNarrow .SegmentedControl-content","declarations":2},{"selector":",.SegmentedControl--iconOnly-whenNarrow .SegmentedControl-text","declarations":1},{"selector":".SegmentedControl--iconOnly-whenNarrow .SegmentedControl-button","declarations":1}]},"selectors":{"total":3,"type":0,"class":3,"id":0,"pseudoClass":0,"pseudoElement":0,"values":[".SegmentedControl--iconOnly-whenNarrow .SegmentedControl-button",".SegmentedControl--iconOnly-whenNarrow .SegmentedControl-content",".SegmentedControl--iconOnly-whenNarrow .SegmentedControl-text"],"specificity":{"max":20,"average":20}},"declarations":{"total":4,"unique":4,"uniqueToTotalRatio":1,"properties":{"width":["32px"],"padding":["0"],"flex":["1"],"display":["none"]}}},{"value":"(pointer: coarse)","rules":{"total":3,"size":{"graph":[1,8,1],"max":8,"average":3.3333333333333335},"selectorByRuleSizes":[{"selector":",.SegmentedControl-button::after","declarations":8},{"selector":",.SegmentedControl-button--iconOnly,.SegmentedControl--iconOnly-whenNarrow .SegmentedControl-button","declarations":1},{"selector":".SegmentedControl-button","declarations":1}]},"selectors":{"total":4,"type":0,"class":4,"id":0,"pseudoClass":0,"pseudoElement":1,"values":[".SegmentedControl-button",".SegmentedControl-button::after",".SegmentedControl-button--iconOnly",".SegmentedControl--iconOnly-whenNarrow .SegmentedControl-button"],"specificity":{"max":20,"average":12.75}},"declarations":{"total":10,"unique":10,"uniqueToTotalRatio":1,"properties":{"min-width":["44px","unset"],"position":["absolute"],"top":["50%"],"left":["50%"],"width":["100%"],"height":["100%"],"min-height":["44px"],"content":["\"\""],"transform":["translateX(-50%) translateY(-50%)"]}}}]}}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/css",
-  "version": "20.3.0-rc.dea587d3",
+  "version": "20.3.0",
   "description": "The CSS implementation of GitHub's Primer Design System",
   "homepage": "https://primer.style/css",
   "author": "GitHub, Inc.",
@@ -41,7 +41,7 @@
     "storybook": "cd docs && yarn && yarn storybook"
   },
   "dependencies": {
-    "@primer/primitives": "^7.8.4"
+    "@primer/primitives": "^7.9.0"
   },
   "devDependencies": {
     "@changesets/changelog-github": "0.4.5",
@@ -59,7 +59,7 @@
     "filesize": "9.0.11",
     "front-matter": "4.0.2",
     "fs-extra": "10.1.0",
-    "globby": "13.1.1",
+    "globby": "13.1.2",
     "jest": "28.1.3",
     "js-yaml": "4.1.0",
     "postcss": "8.4.14",
@@ -70,7 +70,7 @@
     "postcss-simple-vars": "6.0.3",
     "prettier": "2.7.1",
     "semver": "7.3.7",
-    "stylelint": "14.8.5",
+    "stylelint": "14.9.1",
     "table": "6.8.0"
   },
   "jest": {

package/segmented-control/README.md

@@ -0,0 +1,25 @@
+---
+bundle: "segmented-control"
+generated: true
+---
+
+# Primer CSS: `segmented-control` bundle
+
+## Usage
+
+Primer CSS source files are written in [SCSS]. To include this Primer CSS module in your own build, ensure that your `node_modules` directory is listed in your Sass include paths, then import it with:
+
+```scss
+@import "@primer/css/segmented-control/index.scss";
+```
+
+## Build
+
+The `@primer/css` npm package includes a standalone CSS build of this module in `dist/segmented-control.css`.
+
+## License
+
+[MIT](https://github.com/primer/css/blob/main/LICENSE) © [GitHub](https://github.com/)
+
+
+[scss]: https://sass-lang.com/documentation/syntax#scss

package/segmented-control/index.scss

@@ -0,0 +1,3 @@
+// support files
+@import '../support/index.scss';
+@import './segmented-control.scss';

package/segmented-control/segmented-control.scss

@@ -0,0 +1,159 @@
+// SegmentedControl
+
+.SegmentedControl {
+  display: inline-flex;
+  background-color: var(--color-segmented-control-bg);
+  // stylelint-disable-next-line primer/borders
+  border-radius: var(--primer-borderRadius-medium, $border-radius);
+  // stylelint-disable-next-line primer/box-shadow
+  box-shadow: var(--primer-borderInset-thin, inset 0 0 0 $border-width) var(--color-border-default);
+}
+
+// Button -----------------------------------------
+
+.SegmentedControl-button {
+  position: relative;
+  display: inline-flex;
+  height: var(--primer-control-medium-size, 32px);
+  // stylelint-disable-next-line primer/spacing
+  padding: calc(var(--primer-control-xsmall-paddingInline-condensed, 4px) - var(--primer-borderWidth-thin, 1px));
+  // stylelint-disable-next-line primer/typography
+  font-size: var(--primer-text-body-size-medium, $body-font-size);
+  color: var(--color-fg-default);
+  background-color: transparent;
+  // stylelint-disable-next-line primer/borders
+  border: var(--primer-borderWidth-thin, $border-width) $border-style transparent;
+  // stylelint-disable-next-line primer/borders
+  border-radius: var(--primer-borderRadius-medium, $border-radius);
+
+  &:not(.SegmentedControl-button--selected):hover .SegmentedControl-content {
+    background-color: var(--color-segmented-control-button-hover-bg);
+    transition-duration: var(--primer-duration-fast, 80ms);
+  }
+
+  &:not(.SegmentedControl-button--selected):active .SegmentedControl-content {
+    background-color: var(--color-segmented-control-button-active-bg);
+    transition-duration: 0;
+  }
+
+  // Selected
+
+  &.SegmentedControl-button--selected {
+    // stylelint-disable-next-line primer/typography
+    font-weight: var(--base-text-weight-semibold, $font-weight-bold);
+    background-color: var(--color-btn-bg);
+    border-color: var(--color-segmented-control-button-selected-border);
+  }
+
+  // Divider
+
+  // stylelint-disable-next-line scss/selector-no-redundant-nesting-selector
+  & + .SegmentedControl-button::before {
+    position: absolute;
+    inset: var(--primer-borderWidth-thin, 1px) 0 0 calc(var(--primer-borderWidth-thin, 1px) * -1);
+    height: var(--primer-text-body-size-large, 16px);
+    // stylelint-disable-next-line primer/spacing
+    margin-top: var(--primer-control-medium-paddingBlock, 6px);
+    content: '';
+    // stylelint-disable-next-line primer/borders
+    border-left: var(--primer-borderWidth-thin, $border-width) $border-style var(--color-border-default);
+    transition: border-color var(--primer-duration-medium, 160ms) cubic-bezier(0.3, 0.1, 0.5, 1);
+  }
+
+  &.SegmentedControl-button--selected::before,
+  &.SegmentedControl-button--selected + .SegmentedControl-button::before {
+    border-color: transparent;
+  }
+}
+
+// Content -----------------------------------------
+
+.SegmentedControl-content {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--primer-control-medium-gap, $spacer-2);
+  height: 100%;
+  // stylelint-disable-next-line primer/spacing
+  padding: 0 var(--primer-control-medium-paddingInline-condensed, 8px);
+  // stylelint-disable-next-line primer/borders
+  border-radius: var(--primer-borderRadius-medium, $border-radius);
+  transition: background-color var(--primer-duration-medium, 160ms) cubic-bezier(0.3, 0.1, 0.5, 1);
+}
+
+// Leading visual -----------------------------------------
+
+.SegmentedControl-leadingVisual {
+  color: var(--color-fg-muted);
+}
+
+// Text -----------------------------------------
+
+.SegmentedControl-text {
+  // renders a visibly hidden "copy" of the text in bold, reserving box space for when text becomes bold on selected
+  &[data-content]::before {
+    display: block;
+    height: 0;
+    // stylelint-disable-next-line primer/typography
+    font-weight: var(--base-text-weight-semibold, $font-weight-bold);
+    visibility: hidden;
+    content: attr(data-content);
+  }
+}
+
+// Variants -----------------------------------------
+
+// fullWidth
+.SegmentedControl--fullWidth {
+  display: flex;
+
+  .SegmentedControl-button {
+    flex: 1;
+    justify-content: center;
+  }
+}
+
+// Icon only
+.SegmentedControl-button--iconOnly {
+  width: var(--primer-control-medium-size, 32px);
+
+  .SegmentedControl-content {
+    padding: 0;
+    flex: 1;
+  }
+}
+
+// Icon only when narrow
+@media (max-width: $width-md) {
+  .SegmentedControl--iconOnly-whenNarrow {
+    .SegmentedControl-button {
+      width: var(--primer-control-medium-size, 32px);
+    }
+
+    .SegmentedControl-content {
+      padding: 0;
+      flex: 1;
+    }
+
+    .SegmentedControl-text {
+      display: none;
+    }
+  }
+}
+
+// Increase touch target
+@media (pointer: coarse) {
+  .SegmentedControl-button {
+    min-width: var(--primer-control-minTarget-coarse, 44px);
+
+    &::after {
+      @include minTouchTarget($min-height: var(--primer-control-minTarget-coarse, 44px));
+    }
+  }
+
+  // reset for icon-only buttons
+  .SegmentedControl-button--iconOnly,
+  .SegmentedControl--iconOnly-whenNarrow .SegmentedControl-button {
+    min-width: unset;
+  }
+}