@primer/css 0.0.0-20220120184157 → 0.0.0-2022020193741

package/button-refactor/ButtonsLinksAPI.md

@@ -1,111 +0,0 @@
-# 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

@@ -1,245 +0,0 @@
-// 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

@@ -1,14 +0,0 @@
-.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

@@ -1,75 +0,0 @@
-// 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

@@ -1,25 +0,0 @@
-.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/dist/marketing-links.css

@@ -1,2 +0,0 @@
-.link-mktg{position:relative;display:inline-block}.link-mktg:hover{text-decoration:none}.link-mktg:active{outline:none}.link-mktg::after,.link-mktg.link-emphasis-mktg::before{position:absolute;bottom:-0.15em;left:0;width:calc(100% - 1em);height:2px;pointer-events:none;content:"";background-color:currentColor;transform:scaleX(0);transform-origin:0 0}@media screen and (prefers-reduced-motion: no-preference){.link-mktg::after,.link-mktg.link-emphasis-mktg::before{transition:transform .3s ease}}.link-mktg.link-emphasis-mktg::before{opacity:.2;transform:scaleX(1)}.link-mktg:hover::after,.link-mktg:focus::after,.link-mktg:active::after{transform:scaleX(1)}.link-mktg.arrow-target-mktg .arrow-symbol-mktg{margin-left:-0.25em}
-/*# sourceMappingURL=marketing-links.css.map */

package/dist/marketing-links.css.map

@@ -1 +0,0 @@
-{"version":3,"sources":["file:///home/runner/work/css/css/src/marketing/links/index.scss%23sass"],"names":[],"mappings":"AAynBA,WAAA,iBACE,CAAA,oBAAA,CAAA,iBAAA,oBAAA,CAAA,kBAAA,YAAA,CAAA,wDAAA,iBAAA,CAAA,cAAA,CAAA,MAAA,CAAA,sBAAA,CAAA,UAAA,CAAA,mBAAA,CAAA,UAAA,CAAA,6BAAA,CAAA,mBAAA,CAAA,oBAAA,CAAA,0DAAA,wDAAA,6BAAA,CAAA,CAAA,sCAAA,UAAA,CAAA,mBAAA,CAAA,yEAAA,mBAAA,CAAA,gDAAA,mBAAA","file":"marketing-links.css"}

package/dist/marketing-links.js

@@ -1 +0,0 @@
-export {cssstats: require('./stats/marketing-links.json')}

package/dist/stats/marketing-links.json

@@ -1 +0,0 @@
-{"size":726,"gzipSize":358,"humanizedSize":"726B","humanizedGzipSize":"358B","rules":{"total":8,"size":{"graph":[2,1,1,10,1,2,1,1],"max":10,"average":2.375},"selectorByRuleSizes":[{"selector":".link-mktg::after,.link-mktg.link-emphasis-mktg::before","declarations":10},{"selector":".link-mktg.link-emphasis-mktg::before","declarations":2},{"selector":".link-mktg","declarations":2},{"selector":".link-mktg.arrow-target-mktg .arrow-symbol-mktg","declarations":1},{"selector":".link-mktg:hover::after,.link-mktg:focus::after,.link-mktg:active::after","declarations":1},{"selector":".link-mktg::after,.link-mktg.link-emphasis-mktg::before","declarations":1},{"selector":".link-mktg:active","declarations":1},{"selector":".link-mktg:hover","declarations":1}]},"selectors":{"total":12,"type":0,"class":12,"id":0,"pseudoClass":5,"pseudoElement":8,"values":[".link-mktg",".link-mktg:hover",".link-mktg:active",".link-mktg::after",".link-mktg.link-emphasis-mktg::before",".link-mktg::after",".link-mktg.link-emphasis-mktg::before",".link-mktg.link-emphasis-mktg::before",".link-mktg:hover::after",".link-mktg:focus::after",".link-mktg:active::after",".link-mktg.arrow-target-mktg .arrow-symbol-mktg"],"specificity":{"max":30,"average":19}},"declarations":{"total":19,"unique":18,"uniqueToTotalRatio":0.9473684210526315,"properties":{"position":["relative","absolute"],"display":["inline-block"],"text-decoration":["none"],"outline":["none"],"bottom":["-0.15em"],"left":["0"],"width":["calc(100% - 1em)"],"height":["2px"],"pointer-events":["none"],"content":["\"\""],"background-color":["currentColor"],"transform":["scaleX(0)","scaleX(1)","scaleX(1)"],"transform-origin":["0 0"],"transition":["transform .3s ease"],"opacity":[".2"],"margin-left":["-0.25em"]}},"mediaQueries":{"total":1,"unique":1,"values":["screen and (prefers-reduced-motion: no-preference)"],"contents":[{"value":"screen and (prefers-reduced-motion: no-preference)","rules":{"total":1,"size":{"graph":[1],"max":1,"average":1},"selectorByRuleSizes":[{"selector":".link-mktg::after,.link-mktg.link-emphasis-mktg::before","declarations":1}]},"selectors":{"total":2,"type":0,"class":2,"id":0,"pseudoClass":0,"pseudoElement":2,"values":[".link-mktg::after",".link-mktg.link-emphasis-mktg::before"],"specificity":{"max":21,"average":16}},"declarations":{"total":1,"unique":1,"uniqueToTotalRatio":1,"properties":{"transition":["transform .3s ease"]}}}]}}