@primer/css 0.0.0-20220120162542 → 0.0.0-20220120184157

package/CHANGELOG.md

@@ -1,20 +1,6 @@
 # @primer/css
 
-## 0.0.0-20220120162542
-
-### Patch Changes
-
-- [#1892](https://github.com/primer/css/pull/1892) [`b8605906`](https://github.com/primer/css/commit/b86059064fed80bfdb337df27633e1f722da10f2) Thanks [@langermank](https://github.com/langermank)! - Patch: Fix ActionList--divided for label with inline description scenarios
-
-* Fake entry to force publishing
-
-- [#1890](https://github.com/primer/css/pull/1890) [`74d0438b`](https://github.com/primer/css/commit/74d0438bd4dbaed447b553c5d3c8b945da282836) Thanks [@andrialexandrou](https://github.com/andrialexandrou)! - Adds --color-accent-emphasis and --color-fg-on-emphasis rules for Windows High Contrast Mode
-
-* [#1882](https://github.com/primer/css/pull/1882) [`4a06aba1`](https://github.com/primer/css/commit/4a06aba1d3f80bcc228ff4360d0e02d5ace158ff) Thanks [@tqwewe](https://github.com/tqwewe)! - Fix layout gutter none styles
-
-- [#1894](https://github.com/primer/css/pull/1894) [`d1adf595`](https://github.com/primer/css/commit/d1adf595308afb97f83c5ca172222944189a5961) Thanks [@simurai](https://github.com/simurai)! - Make `pagination` responsive by default
-
-## 19.2.0
+## 0.0.0-20220120184157
 
 ### Minor Changes
 
@@ -26,7 +12,7 @@
 
 * [#1869](https://github.com/primer/css/pull/1869) [`868f61a1`](https://github.com/primer/css/commit/868f61a199df14862922d52905de66cdb1e1c192) Thanks [@jdanyow](https://github.com/jdanyow)! - Minor bugfix for AvatarStack. Removing the box-shadow from the AvatarStack-body on hover.
 
-- [#1856](https://github.com/primer/css/pull/1856) [`cbe3fb56`](https://github.com/primer/css/commit/cbe3fb56e4c7ee6bfe803eb0c15e15ab95d84157) Thanks [@langermank](https://github.com/langermank)! - ActionList item outlines for high contrast theme
+- Fake entry to force publishing
 
 * [#1870](https://github.com/primer/css/pull/1870) [`815daff9`](https://github.com/primer/css/commit/815daff9f07d8096d572cf75bee17284f36492f6) Thanks [@vdepizzol](https://github.com/vdepizzol)! - [ActionList] Add hover to `aria-current` elements and other micro interactions
 

package/actionlist/action-list-item.scss

@@ -1,4 +1,4 @@
-// stylelint-disable max-nesting-depth, selector-max-specificity, selector-max-compound-selectors
+// stylelint-disable max-nesting-depth, selector-max-specificity
 
 @mixin focusOutline {
   position: relative;
@@ -38,50 +38,34 @@
   }
 
   // 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 {
+  &:not(.ActionList-item--hasSubItem) {
     @media (hover: hover) {
       &:hover {
         cursor: pointer;
         background-color: var(--color-action-list-item-default-hover-bg);
-
-        &:not(.ActionList-item--navActive) {
-          // 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 2px 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 2px var(--color-action-list-item-default-active-border);
-      }
-
       @media screen and (prefers-reduced-motion: no-preference) {
         animation: ActionList-item-active-bg 4s forwards cubic-bezier(0.33, 1, 0.68, 1);
       }
 
+      // stylelint-disable primer/box-shadow
       @keyframes ActionList-item-active-bg {
         50% {
-          // stylelint-disable-next-line primer/box-shadow
-          box-shadow: inset 0 2px 12px 6px rgba(var(--color-canvas-default), 0.4);
+          box-shadow: inset 0 0 0 rgba(#000, 0.04);
           transform: scale(1);
         }
 
         100% {
+          box-shadow: inset 0 3px 9px rgba(#000, 0.04);
           transform: scale(0.97);
         }
       }
+      // stylelint-enable primer/box-shadow
     }
 
     // hide dividers
@@ -92,11 +76,6 @@
         + .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
@@ -174,6 +153,7 @@
 
     // has 16px leading visual
     .ActionList-content--visual16 + .ActionList--subGroup {
+      // stylelint-disable-next-line selector-max-compound-selectors
       .ActionList-content {
         padding-left: $spacer-5;
       }
@@ -181,6 +161,7 @@
 
     // has 20px leading visual
     .ActionList-content--visual20 + .ActionList--subGroup {
+      // stylelint-disable-next-line selector-max-compound-selectors
       .ActionList-content {
         padding-left: $spacer-2 * 4.5; // 36px
       }
@@ -188,6 +169,7 @@
 
     // has 24px leading visual
     .ActionList-content--visual24 + .ActionList--subGroup {
+      // stylelint-disable-next-line selector-max-compound-selectors
       .ActionList-content {
         padding-left: $spacer-6;
       }
@@ -493,7 +475,6 @@
 
 // inline
 .ActionList-item-descriptionWrap--inline {
-  position: relative;
   flex-direction: row;
   align-items: baseline;
 

package/actionlist/action-list.scss

@@ -21,24 +21,6 @@
     background: var(--color-action-list-item-inline-divider);
   }
 
-  // if descriptionWrap--inline exists, move pseudo divider to wrapper
-  .ActionList-item-descriptionWrap--inline {
-    &::before {
-      position: absolute;
-      top: -$actionList-item-padding-vertical;
-      display: block;
-      width: 100%;
-      height: $border-width;
-      content: '';
-      background: var(--color-action-list-item-inline-divider);
-    }
-
-    // unset the default label pseudo
-    .ActionList-item-label::before {
-      content: unset;
-    }
-  }
-
   // hide divider if item is active
   .ActionList-item--navActive {
     // stylelint-disable-next-line selector-max-specificity, selector-max-compound-selectors
@@ -54,9 +36,3 @@
 .ActionList-sectionDivider + .ActionList-item .ActionList-item-label::before {
   visibility: hidden;
 }
-
-// hide if item is first of type with label::before, or is the first item after a sectionDivider
-.ActionList-item:first-of-type .ActionList-item-descriptionWrap--inline::before,
-.ActionList-sectionDivider + .ActionList-item .ActionList-item-descriptionWrap--inline::before {
-  visibility: hidden;
-}

package/button-refactor/ButtonsLinksAPI.md

@@ -0,0 +1,111 @@
+# Button and Link component APIs
+Button and Link has been discussed in a number of issues and discussions over past few years. I went through the list below, took note of their purpose and started compiling a new API spec. This doc is is meant to be collaborative and accompany Storybook docs while we work through a final API recommendation. Once we have a solid plan, this can move into an issue and be delegated across frameworks.
+
+Existing issues
+- https://github.com/github/primer/issues/141
+  -- Accessory button component, should reconcile with reaction button (sister component to Button)
+- https://github.com/github/primer/issues/220
+  -- Tracking issue, mentions Button in the context of API consistency
+- https://github.com/github/primer/issues/253
+  -- Button audit, anatomy spec, design considerations, some button link discussion, icon buttons (this issue is very informative!)
+- https://github.com/github/primer/issues/263
+  -- More design discussion, particularly focused on outline button
+- https://github.com/github/primer/issues/272
+  -- Make icon only buttons square
+- https://github.com/github/primer/issues/321
+  -- Super specific button use case?
+- https://github.com/github/primer/issues/350
+  -- a11y audit with task list for PVC
+- https://github.com/github/primer/issues/382
+  -- React button refactor
+- https://github.com/github/primer/issues/468
+  -- Visual bugs (colors, state)
+- https://github.com/github/primer/discussions/87
+  -- Discussion about accessory buttons
+- https://github.com/github/primer/discussions/211
+  -- Open ended discussion about primary button as dropdown
+- https://github.com/github/primer/discussions/459
+  -- Allie's thoughts on limiting icon only buttons and working towards encouraging visual labels
+- https://github.com/github/primer/discussions/477
+  -- Buttons styled as links, links styled as buttons
+
+## Specific notes from previous bugs to keep in mind
+- [ ]  Check all button variants have shadow present
+- [ ]  Ensure icon colors are consistent in hover states
+- [ ]  Ensure icon colors are consistent with variants in all states
+- [ ]  Ensure disabled colors are consistent across frameworks
+
+## Component list
+A few discussions were about naming and prop drilling (source here). We found that for Button to handle all of its use cases, we would need a large number of props– some conditional and dependent on one another. When that happens, it's typically a sign that the logic should be separated into another component.
+
+| Component | Description |
+| -- | -- |
+| Button | standard `button` with variants, size, visual slots |
+| IconButton | `button` with icon only (square) and required `aria-label` |
+| ReactionButton | `button` snowflake with specific styles/interaction design (round) potentially a variant |
+| ButtonGroup | wrapper to handle grouping buttons |
+| Link | `a` with variants, optional trailing visuals |
+| LinkStyledAsButton | `a` with button variants, required trailing visual |
+
+## Component API breakdown
+
+### Button
+
+| prop | type | options | default | notes |
+| -- | -- | -- | -- | -- |
+| `variant` | one-of string | `primary` `secondary` `danger` `invisible` | `secondary` | |
+| `size` | one-of string | `small` `default` `large` | `default | |
+| `label` | string | button description | null | |
+| `aria-label` | string | button description for screen readers | null | |
+| `aria-pressed` | boolean | `true/false` | `false` | |
+| `leadingVisual` | children (slot) | octicon | null | |
+| `trailingVisual` | children (slot) | octicon | null | |
+| `trailingAction` | children (slot) | octicon | null | slot for caret to maintain leading/trailing visuals if they exist |
+| `fullWidth` | boolean | `true/false` | `false` | |
+| `visualPosition` | one-of string | `fixed` `some-other-word` | `fixed` | lock icon to the text label or to the button container |
+
+
+### LinkStyledAsButton
+
+| prop | type | options | default | notes |
+| -- | -- | -- | -- | -- |
+| `variant` | one-of string | `primary` `secondary` `danger` `invisible` | `secondary` | |
+| `size` | one-of string | `small` `default` `large` | `default | |
+| `label` | string | button description | null | |
+| `leadingVisual` | children (slot) | octicon | null | |
+| `trailingVisual` | children (slot) | octicon | null | |
+| `showTrailingAction` | arrow octicon | `true/false` | true? | show trailingVisual icon to indicate linkyness |
+| `fullWidth` | boolean | `true/false` | `false` | |
+| `visualPosition` | one-of string | `fixed` `some-other-word` | `fixed` | lock icon to the text label or to the button container |
+
+### IconButton
+
+| prop | type | options | default | notes |
+| -- | -- | -- | -- | -- |
+| `variant` | one-of string | `primary` `secondary` `danger` `outline`? | `secondary` | |
+| `size` | one-of string | `small` `default` `large` | `default | |
+| `aria-label` | string | button description for screen readers (required) | null | |
+| `visual` | children (slot) | octicon | null | |
+| `aria-pressed` | boolean | `true/false` | `false` | |
+
+### Link
+
+| prop | type | options | default | notes |
+| -- | -- | -- | -- | -- |
+| `variant` | one-of string | ?? we need to work on this (subtle and or muted) | |
+| `label` | string | button description | null | |
+| `showTrailingAction` | boolean | specific octicon for new tab or new page (or anchor?) | null | |
+
+### ButtonGroup
+
+| prop | type | options | default | notes |
+| -- | -- | -- | -- | -- |
+| | | | |
+
+## Next review session
+- [ ]  Help refine transition animations + tokenize
+- [ ]  Icon colors- same as button text, or specific?
+- [ ]  for `LinkStyledAsButton` should `trailingAction` slot be reserved for the > chevron indicating this is a link and not a button?
+- [ ]  What color should `invisible` button variant be? Blue or grey?
+- [ ]  No aria-label for `LinkStyledAsButton`
+- [ ]  Do we like `fullWidth` or `block` as a prop for width behavior?

package/button-refactor/button.scss

@@ -0,0 +1,245 @@
+// base button
+.Button {
+  position: relative;
+  font-size: $body-font-size;
+  font-weight: $font-weight-semibold;
+  cursor: pointer;
+  user-select: none;
+  background-color: transparent;
+  border: $border-width $border-style;
+  border-color: transparent;
+  border-radius: $border-radius;
+  color: var(--color-btn-text);
+  transition: 0.2s cubic-bezier(0.3, 0, 0.5, 1);
+  transition-property: color, background-color, border-color;
+  text-align: center;
+  height: 32px;
+  padding: 0 16px;
+
+  // define grid slots and layout for standard button contents
+  //   &:not(.Button--iconOnly) {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  gap: $spacer-2;
+
+  // base states
+
+  &:hover,
+  [open] > & {
+    transition-duration: 0.1s;
+  }
+
+  &:active,
+  &.Button--active {
+    transition: none;
+  }
+
+  &:disabled,
+  &.Button--disabled,
+  &[aria-disabled='true'] {
+    cursor: not-allowed;
+    box-shadow: none;
+  }
+
+  &:focus {
+    @include focusOutline;
+  }
+}
+
+// wrap grid content to allow trailingAction to lock-right
+.Button-content {
+  flex: 1 0 auto;
+  display: grid;
+  grid-template-areas: 'leadingVisual text trailingVisual';
+  grid-template-columns: min-content minmax(0, auto) min-content;
+  align-items: center;
+
+  > :not(:last-child) {
+    margin-right: $spacer-2;
+  }
+}
+
+// center child elements for fullWidth
+.Button-content--visualFixed {
+  place-content: center;
+}
+
+// button child elements
+
+// align svg
+.Button-visual {
+  display: flex;
+}
+
+.Button-label {
+  grid-area: text;
+  white-space: nowrap;
+}
+
+.Button-leadingVisual {
+  grid-area: leadingVisual;
+}
+
+.Button-trailingVisual {
+  grid-area: trailingVisual;
+}
+
+.Button-trailingAction {
+  margin-right: -8px;
+}
+
+// sizes
+
+.Button--small {
+  height: 28px;
+  font-size: $font-size-small;
+}
+
+.Button--large {
+  height: 44px;
+}
+
+.Button--fullWidth {
+  width: 100%;
+}
+
+// variants
+
+// primary
+.Button--primary {
+  color: var(--color-btn-primary-text);
+  fill: var(--color-btn-primary-icon);
+  background-color: var(--color-btn-primary-bg);
+  border-color: var(--color-btn-primary-border);
+  box-shadow: var(--color-btn-primary-shadow), var(--color-btn-primary-inset-shadow);
+
+  &:hover,
+  [open] > & {
+    background-color: var(--color-btn-primary-hover-bg);
+    border-color: var(--color-btn-primary-hover-border);
+  }
+
+  &:active,
+  &[aria-pressed='true'],
+  &.Button--pressed {
+    background-color: var(--color-btn-primary-selected-bg);
+    box-shadow: var(--color-btn-primary-selected-shadow);
+  }
+
+  &:disabled,
+  &.Button--disabled,
+  &[aria-disabled='true'] {
+    color: var(--color-btn-primary-disabled-text);
+    background-color: var(--color-btn-primary-disabled-bg);
+    border-color: var(--color-btn-primary-disabled-border);
+    fill: var(--color-btn-primary-disabled-text);
+  }
+}
+
+// default (secondary)
+.Button--secondary {
+  color: var(--color-btn-text);
+  fill: var(--color-fg-muted); // help this
+  background-color: var(--color-btn-bg);
+  border: $border-width $border-style;
+  border-color: var(--color-btn-border);
+  box-shadow: var(--color-btn-shadow), var(--color-btn-inset-shadow);
+
+  &:hover,
+  [open] > & {
+    background-color: var(--color-btn-hover-bg);
+    border-color: var(--color-btn-hover-border);
+  }
+
+  &:active,
+  &.Button--active {
+    background-color: var(--color-btn-active-bg);
+    border-color: var(--color-btn-active-border);
+  }
+
+  &[aria-pressed='true'],
+  &.Button--pressed {
+    background-color: var(--color-btn-selected-bg);
+    box-shadow: var(--color-primer-shadow-inset);
+  }
+
+  &:disabled,
+  &.Button--disabled,
+  &[aria-disabled='true'] {
+    color: var(--color-primer-fg-disabled);
+    background-color: var(--color-btn-bg);
+    border-color: var(--color-btn-border);
+    fill: var(--color-primer-fg-disabled);
+  }
+}
+
+.Button--invisible {
+  color: var(--color-btn-outline-text);
+  fill: var(--color-btn-outline-text);
+  background-color: var(--color-canvas-default);
+  border: $border-width $border-style;
+  border-color: var(--color-canvas-default);
+
+  &:hover,
+  [open] > & {
+    background-color: var(--color-btn-hover-bg);
+    border-color: var(--color-btn-hover-bg);
+  }
+
+  &[aria-pressed='true'],
+  &:active,
+  &.Button--active,
+  &.Button--pressed {
+    background-color: var(--color-btn-selected-bg);
+    box-shadow: var(--color-primer-shadow-inset);
+  }
+
+  &:disabled,
+  &.Button--disabled,
+  &[aria-disabled='true'] {
+    color: var(--color-primer-fg-disabled);
+    background-color: var(--color-btn-bg);
+    border-color: var(--color-btn-border);
+    fill: var(--color-primer-fg-disabled);
+  }
+}
+
+// danger
+.Button--danger {
+  color: var(--color-btn-danger-text);
+  fill: var(--color-btn-danger-icon);
+  background-color: var(--color-btn-bg);
+  border: $border-width $border-style;
+  border-color: var(--color-btn-border);
+  box-shadow: var(--color-btn-shadow), var(--color-btn-inset-shadow);
+
+  &:hover,
+  [open] > & {
+    color: var(--color-btn-danger-hover-text);
+    fill: var(--color-btn-danger-hover-text);
+    background-color: var(--color-btn-danger-hover-bg);
+    border-color: var(--color-btn-danger-hover-border);
+    box-shadow: var(--color-btn-danger-hover-shadow), var(--color-btn-danger-hover-inset-shadow);
+  }
+
+  &:active,
+  &[aria-pressed='true'],
+  &.Button--pressed {
+    color: var(--color-btn-danger-selected-text);
+    fill: var(--color-btn-danger-selected-text);
+    background-color: var(--color-btn-danger-selected-bg);
+    border-color: var(--color-btn-danger-selected-border);
+    box-shadow: var(--color-btn-danger-selected-shadow);
+  }
+
+  &:disabled,
+  &.disabled,
+  &[aria-disabled='true'] {
+    color: var(--color-btn-danger-disabled-text);
+    fill: var(--color-btn-danger-disabled-text);
+    background-color: var(--color-btn-danger-disabled-bg);
+    border-color: var(--color-btn-border);
+  }
+}

package/button-refactor/icon-button.scss

@@ -0,0 +1,14 @@
+.Button--iconOnly {
+  display: grid;
+  place-content: center;
+  padding: unset;
+  width: 32px;
+
+  &.Button--small {
+    width: 28px;
+  }
+
+  &.Button--large {
+    width: 44px;
+  }
+}

package/button-refactor/link-styled-as-button.scss

@@ -0,0 +1,75 @@
+// base link
+.LinkStyledAsButton {
+  @extend .Button;
+  display: inline-flex;
+
+  &:hover {
+    text-decoration: none;
+  }
+}
+
+.LinkStyledAsButton-content {
+  @extend .Button-content;
+}
+
+.LinkStyledAsButton-content--visualFixed {
+  @extend .Button-content--visualFixed;
+}
+
+// link child elements
+
+.LinkStyledAsButton-visual {
+  @extend .Button-visual;
+}
+
+.LinkStyledAsButton-label {
+  @extend .Button-label;
+}
+
+.LinkStyledAsButton-leadingVisual {
+  @extend .Button-leadingVisual;
+}
+
+.LinkStyledAsButton-trailingVisual {
+  @extend .Button-trailingVisual;
+}
+
+.LinkStyledAsButton-trailingAction {
+  @extend .Button-trailingAction;
+}
+
+// sizes
+
+.LinkStyledAsButton--small {
+  @extend .Button--small;
+}
+
+.LinkStyledAsButton--large {
+  @extend .Button--large;
+}
+
+.LinkStyledAsButton--fullWidth {
+  @extend .Button--fullWidth;
+}
+
+// variants
+
+// primary
+.LinkStyledAsButton--primary {
+  @extend .Button--primary;
+}
+
+// default (secondary)
+.LinkStyledAsButton--secondary {
+  @extend .Button--secondary;
+}
+
+// invisible
+.LinkStyledAsButton--invisible {
+  @extend .Button--invisible;
+}
+
+// danger
+.LinkStyledAsButton--danger {
+  @extend .Button--danger;
+}

package/button-refactor/link.scss

@@ -0,0 +1,25 @@
+.Link {
+  color: var(--color-accent-fg);
+
+  &:hover {
+    text-decoration: underline;
+    cursor: pointer;
+  }
+
+  // variants
+
+  &.Link--muted {
+    color: var(--color-fg-muted);
+
+    &:hover {
+      color: var(--color-accent-fg);
+    }
+  }
+}
+
+.Link-trailingVisual {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 4px;
+}

package/color-modes/native.scss

@@ -9,14 +9,3 @@
   color: var(--color-fg-default);
   background-color: var(--color-canvas-default);
 }
-
-// Windows High Contrast mode
-
-// Improves focus state for various components when Windows High Contrast mode is enabled
-// stylelint-disable selector-max-type
-@media (forced-colors: active) {
-  body {
-    --color-accent-emphasis: Highlight;
-    --color-fg-on-emphasis: LinkText;
-  }
-}

package/core/index.scss

@@ -24,6 +24,10 @@
 @import '../pagination/index.scss';
 @import '../tooltips/index.scss';
 @import '../truncate/index.scss';
-
+@import '../button-refactor/button.scss';
+@import '../button-refactor/link.scss';
+@import '../button-refactor/icon-button.scss';
+@import '../button-refactor/link-styled-as-button.scss';
+@import '../button-refactor/button-group.scss';
 // Utilities always go last so that they can override components
 @import '../utilities/index.scss';