@primer/css 0.0.0-202198211147 → 0.0.0-20220106235309

package/actionlist/action-list-item.scss

@@ -1,286 +1,513 @@
-// waiting on https://github.com/primer/primitives/pull/256 for these primitives
-$actionList-item-hover-bg: #f0f3f5;
-$actionList-item-active-bg: #e8ebed;
-$actionList-item-selected-bg: #f0f3f5;
-$actionList-item-focus-bg: #e0e4e7;
-$actionList-item-divider: #e9e9ed;
-
-$actionList-item-danger-hover-bg: #fff0f2;
-$actionList-item-danger-active-bg: #ffebed;
-$actionList-item-danger-focus-bg: #ffdbe0;
-
-// expanded from src/support/variables/layout.scss
-// adds 12px to the scale as of https://github.com/github/design-systems/issues/992
-//
-// https://github.com/github/design-systems/issues/1272
-
-$s-20: 20px;
-$s-28: 28px;
-
-// CSS Easing
-
-$ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
-$ease-out-cubic: cubic-bezier(0.33, 1, 0.68, 1);
-$ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
-// $actionList-item-padding-vertical: (($spacer-5 - $s-20) / 2); hmmmmm
-$actionList-item-padding-vertical: 6px;
-$actionList-item-padding-horizontal: $spacer-2;
-$actionList-item-bg-transition: background 33.333ms linear; // 2 frames on a 60hz monitor
-
-// li
-.actionList-item {
+@mixin focusOutline {
   position: relative;
-  // hide divider of item and next item on hover & active
-  &:hover {
-    .actionList-item-label:before,
-    + .actionList-item .actionList-item-label:before {
-      visibility: hidden;
-    }
-  }
+  z-index: 1;
+  outline: none;
+  box-shadow: 0 0 0 2px var(--color-accent-fg); // this color breaks convention
+}
 
-  &:active {
-    .actionList-item-label:before,
-    + .actionList-item .actionList-item-label:before {
-      visibility: hidden;
-    }
-  }
+@mixin activeIndicatorLine {
+  position: absolute;
+  top: calc(50% - 12px);
+  left: -$actionList-item-padding-horizontal;
+  width: $spacer-1;
+  height: $spacer-4;
+  content: '';
+  background: var(--color-accent-fg);
+  border-radius: $border-radius;
+}
 
-  // span or a href
-  .actionList-item-content {
-    display: grid;
-    padding: $actionList-item-padding-vertical $actionList-item-padding-horizontal;
-    grid-template-rows: minmax(20px, max-content); // 20px + 12px padding [32]
-    grid-template-columns: minmax(min-content, 100%); // default one column
-    column-gap: $spacer-2;
-    align-items: center;
-    position: relative;
-    border-radius: $border-radius-2;
-    font-weight: $font-weight-normal;
-    color: var(--color-fg-default);
-    user-select: none;
-    transition: $actionList-item-bg-transition;
-    // vini: https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-tap-highlight-color
-    // -webkit-tap-highlight-color: transparent;
+// <li>
+.ActionList-item {
+  position: relative;
+  list-style: none;
+  background-color: transparent;
+  border-radius: $border-radius;
 
-    &:hover {
-      text-decoration: none;
-    }
+  &:hover,
+  &:active {
+    cursor: pointer;
 
-    &:focus-visible {
-      outline: none;
-      box-shadow: 0 0 0 2px var(--color-accent-fg); // this color breaks convention
-      position: relative;
-      z-index: 1;
+    // a href
+    .ActionList-content {
+      text-decoration: none;
     }
+  }
 
-    // desktop
-    @media (hover: hover) and (pointer: fine) {
-      &:hover {
-        background: $actionList-item-hover-bg;
-        cursor: pointer;
-      }
+  // only hover li without list as children
+  &:not(.ActionList-item--hasSubItem) {
+    &:hover {
+      cursor: pointer;
+      background-color: var(--color-action-list-item-default-hover-bg);
     }
 
     &:active {
-      background: $actionList-item-active-bg;
+      background: var(--color-action-list-item-default-active-bg);
 
       @media screen and (prefers-reduced-motion: no-preference) {
-        animation: actionList-item-active-bg 4s forwards $ease-out-cubic;
+        animation: ActionList-item-active-bg 4s forwards cubic-bezier(0.33, 1, 0.68, 1);
       }
 
-      @keyframes actionList-item-active-bg {
-        0% {
-        }
+      // stylelint-disable primer/box-shadow
+      @keyframes ActionList-item-active-bg {
+        // stylelint-disable-next-line max-nesting-depth
         50% {
-          transform: scale(1);
           box-shadow: inset 0 0 0 rgba(#000, 0.04);
+          transform: scale(1);
         }
+
+        // stylelint-disable-next-line max-nesting-depth
         100% {
-          transform: scale(0.97);
           box-shadow: inset 0 3px 9px rgba(#000, 0.04);
+          transform: scale(0.97);
         }
       }
+      // stylelint-enable primer/box-shadow
     }
 
-    // sizes
+    &:hover,
+    &:active {
+      // hide dividers
+      // stylelint-disable-next-line selector-max-specificity
+      .ActionList-item-label::before,
+      + .ActionList-item .ActionList-item-label::before {
+        visibility: hidden;
+      }
+    }
+  }
 
-    &.actionList-item-content--sizeMedium {
-      grid-template-rows: minmax(28px, max-content); // 28px + 12px padding [40]
+  // target contents of li if sub-item (li wraps item label + nested ul)
+  // collapse styles here
+  &.ActionList-item--hasSubItem {
+    // first child
+    > .ActionList-content {
+      &:hover {
+        background-color: var(--color-action-list-item-default-hover-bg);
+      }
     }
+  }
 
-    &.actionList-item-content--sizeLarge {
-      grid-template-rows: minmax(36px, max-content); // 36px + 12px padding [48]
+  // active state [aria-current]
+
+  &.ActionList-item--navActive {
+    &:not(.ActionList-item--subItem) {
+      .ActionList-item-label {
+        font-weight: $font-weight-bold;
+      }
     }
 
-    // On pointer:coarse (mobile), all list items are large
-    @media (pointer: coarse) {
-      grid-template-rows: minmax(36px, max-content);
+    &:not(.ActionList-item--danger) {
+      background: var(--color-action-list-item-default-selected-bg);
+
+      &:hover {
+        background-color: var(--color-action-list-item-default-hover-bg);
+      }
+
+      // stylelint-disable-next-line selector-max-specificity
+      &::before,
+      + .ActionList-item::before {
+        visibility: hidden;
+      }
+
+      // blue accent line
+      &::after {
+        @include activeIndicatorLine;
+      }
     }
+  }
 
-    // variants
+  // collapsible item [aria-expanded]
 
-    &.actionList-item-content--danger {
-      .actionList-item-label {
-        color: var(--color-danger-fg);
+  // nesting (single level)
+  // target items inside expanded subgroups
+  &[aria-expanded] {
+    .ActionList--subGroup {
+      transition: opacity 160ms cubic-bezier(0.25, 1, 0.5, 1), transform 160ms cubic-bezier(0.25, 1, 0.5, 1);
+
+      @media (prefers-reduced-motion) {
+        transition: none;
       }
 
-      @media (hover: hover) and (pointer: fine) {
-        &:hover {
-          background: var(--color-danger-subtle);
-        }
+      .ActionList-content {
+        padding-left: $spacer-4;
       }
+    }
 
-      &:active {
-        background: var(--color-danger-subtle);
+    // has 16px leading visual
+    .ActionList-content--visual16 + .ActionList--subGroup {
+      // stylelint-disable-next-line selector-max-compound-selectors, selector-max-specificity
+      .ActionList-content {
+        padding-left: $spacer-5;
       }
     }
 
-    // children grid definitions
+    // has 20px leading visual
+    .ActionList-content--visual20 + .ActionList--subGroup {
+      // stylelint-disable-next-line selector-max-compound-selectors, selector-max-specificity
+      .ActionList-content {
+        padding-left: $spacer-2 * 4.5; // 36px
+      }
+    }
 
-    &.actionList-item-content--blockDescription {
-      // if leading/trailing visual, align with first line of content
-      .actionList-item-visual {
-        place-self: start;
+    // has 24px leading visual
+    .ActionList-content--visual24 + .ActionList--subGroup {
+      // stylelint-disable-next-line selector-max-compound-selectors, selector-max-specificity
+      .ActionList-content {
+        padding-left: $spacer-6;
       }
     }
+  }
 
-    // leading visual
-    &.actionList-item-content--leadingVisual {
-      grid-template-columns: min-content minmax(min-content, auto);
+  &[aria-expanded='true'] {
+    .ActionList-item-collapseIcon {
+      transition: transform 120ms linear;
+      transform: scaleY(-1);
+    }
+
+    .ActionList--subGroup {
+      visibility: visible;
+      overflow: auto;
+      height: auto;
+      opacity: 1;
+      transform: translateY(0);
+    }
+
+    &.ActionList-item--hasActiveSubItem {
+      // stylelint-disable-next-line selector-max-specificity
+      > .ActionList-content > .ActionList-item-label {
+        font-weight: $font-weight-bold;
+      }
     }
+  }
 
-    // trailing visual
-    &.actionList-item-content--trailingVisual {
-      grid-template-columns: minmax(min-content, auto) min-content;
+  &[aria-expanded='false'] {
+    .ActionList-item-collapseIcon {
+      transition: transform 120ms linear;
+      transform: scaleY(1);
     }
 
-    // leading + trailing visuals
-    &.actionList-item-content--leadingVisual.actionList-item-content--trailingVisual {
-      grid-template-columns: min-content minmax(min-content, auto) min-content;
+    .ActionList--subGroup {
+      display: block;
+      visibility: hidden;
+      overflow: hidden;
+      height: 0;
+      opacity: 0;
+      transform: translateY(-$spacer-3);
     }
 
-    // checkmark
-    &.actionList-item-content--singleSelect,
-    &.actionList-item-content--multiSelect {
-      grid-template-columns: min-content minmax(min-content, auto);
+    // show active indicator on parent collapse if child is active
+    &.ActionList-item--hasActiveSubItem {
+      background: var(--color-action-list-item-default-selected-bg);
 
-      // checkmark + leading visual
-      &.actionList-item-content--leadingVisual {
-        grid-template-columns: min-content min-content minmax(min-content, auto);
+      .ActionList-item-label {
+        font-weight: $font-weight-bold;
       }
 
-      // checkmark + trailing visual
-      &.actionList-item-content--trailingVisual {
-        grid-template-columns: min-content minmax(min-content, auto) min-content;
+      // stylelint-disable-next-line selector-max-specificity
+      &::before,
+      + .ActionList-item::before {
+        visibility: hidden;
       }
 
-      // checkmark + leading * trailing visuals
-      &.actionList-item-content--leadingVisual.actionList-item-content--trailingVisual {
-        grid-template-columns: min-content min-content minmax(min-content, auto) min-content;
+      // blue accent line
+      &::after {
+        @include activeIndicatorLine;
       }
     }
+  }
 
-    // helper for grid alignment with multi-line content
-    // span wrapping svg or text
-    .actionList-item-visual {
-      min-height: 20px;
-      display: flex;
-      align-items: center;
-      fill: var(--color-fg-muted);
-      color: var(--color-fg-muted); // if visual is text
-    }
+  // checkbox item [aria-checked]
+  // listbox [aria-selected]
 
-    // text
-    .actionList-item-label {
-      font-weight: $font-weight-normal;
-      color: var(--color-fg-default);
-      position: relative; // for pseudo dividers
+  &[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;
     }
 
-    // wrapper span
-    .actionList-item-label--blockDescription,
-    .actionList-item-label--inlineDescription {
-      display: flex;
+    // singleselect checkmark
+    .ActionList-item-singleSelectCheckmark {
+      visibility: visible;
 
-      .actionList-item-label {
-        font-weight: $font-weight-bold;
+      @media screen and (prefers-reduced-motion: no-preference) {
+        animation: checkmarkIn 200ms cubic-bezier(0.11, 0, 0.5, 0) forwards;
       }
     }
 
-    // block
-    .actionList-item-label--blockDescription {
-      flex-direction: column;
+    // checkbox
+    .ActionList-item-multiSelectIcon {
+      .ActionList-item-multiSelectIconRect {
+        fill: var(--color-accent-fg);
+        stroke: var(--color-accent-fg);
+        stroke-width: $border-width;
+      }
 
-      .actionList-item-description {
-        margin-top: $spacer-1;
+      .ActionList-item-multiSelectCheckmark {
+        fill: var(--color-fg-on-emphasis);
       }
     }
+  }
 
-    // inline
-    .actionList-item-label--inlineDescription {
-      flex-direction: row;
-      align-items: baseline;
+  &[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;
+      }
+    }
 
-      .actionList-item-description {
-        margin-left: $actionList-item-padding-horizontal;
+    // checkbox
+    .ActionList-item-multiSelectIcon {
+      .ActionList-item-multiSelectIconRect {
+        fill: var(--color-canvas-default);
+        stroke: var(--color-border-default);
+        stroke-width: $border-width;
       }
     }
 
-    // description
-    .actionList-item-description {
-      font-size: $font-size-small;
-      line-height: $lh-default;
-      color: var(--color-fg-muted);
+    .ActionList-item-multiSelectIconRect {
+      fill: var(--color-canvas-default);
+      border: $border-width $border-style var(--color-border-default);
     }
   }
 
-  // single select
+  @keyframes checkmarkIn {
+    from {
+      clip-path: inset(16px 0 0 0);
+    }
 
-  // maintain space on grid while check is hidden
-  .actionList-item-content--singleSelect {
-    .actionList-item-check {
-      visibility: hidden;
+    to {
+      clip-path: inset(0 0 0 0);
     }
   }
 
-  &[aria-checked='true'] {
-    .actionList-item-content--singleSelect {
-      .actionList-item-check {
-        visibility: visible;
-      }
+  @keyframes checkmarkOut {
+    from {
+      clip-path: inset(0 0 0 0);
+    }
+
+    to {
+      clip-path: inset(16px 0 0 0);
     }
   }
 
-  // navigational
+  // variants
 
-  // we could also use [aria-current] selector, and/or just conditionally add this class
-  &.actionList-item--active {
-    &:before,
-    + .actionList-item:before {
-      visibility: hidden;
+  // danger
+  &.ActionList-item--danger {
+    .ActionList-item-label {
+      color: var(--color-danger-fg);
     }
 
-    // not: safegaurd that danger items aren't nav active
-    // blue accent line
-    > :not(.actionList-item-content--danger):after {
-      content: '';
-      width: $spacer-1;
-      height: $spacer-4;
-      border-radius: $border-radius-1;
-      position: absolute;
-      left: -$actionList-item-padding-horizontal;
-      top: calc(50% - (24px / 2));
-      background: var(--color-accent-fg);
+    .ActionList-item-visual {
+      color: var(--color-danger-fg);
     }
 
-    .actionList-item-content:not(.actionList-item-content--danger) {
-      background: $actionList-item-selected-bg;
+    @media (hover: hover) and (pointer: fine) {
+      &:hover {
+        background: var(--color-action-list-item-danger-hover-bg);
 
-      @media (hover: hover) and (pointer: fine) {
-        &:hover {
-          background: $actionList-item-active-bg;
+        // stylelint-disable-next-line max-nesting-depth
+        .ActionList-item-label {
+          color: var(--color-action-list-item-danger-hover-text);
         }
       }
     }
+
+    &:active {
+      background: var(--color-action-list-item-danger-active-bg);
+    }
   }
+
+  // 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) and (pointer: fine) {
+      &:hover {
+        cursor: not-allowed;
+        background-color: transparent;
+      }
+    }
+  }
+
+  // if nested list exists, remove default padding
+  .ActionList {
+    // stylelint-disable-next-line primer/spacing
+    padding: unset;
+  }
+}
+
+// span or a href
+.ActionList-content {
+  position: relative;
+  display: grid;
+  // 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);
+  user-select: none;
+  border-radius: $border-radius;
+  transition: $actionList-item-bg-transition;
+  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;
+  }
+
+  &:focus-visible {
+    @include focusOutline;
+  }
+
+  // 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 {
+  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
+  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;
 }