@primer/css 0.0.0-20220118041832 → 0.0.0-20220118183002

package/layout/layout.scss

@@ -47,7 +47,8 @@
   }
 
   &.Layout--gutter-none {
-    --Layout-gutter: 0;
+    // stylelint-disable-next-line length-zero-no-unit
+    --Layout-gutter: 0px;
   }
 
   &.Layout--gutter-condensed {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/css",
-  "version": "0.0.0-20220118041832",
+  "version": "0.0.0-20220118183002",
   "description": "The CSS implementation of GitHub's Primer Design System",
   "homepage": "https://primer.style/css",
   "author": "GitHub, Inc.",
@@ -24,6 +24,7 @@
   ],
   "scripts": {
     "dist": "script/dist.js",
+    "dist:watch": "chokidar \"src/**/*.scss\" -c \"script/dist.js\"",
     "stylelint": "stylelint --quiet 'src/**/*.scss'",
     "eslint": "eslint deprecations.js __tests__ script",
     "prepublishOnly": "script/prepublish",
@@ -44,6 +45,7 @@
     "@koddsson/postcss-sass": "5.0.0",
     "@primer/stylelint-config": "12.2.0",
     "autoprefixer": "10.4.1",
+    "chokidar-cli": "3.0.0",
     "cssstats": "4.0.2",
     "eslint": "8.6.0",
     "eslint-plugin-github": "4.3.5",

package/button-refactor/ButtonsLinksAPI.md

@@ -1,127 +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
-[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

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

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

package/button-refactor/link.scss

@@ -1,61 +0,0 @@
-// 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;
-//   }
-// }