primer_view_components 0.0.96 → 0.0.97

data/app/components/primer/alpha/action_list/action-list.pcss

@@ -0,0 +1,620 @@
+:root {
+  --primer-actionListContent-paddingBlock: var(--primer-control-medium-paddingBlock, 6px);
+}
+
+/* ActionList */
+
+/* <ul> */
+.ActionListWrap {
+  list-style: none;
+}
+
+.ActionListWrap--inset {
+  padding: var(--base-size-8, 8px);
+}
+
+/* list dividers */
+
+.ActionListWrap--divided {
+  & .ActionListItem-label::before {
+    position: absolute;
+    top: calc(-1 * var(--primer-actionListContent-paddingBlock));
+    display: block;
+    width: 100%;
+    height: 1px;
+    content: '';
+    background: var(--color-action-list-item-inline-divider);
+  }
+
+  /* if descriptionWrap--inline exists, move pseudo divider to wrapper */
+  & .ActionListItem-descriptionWrap--inline {
+    &::before {
+      position: absolute;
+      top: calc(-1 * var(--primer-actionListContent-paddingBlock));
+      display: block;
+      width: 100%;
+      height: var(--primer-borderWidth-thin, 1px);
+      content: '';
+      background: var(--color-action-list-item-inline-divider);
+    }
+
+    /* unset the default label pseudo */
+    & .ActionListItem-label::before {
+      content: unset;
+    }
+  }
+
+  /* hide divider if item is active */
+  & .ActionListItem--navActive {
+    & .ActionListItem-label::before,
+    + .ActionListItem .ActionListItem-label::before {
+      visibility: hidden;
+    }
+  }
+}
+
+/* hide if item is first of type with label::before, or is the first item after a sectionDivider */
+.ActionListItem:first-of-type .ActionListItem-label::before,
+.ActionList-sectionDivider + .ActionListItem .ActionListItem-label::before {
+  visibility: hidden;
+}
+
+/* hide if item is first of type with label::before, or is the first item after a sectionDivider */
+.ActionListItem:first-of-type .ActionListItem-descriptionWrap--inline::before,
+.ActionList-sectionDivider + .ActionListItem .ActionListItem-descriptionWrap--inline::before {
+  visibility: hidden;
+}
+
+/* ActionList::Item */
+
+/* divider behavior */
+
+.ActionListItem {
+  /* hide dividers  */
+  @media (hover: hover) {
+    &:hover {
+      & .ActionListItem-label::before,
+      & + .ActionListItem .ActionListItem-label::before {
+        visibility: hidden;
+      }
+
+      & .ActionListItem-descriptionWrap--inline::before,
+      & + .ActionListItem .ActionListItem-descriptionWrap--inline::before {
+        visibility: hidden;
+      }
+    }
+  }
+
+  /* Make sure that the first visible item isn't a divider */
+  &[hidden] + .ActionList-sectionDivider {
+    display: none;
+  }
+}
+
+/* sub items */
+
+.ActionListItem {
+  /* target contents of li if sub-item (li wraps item label + nested ul) */
+  /* collapse styles here */
+  &.ActionListItem--hasSubItem {
+    /* first child */
+    & > .ActionListContent {
+      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);
+      }
+    }
+  }
+}
+
+/* <li> */
+.ActionListItem {
+  position: relative;
+  list-style: none;
+  background-color: transparent;
+  border-radius: var(--primer-borderRadius-medium, 6px);
+
+  /* state */
+
+  &:hover,
+  &:active {
+    cursor: pointer;
+  }
+
+  /* only hover li without list as children */
+  &:not(.ActionListItem--hasSubItem),
+   /* target contents of first child li if sub-item (li wraps item label + nested ul) */
+  &.ActionListItem--hasSubItem > .ActionListContent {
+    @media (hover: hover) {
+      &:hover {
+        cursor: pointer;
+        background-color: var(--color-action-list-item-default-hover-bg);
+
+        &:not(.ActionListItem--navActive):not(:focus-visible) {
+          /* Support for "Windows high contrast mode" */
+          outline: solid var(--primer-borderWidth-thin, 1px) transparent;
+          outline-offset: calc(-1 * var(--primer-borderWidth-thin, 1px));
+          box-shadow: var(--primer-borderInset-thin, 1px) var(--color-action-list-item-default-active-border);
+        }
+      }
+    }
+
+    &:active {
+      background: var(--color-action-list-item-default-active-bg);
+
+      &:not(.ActionListItem--navActive) {
+        /* Support for "Windows high contrast mode" https:sarahmhigley.com/writing/whcm-quick-tips/ */
+        outline: solid var(--primer-borderWidth-thin, 1px) transparent;
+        outline-offset: calc(-1 * var(--primer-borderWidth-thin, 1px));
+        box-shadow: var(--primer-borderInset-thin, 1px) var(--color-action-list-item-default-active-border);
+      }
+
+      @media screen and (prefers-reduced-motion: no-preference) {
+        animation: ActionListItem-active-bg 4s forwards cubic-bezier(0.33, 1, 0.68, 1);
+      }
+
+      @keyframes ActionListItem-active-bg {
+        50% {
+          box-shadow: inset 0 2px 12px 6px rgba(var(--color-canvas-default), 0.4);
+          transform: scale(1);
+        }
+
+        100% {
+          transform: scale(0.97);
+        }
+      }
+    }
+
+    &:active {
+      & .ActionListItem-label::before,
+      & + .ActionListItem .ActionListItem-label::before {
+        visibility: hidden;
+      }
+    }
+  }
+
+  /* Autocomplete [aria-selected] items */
+
+  &[aria-selected='true'] {
+    font-weight: var(--base-text-weight-normal, 400);
+    background: var(--color-action-list-item-default-selected-bg);
+
+    @media (hover: hover) {
+      &:hover {
+        background-color: var(--color-action-list-item-default-hover-bg);
+      }
+    }
+
+    &::before,
+    & + .ActionListItem::before {
+      visibility: hidden;
+    }
+
+    /* blue accent line
+    &::after {
+      @include activeIndicatorLine(-$spacer-1);
+      @mixin activeIndicatorLine
+    } */
+  }
+
+  /* active state [aria-current] */
+
+  &.ActionListItem--navActive {
+    &:not(.ActionListItem--subItem) {
+      .ActionListItem-label {
+        font-weight: var(--base-text-weight-semibold, 600);
+      }
+    }
+
+    &:not(.ActionListItem--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,
+      & + .ActionListItem::before {
+        visibility: hidden;
+      }
+
+      /* blue accent line  */
+      &::after {
+        @mixin activeIndicatorLine;
+      }
+    }
+  }
+
+  /* disabled */
+
+  &[aria-disabled='true'] {
+    & .ActionListContent {
+      & .ActionListItem-label,
+      & .ActionListItem-description {
+        color: var(--color-primer-fg-disabled);
+      }
+
+      & .ActionListItem-visual {
+        fill: var(--color-primer-fg-disabled);
+      }
+    }
+
+    @media (hover: hover) {
+      &:hover {
+        cursor: not-allowed;
+        background-color: transparent;
+      }
+    }
+  }
+
+  /* variants */
+
+  /* danger */
+  &.ActionListItem--danger {
+    & .ActionListItem-label {
+      color: var(--color-danger-fg);
+    }
+
+    & .ActionListItem-visual {
+      color: var(--color-danger-fg);
+    }
+
+    @media (hover: hover) {
+      &:hover {
+        background: var(--color-action-list-item-danger-hover-bg);
+
+        & .ActionListItem-label {
+          color: var(--color-action-list-item-danger-hover-text);
+        }
+      }
+    }
+
+    & .ActionListContent {
+      &:active {
+        background: var(--color-action-list-item-danger-active-bg);
+      }
+    }
+  }
+}
+
+/* button or a href */
+.ActionListContent {
+  position: relative;
+  display: grid;
+  width: 100%;
+  padding-block: var(--primer-actionListContent-paddingBlock);
+  padding-inline: var(--primer-control-medium-paddingInline-condensed, 8px);
+  color: var(--color-fg-default);
+  text-align: left;
+  user-select: none;
+  background-color: transparent;
+  border: none;
+  border-radius: var(--primer-borderRadius-medium, 6px);
+  transition: background 33.333ms linear;
+  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: var(--primer-control-medium-gap, 8px);
+  }
+
+  /* state */
+
+  &:hover {
+    text-decoration: none;
+  }
+
+  /* disabled */
+  &[aria-disabled='true'] {
+    & .ActionListItem-label,
+    & .ActionListItem-description {
+      color: var(--color-primer-fg-disabled);
+    }
+
+    & .ActionListItem-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);
+      }
+
+      & .ActionListContent {
+        padding-left: var(--base-size-24, 24px);
+      }
+    }
+
+    /* has 16px leading visual */
+    &.ActionListContent--visual16 + .ActionList--subGroup {
+      & .ActionListContent {
+        padding-left: var(--base-size-32, 32px);
+      }
+    }
+
+    /* has 20px leading visual */
+    &.ActionListContent--visual20 + .ActionList--subGroup {
+      & .ActionListContent {
+        padding-left: var(--base-size-36, 36px);
+      }
+    }
+
+    /* has 24px leading visual */
+    &.ActionListContent--visual24 + .ActionList--subGroup {
+      & .ActionListContent {
+        padding-left: var(--base-size-40, 40px);
+      }
+    }
+  }
+
+  &[aria-expanded='true'] {
+    & .ActionListItem-collapseIcon {
+      transition: transform 120ms linear;
+      transform: scaleY(-1);
+    }
+
+    & + .ActionList--subGroup {
+      height: auto;
+      overflow: visible;
+      visibility: visible;
+      opacity: 1;
+      transform: translateY(0);
+    }
+
+    &.ActionListContent--hasActiveSubItem {
+      & > .ActionListItem-label {
+        font-weight: var(--base-text-weight-semibold, 600);
+      }
+    }
+  }
+
+  &[aria-expanded='false'] {
+    & .ActionListItem-collapseIcon {
+      transition: transform 120ms linear;
+      transform: scaleY(1);
+    }
+
+    & + .ActionList--subGroup {
+      height: 0;
+      overflow: hidden;
+      visibility: hidden;
+      opacity: 0;
+      transform: translateY(calc(-1 * var(--base-size-16, 16px)));
+    }
+
+    /* show active indicator on parent collapse if child is active */
+    &.ActionListContent--hasActiveSubItem {
+      background: var(--color-action-list-item-default-selected-bg);
+
+      & .ActionListItem-label {
+        font-weight: var(--base-text-weight-semibold, 600);
+      }
+
+      &::before,
+      + .ActionListItem::before {
+        visibility: hidden;
+      }
+
+      /* blue accent line */
+      &::after {
+        @mixin activeIndicatorLine;
+      }
+    }
+  }
+
+  /* sizes */
+
+  &.ActionListContent--sizeLarge {
+    --primer-actionListContent-paddingBlock: var(--primer-control-large-paddingBlock, calc((2.5rem - 1.25rem) / 2));
+  }
+
+  &.ActionListContent--sizeXLarge {
+    --primer-actionListContent-paddingBlock: var(--primer-control-xlarge-paddingBlock, calc((3rem - 1.25rem) / 2));
+  }
+
+  /* On pointer:coarse (mobile), all list items are large */
+  @media (pointer: coarse) {
+    --primer-actionListContent-paddingBlock: var(--primer-control-large-paddingBlock, calc((2.5rem - 1.25rem) / 2));
+  }
+
+  &.ActionListContent--blockDescription {
+    /* if leading/trailing visual, align with first line of content */
+    & .ActionListItem-visual {
+      place-self: start;
+    }
+  }
+}
+
+/* place children on grid */
+
+.ActionListItem-action--leading {
+  grid-area: leadingAction;
+}
+
+.ActionListItem-visual--leading {
+  grid-area: leadingVisual;
+}
+
+.ActionListItem-label {
+  grid-area: label;
+}
+
+.ActionListItem-visual--trailing {
+  grid-area: trailingVisual;
+}
+
+.ActionListItem-action--trailing {
+  grid-area: trailingAction;
+}
+
+/* wrapper span
+ default block */
+.ActionListItem-descriptionWrap {
+  grid-area: label;
+  display: flex;
+  flex-direction: column;
+  gap: var(--base-size-4, 4px);
+
+  & .ActionListItem-label {
+    font-weight: var(--base-text-weight-semibold, 600);
+  }
+}
+
+/* inline */
+.ActionListItem-descriptionWrap--inline {
+  position: relative;
+  flex-direction: row;
+  align-items: baseline;
+  gap: var(--base-size-8, 8px);
+}
+
+/* description */
+.ActionListItem-description {
+  font-size: var(--primer-text-body-size-small, 12px);
+  font-weight: var(--base-text-weight-normal, 400);
+  line-height: var(--primer-text-body-lineHeight-small, calc(20 / 12));
+  color: var(--color-fg-muted);
+}
+
+/* helper for grid alignment with multi-line content
+ span wrapping svg or text */
+.ActionListItem-visual,
+.ActionListItem-action {
+  display: flex;
+  min-height: var(--primer-control-medium-lineBoxHeight, 20px);
+  color: var(--color-fg-muted);
+  pointer-events: none;
+  fill: var(--color-fg-muted);
+  align-items: center;
+}
+
+/* text */
+.ActionListItem-label {
+  position: relative;
+  font-size: var(--primer-text-body-size-medium, 14px);
+  font-weight: var(--base-text-weight-normal, 400);
+  line-height: var(--primer-text-body-lineHeight-medium, calc(20 / 14));
+  color: var(--color-fg-default);
+}
+
+.ActionListItem-label--truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* nested lists (only supports 1 level currently)
+ target ActionListItem--subItem for padding-left to maintain :active :after state */
+
+.ActionListItem--subItem > .ActionListContent > .ActionListItem-label {
+  font-size: var(--primer-text-body-size-small, 12px);
+}
+
+/* trailing action icon button */
+
+.ActionListItem--withActions {
+  display: flex;
+  flex-wrap: nowrap;
+  align-items: center;
+}
+
+.ActionListItem-trailingAction {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+/* show trailing action button on hover */
+
+.ActionListItem--trailingActionHover {
+  & .ActionListItem-trailingAction {
+    visibility: hidden;
+  }
+
+  &:hover,
+  &:focus-within {
+    & .ActionListItem-trailingAction {
+      visibility: visible;
+    }
+  }
+}
+
+/* ActionList::Divider */
+
+.ActionList-sectionDivider {
+  /* with children */
+  &:not(:empty) {
+    display: flex;
+    padding: ($spacer-1 * 1.5) $spacer-2;
+    padding-inline: var(--primer-actionListContent-paddingBlock);
+    padding-block: var(--base-size-8, 8px);
+    font-size: var(--primer-text-body-size-small, 12px);
+    font-weight: var(--base-text-weight-semibold, 600);
+    color: var(--color-fg-muted);
+    flex-direction: column;
+  }
+
+  /* no children */
+  &:empty {
+    display: block;
+    height: var(--primer-borderWidth-thin, 1px);
+    padding: 0;
+    margin-block-start: calc(var(--base-size-8, 8px) - var(--primer-borderWidth-thin, 1px));
+    margin-block-end: var(--base-size-8, 8px);
+    margin-inline: calc(-1 * var(--base-size-8, 8px));
+    list-style: none;
+    background: var(--color-action-list-item-inline-divider);
+    border: 0;
+  }
+
+  .ActionList-sectionDivider-title {
+    font-size: var(--primer-text-body-size-small, 12px);
+    font-weight: var(--base-text-weight-semibold, 600);
+    color: var(--color-fg-muted);
+  }
+}
+
+.ActionList-sectionDivider--filled {
+  margin-block-start: calc(var(--base-size-8, 8px) - var(--primer-borderWidth-thin, 1px));
+  margin-block-end: var(--base-size-8, 8px);
+  margin-inline: calc(-1 * var(--base-size-8, 8px));
+  background: var(--color-canvas-subtle);
+  border-top: solid var(--primer-borderWidth-thin, 1px) var(--color-action-list-item-inline-divider);
+  border-bottom: solid var(--primer-borderWidth-thin, 1px) var(--color-action-list-item-inline-divider);
+
+  /* if no children, treat as divider */
+  &:empty {
+    height: var(--base-size-8, 8px);
+    box-sizing: border-box;
+  }
+
+  &:first-child {
+    margin-block-start: 0;
+  }
+}

data/app/components/primer/alpha/action_list/divider.rb

@@ -0,0 +1,35 @@
+# frozen_string_literal: true
+
+module Primer
+  module Alpha
+    class ActionList
+      # Section heading rendered above the section contents.
+      class Divider < Primer::Component
+        DEFAULT_SCHEME = :subtle
+        SCHEME_MAPPINGS = {
+          DEFAULT_SCHEME => nil,
+          :filled => "ActionList-sectionDivider--filled"
+        }.freeze
+        SCHEME_OPTIONS = SCHEME_MAPPINGS.keys.freeze
+
+        # @param scheme [Symbol] Display a background color if scheme is `filled`.
+        # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+        def initialize(scheme: DEFAULT_SCHEME, **system_arguments)
+          @system_arguments = system_arguments
+          @system_arguments[:tag] = :li
+          @system_arguments[:role] = :separator
+          @system_arguments[:'aria-hidden'] = true
+          @scheme = fetch_or_fallback(SCHEME_OPTIONS, scheme, DEFAULT_SCHEME)
+          @system_arguments[:classes] = class_names(
+            "ActionList-sectionDivider",
+            SCHEME_MAPPINGS[@scheme]
+          )
+        end
+
+        def call
+          render(Primer::BaseComponent.new(**@system_arguments)) { "" }
+        end
+      end
+    end
+  end
+end

data/app/components/primer/alpha/action_list/heading.html.erb

@@ -0,0 +1,8 @@
+<%= render(Primer::BaseComponent.new(**@system_arguments)) do %>
+  <%= render(Primer::BaseComponent.new(tag: @tag, classes: "ActionList-sectionDivider-title", id: @list_id)) do %>
+    <%= @title %>
+  <% end %>
+  <%= render Primer::ConditionalWrapper.new(condition: @subtitle.present?, tag: :span, classes: "ActionListItem-description") do %>
+    <%= @subtitle %>
+  <% end %>
+<% end %>

data/app/components/primer/alpha/action_list/heading.rb

@@ -0,0 +1,38 @@
+# frozen_string_literal: true
+
+module Primer
+  module Alpha
+    class ActionList
+      # Heading used to describe each sub list within an action list.
+      class Heading < Primer::Component
+        DEFAULT_SCHEME = :subtle
+        SCHEME_MAPPINGS = {
+          DEFAULT_SCHEME => nil,
+          :filled => "ActionList-sectionDivider--filled"
+        }.freeze
+        SCHEME_OPTIONS = SCHEME_MAPPINGS.keys.freeze
+
+        # @param list_id [String] The unique identifier of the sub list the heading belongs to. Used internally.
+        # @param title [String] Sub list title.
+        # @param subtitle [String] Optional sub list description.
+        # @param scheme [Symbol] Display a background color if scheme is `filled`.
+        # @param tag [Symbol] Semantic tag for the heading.
+        # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+        def initialize(list_id:, title:, tag: :h3, scheme: DEFAULT_SCHEME, subtitle: nil, **system_arguments)
+          @tag = tag
+          @system_arguments = system_arguments
+          @list_id = list_id
+          @title = title
+          @subtitle = subtitle
+          @scheme = fetch_or_fallback(SCHEME_OPTIONS, scheme, DEFAULT_SCHEME)
+          @system_arguments[:tag] = :li
+          @system_arguments[:classes] = class_names(
+            "ActionList-sectionDivider",
+            SCHEME_MAPPINGS[@scheme],
+            @system_arguments[:classes]
+          )
+        end
+      end
+    end
+  end
+end