From 8eaae9777ff4d5576b35b963d32ba8d73247d9a4 Mon Sep 17 00:00:00 2001 From: simurai Date: Tue, 28 Mar 2023 14:56:15 +0900 Subject: [PATCH 1/3] Remove ActionList from src/ --- src/actionlist/action-list-item-divider.scss | 48 -- src/actionlist/action-list-item.scss | 593 ------------------- src/actionlist/action-list-tree.scss | 118 ---- src/actionlist/action-list-variables.scss | 8 - src/actionlist/action-list.scss | 67 --- src/actionlist/index.scss | 6 - src/core/index.scss | 1 - 7 files changed, 841 deletions(-) delete mode 100644 src/actionlist/action-list-item-divider.scss delete mode 100644 src/actionlist/action-list-item.scss delete mode 100644 src/actionlist/action-list-tree.scss delete mode 100644 src/actionlist/action-list-variables.scss delete mode 100644 src/actionlist/action-list.scss delete mode 100644 src/actionlist/index.scss diff --git a/src/actionlist/action-list-item-divider.scss b/src/actionlist/action-list-item-divider.scss deleted file mode 100644 index 43bd74efc3..0000000000 --- a/src/actionlist/action-list-item-divider.scss +++ /dev/null @@ -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; - } -} diff --git a/src/actionlist/action-list-item.scss b/src/actionlist/action-list-item.scss deleted file mode 100644 index 76f2f9027b..0000000000 --- a/src/actionlist/action-list-item.scss +++ /dev/null @@ -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; -} - -//
  • -.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; -} diff --git a/src/actionlist/action-list-tree.scss b/src/actionlist/action-list-tree.scss deleted file mode 100644 index 445b27923c..0000000000 --- a/src/actionlist/action-list-tree.scss +++ /dev/null @@ -1,118 +0,0 @@ -// stylelint-disable max-nesting-depth, selector-max-compound-selectors, selector-max-specificity, selector-max-type, primer/spacing -// tree-view variant -// renders ActionList with default styling for tree-view -// collapse/expand icons presents as leadingActions, rotate 90deg -// connecting vertical lines between collapse groups -// consistent font-size between nested groups - -@mixin treeConnectingLine($left) { - position: absolute; - left: $left; - width: 1px; - height: 100%; - content: ''; - background: var(--color-action-list-item-inline-divider); -} - -.ActionList--tree { - --ActionList-tree-depth: 1; - // TODO: remove with PVC implementation - .ActionList-item--subItem > .ActionList-content { - font-size: $body-font-size; - } - - .ActionList-item { - // class for single tree items not within a group - &.ActionList-item--singleton { - .ActionList-content { - padding-left: $spacer-5; - } - } - - // normal font-weight for any active item - &.ActionList-item--navActive { - &:not(.ActionList-item--subItem) { - .ActionList-item-label { - font-weight: $font-weight-normal; - } - } - } - } - - .ActionList-content { - // nesting (infinite levels) - // target items inside expanded subgroup - &[aria-expanded] { - + .ActionList--subGroup { - position: relative; - - // --ActionList-tree-depth is defined as an inline style referencing the aria-level of each item ie: aria-level="2" - .ActionList-content { - padding-left: calc(#{$spacer-2} * var(--ActionList-tree-depth)); - } - } - } - - // tree-view specific collapse icon positioning/animation - &[aria-expanded='true'] { - .ActionList-item-collapseIcon { - transition: transform 120ms linear; - transform: rotate(0deg); - } - - // normal weight for parent folder containing active child - &.ActionList-content--hasActiveSubItem { - > .ActionList-item-label { - font-weight: $font-weight-normal; - } - } - } - - &[aria-expanded='false'] { - .ActionList-item-collapseIcon { - transition: transform 120ms linear; - transform: rotate(-90deg); - } - - &.ActionList-content--hasActiveSubItem { - > .ActionList-item-label { - font-weight: $font-weight-normal; - } - } - } - } - - // expand/collapse group - .ActionList-item--hasSubItem { - .ActionList-item--subItem:not(.ActionList-item--hasSubItem) { - .ActionList-content { - // increase child padding by targeting content first child span (add to ActionList-content padding, not replace) - // creates a slight indent of child items - > span:first-child { - padding-left: $spacer-4; - } - } - } - } - - // first subitem - > [aria-level='1'].ActionList-item--hasSubItem { - > .ActionList--subGroup { - &::before { - @include treeConnectingLine($left: $spacer-3); - } - } - } - - // all other subitems - // center connecting line with parent (line is 1px (8px - 1px) - .ActionList-item--hasSubItem:not([aria-level='1']) { - > .ActionList--subGroup { - &::before { - @include treeConnectingLine( - $left: calc(#{$spacer-2} * (var(--ActionList-tree-depth)) + #{$spacer-2 - $border-width}) - ); - } - } - } -} diff --git a/src/actionlist/action-list-variables.scss b/src/actionlist/action-list-variables.scss deleted file mode 100644 index 1fa8f32fbc..0000000000 --- a/src/actionlist/action-list-variables.scss +++ /dev/null @@ -1,8 +0,0 @@ -$actionList-item-height-sm: $spacer-2 * 2.5 !default; -$actionList-item-label-line-height: $spacer-2 * 2.5 !default; -$actionList-item-padding-vertical-md: $spacer-2 * 1.25 !default; -$actionList-item-padding-vertical-lg: $spacer-2 * 1.75 !default; -$actionList-item-padding-vertical: $spacer-1 * 1.5 !default; -$actionList-item-padding-horizontal: $spacer-2 !default; -$actionList-item-bg-transition: background 33.333ms linear !default; // 2 frames on a 60hz monitor -$actionList-item-checkmark-transition-timing: 50ms !default; diff --git a/src/actionlist/action-list.scss b/src/actionlist/action-list.scss deleted file mode 100644 index df4515287a..0000000000 --- a/src/actionlist/action-list.scss +++ /dev/null @@ -1,67 +0,0 @@ -//