@primer/css 0.0.0-20220113180546 → 0.0.0-20220114013357

package/CHANGELOG.md

@@ -1,6 +1,6 @@
 # @primer/css
 
-## 0.0.0-20220113180546
+## 0.0.0-20220114013357
 
 ### Minor Changes
 

package/button-refactor/ButtonsLinksAPI.md

@@ -0,0 +1,68 @@
+# 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 |
+
+## Component design specs

package/button-refactor/button.scss

@@ -0,0 +1,181 @@
+.Button {
+  position: relative;
+  font-size: $body-font-size;
+  font-weight: $font-weight-semibold;
+  cursor: pointer;
+  user-select: none;
+  border: $border-width $border-style;
+  border-radius: $border-radius;
+  color: var(--color-btn-text);
+  background-color: var(--color-btn-bg);
+  border-color: var(--color-btn-border);
+  box-shadow: var(--color-btn-shadow), var(--color-btn-inset-shadow);
+  transition: 0.2s cubic-bezier(0.3, 0, 0.5, 1);
+  transition-property: color, background-color, border-color;
+  height: 32px;
+  padding: 0 16px;
+  display: grid;
+  grid-template-areas: 'leadingIcon text trailingIcon 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-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--leadingVisual {
+  grid-area: 'leadingVisual';
+}
+
+.Button--trailingVisual {
+  grid-area: 'trailingVisual';
+}
+
+.Button--trailingAction {
+  grid-area: 'leadingAction';
+}

package/core/index.scss

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