@primer/css 20.8.4-rc.d69ccd9f → 21.0.0-rc.2c0bcb24

package/labels/index.scss

@@ -4,4 +4,3 @@
 @import './labels.scss';
 @import './states.scss';
 @import './counters.scss';
-@import './diffstat.scss';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/css",
-  "version": "20.8.4-rc.d69ccd9f",
+  "version": "21.0.0-rc.2c0bcb24",
   "description": "The CSS implementation of GitHub's Primer Design System",
   "homepage": "https://primer.style/css",
   "author": "GitHub, Inc.",
@@ -42,7 +42,7 @@
     "storybook": "cd docs && yarn && yarn storybook"
   },
   "dependencies": {
-    "@primer/primitives": "^7.11.1",
+    "@primer/primitives": "^7.11.2",
     "@primer/view-components": "^0.1.0"
   },
   "devDependencies": {
@@ -54,7 +54,7 @@
     "autoprefixer": "10.4.13",
     "chokidar-cli": "3.0.0",
     "cssstats": "4.0.5",
-    "eslint": "8.25.0",
+    "eslint": "8.35.0",
     "eslint-plugin-github": "4.6.0",
     "eslint-plugin-jest": "27.2.1",
     "eslint-plugin-prettier": "4.2.1",

package/actionlist/action-list-item-divider.scss

@@ -1,48 +0,0 @@
-// empty divider
-
-.ActionList-sectionDivider {
-  // has children
-  &:not(:empty) {
-    display: flex;
-    padding: ($spacer-1 * 1.5) $spacer-2;
-    font-size: $font-size-small;
-    font-weight: $font-weight-bold;
-    color: var(--color-fg-muted);
-    flex-direction: column;
-  }
-
-  // no children
-  &:empty {
-    display: block;
-    height: 1px;
-    padding: 0;
-    // stylelint-disable-next-line primer/spacing
-    margin: ($spacer-2 - 1px) ($spacer-2 * -1) $spacer-2;
-    list-style: none;
-    background: var(--color-action-list-item-inline-divider);
-    border: 0;
-  }
-
-  .ActionList-sectionDivider-title {
-    font-size: $font-size-small;
-    font-weight: $font-weight-bold;
-    color: var(--color-fg-muted);
-  }
-}
-
-.ActionList-sectionDivider--filled {
-  margin: $spacer-2 ($spacer-2 * -1);
-  background: var(--color-canvas-subtle);
-  border-top: $border-width $border-style var(--color-action-list-item-inline-divider);
-  border-bottom: $border-width $border-style var(--color-action-list-item-inline-divider);
-
-  // if no children, treat as divider
-  &:empty {
-    height: $spacer-2;
-    box-sizing: border-box;
-  }
-
-  &:first-child {
-    margin-top: 0;
-  }
-}

package/actionlist/action-list-item.scss

@@ -1,593 +0,0 @@
-// stylelint-disable max-nesting-depth, selector-max-specificity, selector-max-compound-selectors
-
-@mixin activeIndicatorLine($padding-left: -$actionList-item-padding-horizontal) {
-  position: absolute;
-  top: calc(50% - 12px);
-  left: $padding-left;
-  width: $spacer-1;
-  height: $spacer-4;
-  content: '';
-  background: var(--color-accent-fg);
-  border-radius: $border-radius;
-}
-
-// <li>
-.ActionList-item {
-  position: relative;
-  list-style: none;
-  background-color: transparent;
-  border-radius: $border-radius;
-
-  &:hover,
-  &:active {
-    cursor: pointer;
-  }
-
-  // only hover li without list as children
-  &:not(.ActionList-item--hasSubItem),
-  // target contents of first child li if sub-item (li wraps item label + nested ul)
-  &.ActionList-item--hasSubItem > .ActionList-content {
-    @media (hover: hover) {
-      &:hover {
-        cursor: pointer;
-        background-color: var(--color-action-list-item-default-hover-bg);
-
-        &:not(.ActionList-item--navActive):not(:focus-visible) {
-          // Support for "Windows high contrast mode"
-          outline: $border-style $border-width transparent;
-          outline-offset: -$border-width;
-          // stylelint-disable-next-line primer/box-shadow
-          box-shadow: inset 0 0 0 $border-width var(--color-action-list-item-default-active-border);
-        }
-      }
-    }
-
-    &:active {
-      background: var(--color-action-list-item-default-active-bg);
-
-      &:not(.ActionList-item--navActive) {
-        // Support for "Windows high contrast mode" https://sarahmhigley.com/writing/whcm-quick-tips/
-        outline: $border-style $border-width transparent;
-        outline-offset: -$border-width;
-        // stylelint-disable-next-line primer/box-shadow
-        box-shadow: inset 0 0 0 $border-width var(--color-action-list-item-default-active-border);
-      }
-    }
-
-    // hide dividers
-
-    @media (hover: hover) {
-      &:hover {
-        .ActionList-item-label::before,
-        + .ActionList-item .ActionList-item-label::before {
-          visibility: hidden;
-        }
-
-        .ActionList-item-descriptionWrap--inline::before,
-        + .ActionList-item .ActionList-item-descriptionWrap--inline::before {
-          visibility: hidden;
-        }
-      }
-    }
-    // stylelint-disable-next-line no-duplicate-selectors
-    &:active {
-      .ActionList-item-label::before,
-      + .ActionList-item .ActionList-item-label::before {
-        visibility: hidden;
-      }
-    }
-  }
-
-  // target contents of li if sub-item (li wraps item label + nested ul)
-  // collapse styles here
-  &.ActionList-item--hasSubItem {
-    // first child
-    > .ActionList-content {
-      z-index: 1;
-
-      @media (hover: hover) {
-        &:hover {
-          background-color: var(--color-action-list-item-default-hover-bg);
-        }
-      }
-
-      &:active {
-        background-color: var(--color-action-list-item-default-active-bg);
-      }
-    }
-  }
-
-  // Make sure that the first visible item isn't a divider
-  &[hidden] + .ActionList-sectionDivider {
-    display: none;
-  }
-
-  // Autocomplete [aria-selected] items
-
-  &[aria-selected='true'] {
-    font-weight: $font-weight-normal;
-    background: var(--color-action-list-item-default-selected-bg);
-
-    @media (hover: hover) {
-      &:hover {
-        background-color: var(--color-action-list-item-default-hover-bg);
-      }
-    }
-
-    &::before,
-    + .ActionList-item::before {
-      visibility: hidden;
-    }
-
-    // blue accent line
-    &::after {
-      @include activeIndicatorLine(-$spacer-1);
-    }
-  }
-
-  // active state [aria-current]
-
-  &.ActionList-item--navActive {
-    &:not(.ActionList-item--subItem) {
-      .ActionList-item-label {
-        font-weight: $font-weight-bold;
-      }
-    }
-
-    &:not(.ActionList-item--danger) {
-      background: var(--color-action-list-item-default-selected-bg);
-
-      @media (hover: hover) {
-        &:hover {
-          background-color: var(--color-action-list-item-default-hover-bg);
-        }
-      }
-
-      &::before,
-      + .ActionList-item::before {
-        visibility: hidden;
-      }
-
-      // blue accent line
-      &::after {
-        @include activeIndicatorLine;
-      }
-    }
-  }
-
-  // checkbox item [aria-checked]
-  // listbox [aria-selected]
-
-  &[aria-checked='true'],
-  &[aria-selected='true'] {
-    // multiselect checkmark
-    .ActionList-item-multiSelectCheckmark {
-      visibility: visible;
-      opacity: 1;
-      transition: visibility 0 linear 0, opacity $actionList-item-checkmark-transition-timing;
-    }
-
-    // singleselect checkmark
-    .ActionList-item-singleSelectCheckmark {
-      visibility: visible;
-
-      @media screen and (prefers-reduced-motion: no-preference) {
-        animation: checkmarkIn 200ms cubic-bezier(0.11, 0, 0.5, 0) forwards;
-      }
-    }
-
-    // checkbox
-    .ActionList-item-multiSelectIcon {
-      .ActionList-item-multiSelectIconRect {
-        fill: var(--color-accent-fg);
-        stroke: var(--color-accent-fg);
-        stroke-width: $border-width;
-      }
-
-      .ActionList-item-multiSelectCheckmark {
-        fill: var(--color-fg-on-emphasis);
-      }
-    }
-  }
-
-  &[aria-checked='false'],
-  &[aria-selected='false'] {
-    // multiselect checkmark
-    .ActionList-item-multiSelectCheckmark {
-      visibility: hidden;
-      opacity: 0;
-      transition:
-        visibility 0 linear $actionList-item-checkmark-transition-timing,
-        opacity $actionList-item-checkmark-transition-timing;
-    }
-
-    // singleselect checkmark
-    .ActionList-item-singleSelectCheckmark {
-      visibility: hidden;
-      transition: visibility 0s linear 200ms;
-      clip-path: inset(16px 0 0 0);
-
-      @media screen and (prefers-reduced-motion: no-preference) {
-        animation: checkmarkOut 200ms cubic-bezier(0.11, 0, 0.5, 0) forwards;
-      }
-    }
-
-    // checkbox
-    .ActionList-item-multiSelectIcon {
-      .ActionList-item-multiSelectIconRect {
-        fill: var(--color-canvas-default);
-        stroke: var(--color-border-default);
-        stroke-width: $border-width;
-      }
-    }
-
-    .ActionList-item-multiSelectIconRect {
-      fill: var(--color-canvas-default);
-      border: $border-width $border-style var(--color-border-default);
-    }
-  }
-
-  @keyframes checkmarkIn {
-    from {
-      clip-path: inset(16px 0 0 0);
-    }
-
-    to {
-      clip-path: inset(0 0 0 0);
-    }
-  }
-
-  @keyframes checkmarkOut {
-    from {
-      clip-path: inset(0 0 0 0);
-    }
-
-    to {
-      clip-path: inset(16px 0 0 0);
-    }
-  }
-
-  // disabled
-  &[aria-disabled='true'] {
-    .ActionList-content {
-      .ActionList-item-label,
-      .ActionList-item-description {
-        color: var(--color-primer-fg-disabled);
-      }
-
-      .ActionList-item-visual {
-        fill: var(--color-primer-fg-disabled);
-      }
-    }
-
-    @media (hover: hover) {
-      &:hover {
-        cursor: not-allowed;
-        background-color: transparent;
-      }
-    }
-  }
-
-  // variants
-
-  // danger
-  &.ActionList-item--danger {
-    .ActionList-item-label {
-      color: var(--color-danger-fg);
-    }
-
-    .ActionList-item-visual {
-      color: var(--color-danger-fg);
-    }
-
-    @media (hover: hover) {
-      &:hover {
-        background: var(--color-action-list-item-danger-hover-bg);
-
-        .ActionList-item-label {
-          color: var(--color-action-list-item-danger-hover-text);
-        }
-      }
-    }
-
-    .ActionList-content {
-      &:active {
-        background: var(--color-action-list-item-danger-active-bg);
-      }
-    }
-  }
-
-  // if nested list exists, remove default padding
-  .ActionList {
-    // stylelint-disable-next-line primer/spacing
-    padding: unset;
-  }
-}
-
-// button or a href
-.ActionList-content {
-  position: relative;
-  display: grid;
-  width: 100%;
-  // stylelint-disable-next-line primer/spacing
-  padding: $actionList-item-padding-vertical $actionList-item-padding-horizontal;
-  font-size: $body-font-size;
-  font-weight: $font-weight-normal;
-  color: var(--color-fg-default);
-  text-align: left;
-  user-select: none;
-  background-color: transparent;
-  // stylelint-disable-next-line declaration-property-value-disallowed-list
-  border: none;
-  border-radius: $border-radius;
-  transition: $actionList-item-bg-transition;
-  touch-action: manipulation;
-  touch-action: manipulation;
-  -webkit-tap-highlight-color: transparent;
-  grid-template-rows: min-content;
-  grid-template-areas: 'leadingAction leadingVisual label trailingVisual trailingAction';
-  grid-template-columns: min-content min-content minmax(0, auto) min-content min-content;
-  align-items: start;
-
-  // column-gap persists with empty grid-areas, margin applies only when children exist
-  > :not(:last-child) {
-    margin-right: $spacer-2;
-  }
-
-  // state
-
-  &:hover {
-    text-decoration: none;
-  }
-
-  &:focus {
-    @include focusOutline;
-
-    // remove fallback :focus if :focus-visible is supported
-    &:not(:focus-visible) {
-      outline: solid 1px transparent;
-    }
-  }
-
-  // default focus state
-  &:focus-visible {
-    @include focusOutline;
-  }
-
-  // disabled
-  &[aria-disabled='true'] {
-    .ActionList-item-label,
-    .ActionList-item-description {
-      color: var(--color-primer-fg-disabled);
-    }
-
-    .ActionList-item-visual {
-      fill: var(--color-primer-fg-disabled);
-    }
-
-    @media (hover: hover) {
-      &:hover {
-        cursor: not-allowed;
-        background-color: transparent;
-      }
-    }
-  }
-
-  // collapsible item [aria-expanded]
-
-  // nesting (single level)
-  // target items inside expanded subgroups
-  &[aria-expanded] {
-    + .ActionList--subGroup {
-      @media screen and (prefers-reduced-motion: no-preference) {
-        transition: opacity 160ms cubic-bezier(0.25, 1, 0.5, 1), transform 160ms cubic-bezier(0.25, 1, 0.5, 1);
-      }
-
-      .ActionList-content {
-        padding-left: $spacer-4;
-      }
-    }
-
-    // has 16px leading visual
-    &.ActionList-content--visual16 + .ActionList--subGroup {
-      .ActionList-content {
-        padding-left: $spacer-5;
-      }
-    }
-
-    // has 20px leading visual
-    &.ActionList-content--visual20 + .ActionList--subGroup {
-      .ActionList-content {
-        padding-left: $spacer-2 * 4.5; // 36px
-      }
-    }
-
-    // has 24px leading visual
-    &.ActionList-content--visual24 + .ActionList--subGroup {
-      .ActionList-content {
-        padding-left: $spacer-6;
-      }
-    }
-  }
-
-  &[aria-expanded='true'] {
-    .ActionList-item-collapseIcon {
-      transition: transform 120ms linear;
-      transform: scaleY(-1);
-    }
-
-    + .ActionList--subGroup {
-      height: auto;
-      overflow: visible;
-      visibility: visible;
-      opacity: 1;
-      transform: translateY(0);
-    }
-
-    &.ActionList-content--hasActiveSubItem {
-      > .ActionList-item-label {
-        font-weight: $font-weight-bold;
-      }
-    }
-  }
-
-  &[aria-expanded='false'] {
-    .ActionList-item-collapseIcon {
-      transition: transform 120ms linear;
-      transform: scaleY(1);
-    }
-
-    + .ActionList--subGroup {
-      height: 0;
-      overflow: hidden;
-      visibility: hidden;
-      opacity: 0;
-      transform: translateY(-$spacer-3);
-    }
-
-    // show active indicator on parent collapse if child is active
-    &.ActionList-content--hasActiveSubItem {
-      background: var(--color-action-list-item-default-selected-bg);
-
-      .ActionList-item-label {
-        font-weight: $font-weight-bold;
-      }
-
-      &::before,
-      + .ActionList-item::before {
-        visibility: hidden;
-      }
-
-      // blue accent line
-      &::after {
-        @include activeIndicatorLine;
-      }
-    }
-  }
-
-  // sizes
-
-  &.ActionList-content--sizeMedium {
-    // 44px total height
-    // stylelint-disable-next-line primer/spacing
-    padding: $actionList-item-padding-vertical-md $actionList-item-padding-horizontal;
-  }
-
-  &.ActionList-content--sizeLarge {
-    // 48px total height
-    // stylelint-disable-next-line primer/spacing
-    padding: $actionList-item-padding-vertical-lg $actionList-item-padding-horizontal;
-  }
-
-  &.ActionList-content--fontSmall {
-    font-size: $font-size-small;
-  }
-
-  // On pointer:coarse (mobile), all list items are large
-  @media (pointer: coarse) {
-    // stylelint-disable-next-line primer/spacing
-    padding: $actionList-item-padding-vertical-lg $actionList-item-padding-horizontal;
-  }
-
-  &.ActionList-content--blockDescription {
-    // if leading/trailing visual, align with first line of content
-    .ActionList-item-visual {
-      place-self: start;
-    }
-  }
-}
-
-// place children on grid
-
-.ActionList-item-action--leading {
-  grid-area: leadingAction;
-}
-
-.ActionList-item-visual--leading {
-  grid-area: leadingVisual;
-}
-
-.ActionList-item-label {
-  grid-area: label;
-}
-
-.ActionList-item-visual--trailing {
-  grid-area: trailingVisual;
-}
-
-.ActionList-item-action--trailing {
-  grid-area: trailingAction;
-}
-
-// wrapper span
-// default block
-.ActionList-item-descriptionWrap {
-  grid-area: label;
-  display: flex;
-  flex-direction: column;
-
-  .ActionList-item-description {
-    margin-top: $spacer-1;
-  }
-
-  .ActionList-item-label {
-    font-weight: $font-weight-bold;
-  }
-}
-
-// inline
-.ActionList-item-descriptionWrap--inline {
-  position: relative;
-  flex-direction: row;
-  align-items: baseline;
-
-  .ActionList-item-description {
-    // stylelint-disable-next-line primer/spacing
-    margin-left: $actionList-item-padding-horizontal;
-  }
-}
-
-// description
-.ActionList-item-description {
-  font-size: $font-size-small;
-  font-weight: $font-weight-normal;
-  line-height: $lh-default;
-  color: var(--color-fg-muted);
-}
-
-// helper for grid alignment with multi-line content
-// span wrapping svg or text
-.ActionList-item-visual,
-.ActionList-item-action {
-  display: flex;
-  min-height: $actionList-item-height-sm;
-  color: var(--color-fg-muted); // if visual is text
-  pointer-events: none;
-  fill: var(--color-fg-muted);
-  align-items: center;
-}
-
-// text
-// stylelint-disable-next-line no-duplicate-selectors
-.ActionList-item-label {
-  position: relative; // for pseudo dividers
-  font-weight: $font-weight-normal;
-  // we need a strict value here for grid alignment
-  // stylelint-disable-next-line primer/typography
-  line-height: $actionList-item-label-line-height;
-  color: var(--color-fg-default);
-}
-
-.ActionList-item-label--truncate {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-// nested lists (only supports 1 level currently)
-// target ActionList-item--subItem for padding-left to maintain :active :after state
-
-// TODO: remove with PVC implementation
-.ActionList-item--subItem > .ActionList-content {
-  font-size: $font-size-small;
-}