@primer/css 0.0.0-20220114215001 → 0.0.0-20220118041832

package/CHANGELOG.md

@@ -1,10 +1,6 @@
 # @primer/css
 
-## 0.0.0-20220114215001
-
-### Major Changes
-
-- [#1744](https://github.com/primer/css/pull/1744) [`d0425dcd`](https://github.com/primer/css/commit/d0425dcddb801260aaae7dbcc75acaeecdfbeb6a) Thanks [@langermank](https://github.com/langermank)! - Global CSS focus styles
+## 0.0.0-20220118041832
 
 ### Minor Changes
 

package/actionlist/action-list-item.scss

@@ -1,5 +1,12 @@
 // stylelint-disable max-nesting-depth, selector-max-specificity
 
+@mixin focusOutline {
+  position: relative;
+  z-index: 1;
+  outline: none;
+  box-shadow: 0 0 0 2px var(--color-accent-fg); // this color breaks convention
+}
+
 @mixin activeIndicatorLine {
   position: absolute;
   top: calc(50% - 12px);
@@ -30,12 +37,6 @@
     }
   }
 
-  // li only: focus, a href: focus-within on li
-  &:focus,
-  &:focus-within {
-    @include focusOutline;
-  }
-
   // only hover li without list as children
   &:not(.ActionList-item--hasSubItem) {
     @media (hover: hover) {
@@ -398,6 +399,10 @@
     margin-right: $spacer-2;
   }
 
+  &:focus-visible {
+    @include focusOutline;
+  }
+
   // sizes
 
   &.ActionList-content--sizeMedium {

package/base/base.scss

@@ -77,64 +77,10 @@ button {
 }
 
 details {
-  summary {
-    cursor: pointer;
-  }
+  summary { cursor: pointer; }
 
   &:not([open]) {
     // Set details content hidden by default for browsers that don't do this
-    > *:not(summary) {
-      display: none !important;
-    }
-  }
-}
-
-// global focus styles
-
-a,
-button,
-[role='button'],
-input,
-textarea,
-select {
-  // fallback :focus state
-  &: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;
-  }
-}
-
-input:not([type='radio'], [type='checkbox']),
-textarea,
-select {
-  &:focus,
-  &:focus-visible {
-    outline-offset: 0;
-  }
-}
-
-// for handling focus conditionally
-.focus {
-  @include focusOutline;
-
-  &:is(input, textarea, select) {
-    outline-offset: 0;
-  }
-}
-
-// Windows High Contrast mode
-@media (forced-colors: active) {
-  *:focus {
-    outline: solid 1px transparent;
-    outline-offset: 2px;
+    > *:not(summary) { display: none !important; }
   }
 }

package/base/normalize.scss

@@ -39,8 +39,7 @@ header,
 main, /* 2 */
 menu,
 nav,
-section {
-  /* 1 */
+section { /* 1 */
   display: block;
 }
 
@@ -97,6 +96,16 @@ a {
   background-color: transparent; /* 1 */
 }
 
+/**
+ * Remove the outline on focused links when they are also active or hovered
+ * in all browsers (opinionated).
+ */
+
+a:active,
+a:hover {
+  outline-width: 0;
+}
+
 /* Text-level semantics
    ========================================================================== */
 
@@ -269,8 +278,7 @@ optgroup {
  */
 
 button,
-input {
-  /* 1 */
+input { /* 1 */
   overflow: visible;
 }
 
@@ -280,8 +288,7 @@ input {
  */
 
 button,
-select {
-  /* 1 */
+select { /* 1 */
   text-transform: none;
 }
 
@@ -298,6 +305,29 @@ html [type="button"], /* 1 */
   -webkit-appearance: button; /* 2 */
 }
 
+/**
+ * Remove the inner border and padding in Firefox.
+ */
+
+button::-moz-focus-inner,
+[type="button"]::-moz-focus-inner,
+[type="reset"]::-moz-focus-inner,
+[type="submit"]::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+/**
+ * Restore the focus styles unset by the previous rule.
+ */
+
+button:-moz-focusring,
+[type="button"]:-moz-focusring,
+[type="reset"]:-moz-focusring,
+[type="submit"]:-moz-focusring {
+  outline: 1px dotted ButtonText;
+}
+
 /**
  * Change the border, margin, and padding in all browsers (opinionated).
  */
@@ -337,8 +367,8 @@ textarea {
  * 2. Remove the padding in IE 10-.
  */
 
-[type='checkbox'],
-[type='radio'] {
+[type="checkbox"],
+[type="radio"] {
   box-sizing: border-box; /* 1 */
   padding: 0; /* 2 */
 }
@@ -347,17 +377,27 @@ textarea {
  * Correct the cursor style of increment and decrement buttons in Chrome.
  */
 
-[type='number']::-webkit-inner-spin-button,
-[type='number']::-webkit-outer-spin-button {
+[type="number"]::-webkit-inner-spin-button,
+[type="number"]::-webkit-outer-spin-button {
   height: auto;
 }
 
+/**
+ * 1. Correct the odd appearance in Chrome and Safari.
+ * 2. Correct the outline style in Safari.
+ */
+
+[type="search"] {
+  -webkit-appearance: textfield; /* 1 */
+  outline-offset: -2px; /* 2 */
+}
+
 /**
  * Remove the inner padding and cancel buttons in Chrome and Safari on OS X.
  */
 
-[type='search']::-webkit-search-cancel-button,
-[type='search']::-webkit-search-decoration {
+[type="search"]::-webkit-search-cancel-button,
+[type="search"]::-webkit-search-decoration {
   -webkit-appearance: none;
 }
 

package/button-refactor/ButtonsLinksAPI.md

@@ -0,0 +1,127 @@
+# 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
+[x] https://github.com/github/primer/issues/141
+- Accessory button component, should reconcile with reaction button (sister component to Button)
+[x] https://github.com/github/primer/issues/220
+- Tracking issue, mentions Button in the context of API consistency
+[x] https://github.com/github/primer/issues/253
+- Button audit, anatomy spec, design considerations, some button link discussion, icon buttons (this issue is very informative!)
+[x] https://github.com/github/primer/issues/263
+- More design discussion, particularly focused on outline button
+[x] https://github.com/github/primer/issues/272
+- Make icon only buttons square
+[x] https://github.com/github/primer/issues/321
+- Super specific button use case?
+[x] https://github.com/github/primer/issues/350
+- a11y audit with task list for PVC
+[x] https://github.com/github/primer/issues/382
+- React button refactor
+[x] https://github.com/github/primer/issues/468
+- Visual bugs (colors, state)
+[x] https://github.com/github/primer/discussions/87
+- Discussion about accessory buttons
+[x] https://github.com/github/primer/discussions/211
+- Open ended discussion about primary button as dropdown
+[x] https://github.com/github/primer/discussions/459
+- Allie's thoughts on limiting icon only buttons and working towards encouraging visual labels
+[x] 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` |
+| ButtonStyledAsLink | `button` that visually looks like a link |
+| ReactionButton | `button` snowflake with specific styles/interaction design |
+| ButtonGroup | wrapper to handle grouping buttons |
+| Link | `a` with variants, optional trailing visuals |
+| LinkStyledAsButton | `a` with button variants, required trailing visuals |
+
+## Component API breakdown
+
+### Button
+
+| prop | type | options | default | notes |
+| -- | -- | -- | -- | -- |
+| `variant` | one-of string | `primary` `secondary` `danger` `outline`? | `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` `outline`? | `secondary` | |
+| `size` | one-of string | `small` `default` `large` | `default | |
+| `label` | string | button description | null | |
+| `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 |
+
+### 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 | |
+| `showTrailingVisual` | boolean | specific octicon for new tab or new page (or anchor?) | null | |
+
+### ButtonStyledAsLink
+
+| prop | type | options | default | notes |
+| -- | -- | -- | -- | -- |
+| `variant` | one-of string | see above confusion | `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 | |
+| `fullWidth` | boolean | `true/false` | `false` | |
+| `visualPosition` | one-of string | `fixed` `some-other-word` | `fixed` | I think this should be fixed for link styles (so maybe we dont need this prop) |
+
+### ButtonGroup
+
+| prop | type | options | default | notes |
+| -- | -- | -- | -- | -- |
+| | | | |
+
+## Notes
+[] Should Button have a `secondary` variant, or should it be the default with no additional class?
+[] How granular should icon positioning be?
+- If both trailingVisual and trailingAction exist, and visualPosition is `fixed`, the trailingVisual will "lock" to the trailingAction (unless we are more granular and specify different lock scenarios as props)
+- One idea would be to always lock trailingAction (always affix it to the right of a button which will only be visible on full width) and maintain visualPosition prop _only_ for visuals
+[] Thoughts on buttons with trailingAction having less margin-right?
+[] Should we think about underlining links with this work, or is that scope creep?
+[] Button styled as link is trickiest, and we need to decide how much logic that component can have compared to Button

package/button-refactor/button.scss

@@ -0,0 +1,204 @@
+.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;
+  height: 32px;
+  padding: 0 16px;
+
+  &:not(.Button--iconOnly) {
+    display: grid;
+    grid-template-areas: 'leadingVisual text trailingVisual trailingAction';
+    grid-template-columns: min-content minmax(0, auto) min-content min-content;
+    align-items: center;
+  }
+
+  // column-gap persists with empty grid-areas, margin applies only when children exist
+  > :not(:last-child) {
+    margin-right: $spacer-2;
+  }
+
+  &:hover,
+  &.hover,
+  [open] > & {
+    background-color: var(--color-btn-hover-bg);
+    border-color: var(--color-btn-hover-border);
+    transition-duration: 0.1s;
+  }
+
+  &:active {
+    background-color: var(--color-btn-active-bg);
+    border-color: var(--color-btn-active-border);
+    transition: none;
+  }
+
+  &.Button--pressed,
+  &[aria-pressed='true'] {
+    background-color: var(--color-btn-selected-bg);
+    box-shadow: var(--color-primer-shadow-inset);
+  }
+
+  &:disabled,
+  &.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--small {
+    height: 28px;
+    font-size: $font-size-small;
+  }
+
+  &.Button--large {
+  }
+
+  &.Button--fullWidth {
+    width: 100%;
+
+    .Button-trailingVisual {
+      margin-left: auto;
+    }
+  }
+
+  &.Button--default {
+    color: var(--color-btn-text);
+    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);
+  }
+
+  &.Button--primary {
+    color: var(--color-btn-primary-text);
+    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,
+    &.hover,
+    [open] > & {
+      background-color: var(--color-btn-primary-hover-bg);
+      border-color: var(--color-btn-primary-hover-border);
+    }
+
+    &:active,
+    &.Button--pressed,
+    &[aria-pressed='true'] {
+      background-color: var(--color-btn-primary-selected-bg);
+      box-shadow: var(--color-btn-primary-selected-shadow);
+    }
+
+    &:disabled,
+    &.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);
+    }
+  }
+
+  &.Button--secondary {
+  }
+
+  &.Button--outline {
+    color: var(--color-btn-outline-text);
+
+    &:hover,
+    [open] > & {
+      color: var(--color-btn-outline-hover-text);
+      background-color: var(--color-btn-outline-hover-bg);
+      border-color: var(--color-btn-outline-hover-border);
+      box-shadow: var(--color-btn-outline-hover-shadow), var(--color-btn-outline-hover-inset-shadow);
+    }
+
+    &:active,
+    &.Button--pressed,
+    &[aria-pressed='true'] {
+      color: var(--color-btn-outline-selected-text);
+      background-color: var(--color-btn-outline-selected-bg);
+      border-color: var(--color-btn-outline-selected-border);
+      box-shadow: var(--color-btn-outline-selected-shadow);
+    }
+
+    &:disabled,
+    &.disabled,
+    &[aria-disabled='true'] {
+      color: var(--color-btn-outline-disabled-text);
+      background-color: var(--color-btn-outline-disabled-bg);
+      border-color: var(--color-btn-border);
+      box-shadow: none;
+    }
+  }
+
+  &.Button--danger {
+    color: var(--color-btn-danger-text);
+
+    .octicon {
+      color: var(--color-btn-danger-icon);
+    }
+
+    &:hover,
+    [open] > & {
+      color: 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,
+    &.Button--pressed,
+    &[aria-pressed='true'] {
+      color: 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);
+      background-color: var(--color-btn-danger-disabled-bg);
+      border-color: var(--color-btn-border);
+      box-shadow: none;
+    }
+  }
+}
+
+.Button-label {
+  grid-area: text;
+  white-space: nowrap;
+}
+
+.Button-visual {
+  display: flex;
+}
+
+.Button-visual--fixed {
+  grid-template-columns: min-content min-content min-content min-content;
+  place-content: center;
+}
+
+.Button-leadingVisual {
+  grid-area: leadingVisual;
+}
+
+.Button-trailingVisual {
+  grid-area: trailingVisual;
+}
+
+.Button-trailingAction {
+  grid-area: trailingAction;
+}

package/button-refactor/icon-button.scss

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

package/button-refactor/link.scss

@@ -0,0 +1,61 @@
+// Links
+
+.Link {
+  color: var(--color-accent-fg);
+
+  &:hover {
+    text-decoration: underline;
+    cursor: pointer;
+  }
+}
+
+.Link--trailingVisual {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 4px;
+}
+// .Link--primary {
+//   color: var(--color-fg-default) !important;
+
+//   &:hover {
+//     color: var(--color-accent-fg) !important;
+//   }
+// }
+
+// .Link--secondary {
+//   color: var(--color-fg-muted) !important;
+
+//   &:hover {
+//     color: var(--color-accent-fg) !important;
+//   }
+// }
+
+// .Link--muted {
+//   color: var(--color-fg-muted) !important;
+
+//   &:hover {
+//     color: var(--color-accent-fg) !important;
+//     text-decoration: none;
+//   }
+// }
+
+// // Set the link color only on hover
+// // Useful when you want only part of a link to turn blue on hover
+// .Link--onHover {
+//   &:hover {
+//     color: var(--color-accent-fg) !important;
+//     text-decoration: underline;
+//     cursor: pointer;
+//   }
+// }
+
+// // When using a color utility class inside of a link class,
+// // color should change with link on hover.
+// .Link--secondary,
+// .Link--primary,
+// .Link--muted {
+//   &:hover [class*='color-text'] {
+//     color: inherit !important;
+//   }
+// }

package/buttons/button.scss

@@ -100,6 +100,14 @@
       color: var(--color-primer-fg-disabled);
     }
   }
+
+  // Keep :focus after :disabled. Allows to see the focus ring even on disabled buttons
+  &:focus,
+  &.focus {
+    border-color: var(--color-btn-focus-border);
+    outline: none;
+    box-shadow: var(--color-btn-focus-shadow);
+  }
 }
 
 // Primary button
@@ -136,6 +144,13 @@
     }
   }
 
+  &:focus,
+  &.focus {
+    background-color: var(--color-btn-primary-focus-bg);
+    border-color: var(--color-btn-primary-focus-border);
+    box-shadow: var(--color-btn-primary-focus-shadow);
+  }
+
   .Counter {
     color: inherit;
     background-color: var(--color-btn-primary-counter-bg);
@@ -189,6 +204,11 @@
     }
   }
 
+  &:focus {
+    border-color: var(--color-btn-outline-focus-border);
+    box-shadow: var(--color-btn-outline-focus-shadow);
+  }
+
   .Counter {
     color: inherit;
     background-color: var(--color-btn-outline-counter-bg);
@@ -246,6 +266,11 @@
     }
   }
 
+  &:focus {
+    border-color: var(--color-btn-danger-focus-border);
+    box-shadow: var(--color-btn-danger-focus-shadow);
+  }
+
   .Counter {
     color: inherit;
     background-color: var(--color-btn-danger-counter-bg);