@primer/css 0.0.0-20220120020705 → 0.0.0-20220120204717

package/CHANGELOG.md

@@ -1,18 +1,6 @@
 # @primer/css
 
-## 0.0.0-20220120020705
-
-### Patch Changes
-
-- Fake entry to force publishing
-
-* [#1890](https://github.com/primer/css/pull/1890) [`0b469228`](https://github.com/primer/css/commit/0b469228c05224609f4ae370f304a0fe58760de8) 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-20220120204717
 
 ### Minor Changes
 
@@ -24,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
@@ -169,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;
       }
@@ -176,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
       }
@@ -183,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;
       }

package/button-refactor/ButtonsLinksAPI.md

@@ -0,0 +1,112 @@
+# 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 |
+| -- | -- | -- | -- | -- |
+| `children` | child slot | | | |
+
+## 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? Or is it more of a `trailingVisual`?
+- [ ]  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?
+- [ ]  Should `ButtonGroup` offer an option with gaps (more of a layout tool)

package/button-refactor/button-group.scss

@@ -0,0 +1,27 @@
+.ButtonGroup {
+  display: flex;
+  flex-direction: row;
+}
+
+// reset border-radius
+.ButtonGroup-item {
+  border-right-width: 0;
+  border-radius: 0;
+
+  &:first-of-type {
+    border-top-left-radius: $border-radius;
+    border-bottom-left-radius: $border-radius;
+  }
+
+  &:last-of-type {
+    border-right-width: $border-width;
+    border-top-right-radius: $border-radius;
+    border-bottom-right-radius: $border-radius;
+  }
+
+  // ensure that the focus ring sits above the adjacent buttons
+  &:focus,
+  &:active {
+    z-index: 1;
+  }
+}

package/button-refactor/button.scss

@@ -0,0 +1,249 @@
+// 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;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  gap: $spacer-2;
+
+  // mobile friendly sizing
+  @media (pointer: course) {
+    &::before {
+      @include minTouchTarget(48px, 48px);
+    }
+  }
+
+  // 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';