@primer/css 0.0.0-20220823123728 → 0.0.0-20220823201818

package/CHANGELOG.md

@@ -1,10 +1,6 @@
 # @primer/css
 
-## 0.0.0-20220823123728
-
-### Minor Changes
-
-- [#2192](https://github.com/primer/css/pull/2192) [`c2134afe`](https://github.com/primer/css/commit/c2134afe4e9f7d752114bdbda5398608b8b0fe0a) Thanks [@tobiasahlin](https://github.com/tobiasahlin)! - Prepare marketing typography for variable fonts, align font weights with OpenType spec
+## 0.0.0-20220823201818
 
 ### Patch Changes
 

package/RELEASING.md

@@ -31,7 +31,7 @@ The release process is automated by [changesets]. After you familiarize yourself
 
     After tests run, the docs site will be deployed and `@primer/css` will be published with your changes to the `latest` dist-tag. You can check [npm](https://www.npmjs.com/package/@primer/css?activeTab=versions) to see if actions has finished.
 
-2. done 🎉
+2. Done! 🎉
 
 
 ## Update github.com (in `github/github`):

package/actionlist/action-list-item-divider.scss

@@ -6,7 +6,7 @@
     display: flex;
     padding: ($spacer-1 * 1.5) $spacer-2;
     font-size: $font-size-small;
-    font-weight: $font-weight-semibold;
+    font-weight: $font-weight-bold;
     color: var(--color-fg-muted);
     flex-direction: column;
   }
@@ -25,7 +25,7 @@
 
   .ActionList-sectionDivider-title {
     font-size: $font-size-small;
-    font-weight: $font-weight-semibold;
+    font-weight: $font-weight-bold;
     color: var(--color-fg-muted);
   }
 }

package/actionlist/action-list-item.scss

@@ -141,7 +141,7 @@
   &.ActionList-item--navActive {
     &:not(.ActionList-item--subItem) {
       .ActionList-item-label {
-        font-weight: $font-weight-semibold;
+        font-weight: $font-weight-bold;
       }
     }
 
@@ -437,7 +437,7 @@
 
     &.ActionList-content--hasActiveSubItem {
       > .ActionList-item-label {
-        font-weight: $font-weight-semibold;
+        font-weight: $font-weight-bold;
       }
     }
   }
@@ -461,7 +461,7 @@
       background: var(--color-action-list-item-default-selected-bg);
 
       .ActionList-item-label {
-        font-weight: $font-weight-semibold;
+        font-weight: $font-weight-bold;
       }
 
       &::before,
@@ -542,7 +542,7 @@
   }
 
   .ActionList-item-label {
-    font-weight: $font-weight-semibold;
+    font-weight: $font-weight-bold;
   }
 }
 

package/alerts/flash.scss

@@ -150,6 +150,6 @@
   padding: $em-spacer-5;
   // stylelint-disable-next-line primer/spacing
   margin-bottom: 0.8em;
-  font-weight: $font-weight-semibold;
+  font-weight: $font-weight-bold;
   background-color: var(--color-attention-subtle);
 }

package/autocomplete/autocomplete.scss

@@ -82,7 +82,7 @@
   width: 100%;
   padding: $spacer-1 $spacer-2;
   overflow: hidden;
-  font-weight: $font-weight-semibold;
+  font-weight: $font-weight-bold;
   color: var(--color-fg-default);
   text-align: left;
   text-decoration: none;

package/autocomplete/suggester.scss

@@ -19,7 +19,7 @@
   li {
     display: block;
     padding: $spacer-1 $spacer-2;
-    font-weight: $font-weight-medium;
+    font-weight: $font-weight-semibold;
     border-bottom: $border-width $border-style var(--color-border-muted);
 
     small {

package/base/base.scss

@@ -31,7 +31,7 @@ a {
 
 b,
 strong {
-  font-weight: $font-weight-semibold;
+  font-weight: $font-weight-bold;
 }
 
 // Horizontal lines

package/base/normalize.scss

@@ -260,7 +260,7 @@ textarea {
  */
 
 optgroup {
-  font-weight: $font-weight-semibold;
+  font-weight: $font-weight-bold;
 }
 
 /**

package/box/box.scss

@@ -82,7 +82,7 @@
 
 .Box-title {
   font-size: $body-font-size;
-  font-weight: $font-weight-semibold;
+  font-weight: $font-weight-bold;
 }
 
 .Box-body {

package/button-refactor/ButtonsLinksAPI.md

@@ -0,0 +1,116 @@
+# 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
+- https://github.com/github/primer/issues/65
+  -- Segmented control, pressed state discussion
+  https://github.com/primer/design/pull/193
+
+## 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)
+- [ ]  Should `Button` proper handle a `pressed` (formerly selected) state, or should we create a new component `SegmentedControl` that uses `Button` and provides specific design (color, shadows)?

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,305 @@
+// temporary, pre primitives release
+:root {
+  --primer-duration-fast: 80ms;
+  --primer-easing-easeInOut: cubic-bezier(0.65, 0, 0.35, 1);
+}
+
+// base button
+.Button {
+  position: relative;
+  font-size: var(--primer-text-body-size-medium);
+  font-weight: var(--base-text-weight-medium);
+  cursor: pointer;
+  user-select: none;
+  background-color: transparent;
+  border: var(--primer-borderWidth-thin) solid;
+  border-color: transparent;
+  border-radius: var(--primer-borderRadius-medium);
+  color: var(--color-btn-text);
+  transition: var(--primer-duration-fast) var(--primer-easing-easeInOut);
+  transition-property: color, fill, background-color, border-color;
+  text-align: center;
+  height: var(--primer-control-medium-size);
+  padding: 0 var(--primer-control-medium-paddingInline-normal);
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  gap: var(--primer-control-medium-gap);
+
+  // mobile friendly sizing
+  @media (pointer: course) {
+    &::before {
+      @include minTouchTarget(48px, 48px);
+    }
+  }
+
+  // base states
+
+  &:hover,
+  [open] > & {
+    transition-duration: var(--primer-duration-fast);
+  }
+
+  &:active,
+  &.Button--active {
+    transition: none;
+  }
+
+  &:disabled,
+  &.Button--disabled,
+  &[aria-disabled='true'] {
+    cursor: not-allowed;
+    box-shadow: none;
+  }
+
+  &:focus {
+    @include focusOutline;
+  }
+}
+
+.Button-withTooltip {
+    position: relative;
+    display: inline-block;
+}
+
+a.Button,
+summary.Button {
+  display: inline-flex;
+
+  &:hover {
+    text-decoration: none;
+  }
+}
+
+// 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;
+  place-content: center;
+  //   padding-bottom: 1px; // optical alignment for firefox
+
+  > :not(:last-child) {
+    margin-right: var(--primer-control-medium-gap);
+  }
+}
+
+// center child elements for fullWidth
+.Button-content--alignStart {
+  justify-content: start;
+}
+
+// button child elements
+
+// align svg
+.Button-visual {
+  display: flex;
+  pointer-events: none; // allow click handler to work, avoiding visuals
+}
+
+.Button-label {
+  grid-area: text;
+  white-space: nowrap;
+  line-height: var(--primer-text-body-lineHeight-medium);
+}
+
+.Button-leadingVisual {
+  grid-area: leadingVisual;
+}
+
+.Button-trailingVisual {
+  grid-area: trailingVisual;
+}
+
+.Button-trailingAction {
+  margin-right: calc(var(--base-size-4) * -1);
+}
+
+// sizes
+
+.Button--small {
+  font-size: var(--primer-text-body-size-small);
+  height: var(--primer-control-small-size);
+  padding: 0 var(--primer-control-small-paddingInline-normal);
+  gap: var(--primer-control-small-gap);
+
+  .Button-label {
+    line-height: var(--primer-text-body-lineHeight-small);
+  }
+
+  .Button-content {
+    > :not(:last-child) {
+      margin-right: var(--primer-control-small-gap);
+    }
+  }
+}
+
+.Button--large {
+  height: var(--primer-control-large-size);
+  padding: 0 var(--primer-control-large-paddingInline-normal);
+  gap: var(--primer-control-large-gap);
+
+  .Button-label {
+    line-height: var(--primer-text-body-lineHeight-large);
+  }
+
+  .Button-content {
+    > :not(:last-child) {
+      margin-right: var(--primer-control-large-gap);
+    }
+  }
+}
+
+.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-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);
+  }
+}
+
+// link color without svg
+.Button--invisible {
+  color: var(--color-fg-default);
+  fill: var(--color-fg-default);
+  border: none;
+
+  &:hover,
+  [open] > & {
+    background-color: var(--color-segmented-control-button-hover-bg);
+  }
+
+  &[aria-pressed='true'],
+  &:active,
+  &.Button--active,
+  &.Button--pressed {
+    background-color: var(--color-segmented-control-button-active-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);
+  }
+
+  // if visual is present, muted label color
+  .Button-label:not(:only-child) {
+    color: var(--color-btn-text);
+  }
+
+  // if trailingAction is present, muted label color
+  .Button-content:not(:only-child) {
+    .Button-label {
+      color: var(--color-btn-text);
+    }
+  }
+}
+
+// danger
+.Button--danger {
+  color: var(--color-btn-danger-text);
+  fill: var(--color-btn-danger-icon);
+  background-color: var(--color-btn-bg);
+  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: var(--primer-control-medium-size);
+
+  &.Button--small {
+    width: var(--primer-control-small-size);
+  }
+
+  &.Button--large {
+    width: var(--primer-control-large-size);
+  }
+}

package/button-refactor/index.scss

@@ -0,0 +1,6 @@
+@import '../support/index.scss';
+@import './button.scss';
+@import './button-group.scss';
+@import './icon-button.scss';
+@import './link.scss';
+@import './link-styled-as-button.scss';

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--alignStart {
+  @extend .Button-content--alignStart;
+}
+
+// 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;
+}