@primer/css 20.2.1-rc.1659cd9a → 20.2.2-rc.705b5cf4

package/forms/FormControl.scss

@@ -0,0 +1,382 @@
+// stylelint-disable primer/typography, primer/borders, primer/spacing, primer/box-shadow, max-nesting-depth
+
+// group label, field, caption and error message
+.FormGroup {
+  display: inline-flex;
+  flex-direction: column;
+  gap: var(--base-size-4, 4px);
+}
+
+// fill container
+.FormGroup--fullWidth {
+  display: flex;
+
+  // stretch field to fill container
+  .FormControl-fieldWrap {
+    flex-grow: 1;
+  }
+}
+
+// <label>
+.FormControl-label {
+  font-size: var(--primer-text-body-size-medium, 14px);
+  font-weight: var(--base-text-weight-semibold, 600);
+  line-height: var(--primer-text-body-lineHeight-medium, 20px);
+  user-select: none;
+}
+
+// optional caption
+.FormControl-caption {
+  margin-bottom: 0;
+  font-size: var(--primer-text-caption-size, 12px);
+  font-weight: var(--primer-text-caption-weight, 400);
+  line-height: var(--primer-text-caption-lineHeight, 16px);
+  color: var(--color-fg-muted);
+}
+
+.FormControl-validation {
+  display: flex;
+  font-size: var(--primer-text-caption-size, 12px);
+  font-weight: var(--base-text-weight-semibold, 600);
+  color: var(--color-danger-fg);
+  fill: var(--color-danger-fg);
+  flex-direction: row;
+  align-items: center;
+  gap: var(--base-size-4, 4px);
+
+  // stylelint-disable-next-line selector-max-type
+  p {
+    margin-bottom: 0;
+  }
+}
+
+// shared among all form control components (input, select, textarea, checkbox, radio)
+.FormControl {
+  background-color: var(--color-canvas-default);
+  border: solid var(--primer-borderWidth-thin, 1px) var(--color-border-default);
+
+  &[disabled] {
+    color: var(--color-primer-fg-disabled);
+    background-color: var(--color-input-disabled-bg);
+    border-color: var(--color-border-default);
+    -webkit-text-fill-color: var(--color-primer-fg-disabled);
+    opacity: 1;
+  }
+
+  &:not(:focus)[invalid] {
+    border-color: var(--color-danger-emphasis);
+  }
+
+  // <select> and <input>
+  &.FormControl--input,
+  &.FormControl--select {
+    height: var(--primer-control-medium-size, 32px);
+    font-size: var(--primer-text-body-size-medium, 14px);
+    line-height: var(--primer-text-body-lineHeight-medium, 20px);
+    border-radius: var(--primer-borderRadius-medium, 6px);
+    padding-inline: var(--primer-control-medium-paddingInline-condensed, 8px);
+    transition: 80ms cubic-bezier(0.33, 1, 0.68, 1);
+    transition-property: color, background-color, box-shadow, border-color;
+
+    &[disabled] {
+      &::placeholder {
+        color: var(--color-primer-fg-disabled);
+      }
+    }
+
+    ::placeholder {
+      color: var(--color-fg-subtle);
+      opacity: 1;
+    }
+  }
+
+  // sizes
+
+  &.FormControl--small {
+    height: var(--primer-control-small-size, 28px);
+    font-size: var(--primer-text-body-size-small, 12px);
+  }
+
+  &.FormControl--medium {
+    height: var(--primer-control-medium-size, 32px);
+  }
+
+  &.FormControl--large {
+    height: var(--primer-control-large-size, 40px);
+    padding-inline: var(--primer-control-large-paddingInline-normal, 12px);
+  }
+}
+
+// pseudo input styles to allow for visual and action slots
+// set input styles on -fieldWrap, remove styles from <input>
+.FormControl-fieldWrap {
+  display: inline-grid;
+  height: var(--primer-control-medium-size, 32px);
+  background-color: var(--color-canvas-default);
+  border-radius: var(--primer-borderRadius-medium, 6px);
+  box-shadow: var(--primer-borderInset-thin, 1px) var(--color-border-default);
+  grid-template-rows: auto;
+  gap: var(--primer-controlStack-medium-gap-condensed, 8px);
+  align-items: center;
+  align-content: center;
+  padding-inline: var(--primer-control-medium-paddingInline-condensed, 8px);
+
+  .FormControl {
+    padding: unset;
+    background-color: transparent;
+    border: 0;
+
+    &:focus-visible,
+    &:focus {
+      outline: none;
+      box-shadow: none;
+    }
+  }
+
+  &:focus-within {
+    @include focusBoxShadowInset(2px, var(--color-accent-fg));
+  }
+
+  &.FormControl-fieldWrap--disabled {
+    color: var(--color-primer-fg-disabled);
+    background-color: var(--color-input-disabled-bg);
+  }
+
+  &.FormControl-fieldWrap--invalid:not(:focus-within) {
+    box-shadow: var(--primer-borderInset-thin, 1px) var(--color-danger-emphasis);
+  }
+
+  // if leadingVisual is present
+  &.FormControl-fieldWrap--input-leadingVisual {
+    grid-template-columns: var(--base-size-16, 16px) minmax(0, auto);
+
+    .FormControl--input {
+      padding-inline-start: calc(var(--base-size-16, 16px) + var(--primer-control-medium-paddingInline-condensed, 8px));
+    }
+
+    // if leadingVisual and trailingAction are present
+    &.FormControl-fieldWrap--input-trailingAction {
+      grid-template-columns: var(--base-size-16, 16px) minmax(0, auto) min-content;
+
+      .FormControl--input-trailingAction {
+        grid-column: 3 / 4;
+      }
+    }
+  }
+
+  // if trailingAction is present
+  &.FormControl-fieldWrap--input-trailingAction {
+    grid-template-columns: minmax(0, auto) min-content;
+  }
+
+  &.FormControl-fieldWrap--input {
+    grid-template-rows: max-content;
+
+    .FormControl--input-leadingVisual {
+      grid-column: 1 / 2;
+      grid-row: 1;
+    }
+
+    // <input> spans entire grid
+    .FormControl--input {
+      grid-column: 1 / -1;
+      grid-row: 1;
+    }
+
+    // TODO: replace with new Button component
+    // trailingAction will auto fill last grid slot
+    .FormControl--input-trailingAction {
+      display: grid;
+      width: calc(var(--primer-control-medium-size, 32px) - var(--base-size-4, 4px));
+      height: calc(var(--primer-control-medium-size, 32px) - var(--base-size-4, 4px));
+      padding: 0;
+      // optically align the icon with field padding
+      margin-right: calc(calc(var(--primer-control-medium-paddingInline-condensed, 8px) - 0.125rem) * -1);
+      color: var(--color-fg-muted);
+      cursor: pointer;
+      user-select: none;
+      background-color: transparent;
+      border: solid var(--primer-borderWidth-thin, 1px) transparent;
+      border-radius: var(--primer-borderRadius-medium, 6px);
+      transition: 0.2s cubic-bezier(0.3, 0, 0.5, 1);
+      transition-property: color, background-color, border-color;
+      grid-row: 1;
+      place-content: center;
+      place-self: center end;
+      grid-column: 2 / 3;
+
+      &:hover {
+        background-color: var(--color-btn-hover-bg);
+        border: solid var(--primer-borderWidth-thin, 1px) var(--color-btn-hover-bg);
+      }
+
+      &[disabled] {
+        color: var(--color-primer-fg-disabled);
+        pointer-events: none;
+      }
+    }
+
+    // sizes
+
+    // these selectors can be refactored to use :has()
+    &.FormControl--small {
+      height: var(--primer-control-small-size, 28px);
+      font-size: var(--primer-text-body-size-small, 12px);
+
+      .FormControl--input-trailingAction {
+        width: calc(var(--primer-control-small-size, 28px) - var(--base-size-8, 8px));
+        height: calc(var(--primer-control-small-size, 28px) - var(--base-size-8, 8px));
+      }
+    }
+
+    &.FormControl--medium {
+      height: var(--primer-control-medium-size, 32px);
+
+      .FormControl--input-trailingAction {
+        width: calc(var(--primer-control-medium-size, 32px) - var(--base-size-8, 8px));
+        height: calc(var(--primer-control-medium-size, 32px) - var(--base-size-8, 8px));
+      }
+    }
+
+    &.FormControl--large {
+      height: var(--primer-control-large-size, 40px);
+      padding-inline: var(--primer-control-large-paddingInline-normal, 12px);
+
+      .FormControl--input-trailingAction {
+        width: calc(var(--primer-control-large-size, 40px) - var(--base-size-8, 8px));
+        height: calc(var(--primer-control-large-size, 40px) - var(--base-size-8, 8px));
+        margin-right: calc(calc(var(--primer-control-medium-paddingInline-normal, 12px) - 0.125rem) * -1);
+      }
+    }
+  }
+}
+
+.FormControl-fieldWrap--select {
+  grid-template-columns: minmax(0, auto) var(--base-size-16, 16px);
+  padding-inline-end: var(--primer-control-medium-paddingInline-condensed, 8px);
+
+  // mask allows for background-color to respect themes
+  &::after {
+    width: var(--base-size-16, 16px);
+    height: var(--base-size-16, 16px);
+    pointer-events: none;
+    content: '';
+    background-color: var(--color-fg-muted);
+    mask: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0iIzU4NjA2OSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNNC40MjcgOS40MjdsMy4zOTYgMy4zOTZhLjI1MS4yNTEgMCAwMC4zNTQgMGwzLjM5Ni0zLjM5NkEuMjUuMjUgMCAwMDExLjM5NiA5SDQuNjA0YS4yNS4yNSAwIDAwLS4xNzcuNDI3ek00LjQyMyA2LjQ3TDcuODIgMy4wNzJhLjI1LjI1IDAgMDEuMzU0IDBMMTEuNTcgNi40N2EuMjUuMjUgMCAwMS0uMTc3LjQyN0g0LjZhLjI1LjI1IDAgMDEtLjE3Ny0uNDI3eiIgLz48L3N2Zz4=');
+    mask-size: cover;
+    grid-column: 2;
+    grid-row: 1;
+    place-self: center end;
+  }
+
+  // spans entire grid below mask
+  .FormControl {
+    grid-column: 1/-1;
+    grid-row: 1;
+    appearance: none;
+    padding-right: var(--base-size-16, 16px);
+  }
+}
+
+.FormGroup--checkbox {
+  display: inline-grid;
+  grid-template-areas: 'field label' '. caption';
+  gap: var(--base-size-8, 8px);
+
+  .FormControl-label {
+    grid-area: label;
+  }
+
+  .FormControl-caption {
+    grid-area: caption;
+  }
+}
+
+// checkbox + radio specific styles
+
+.FormControl--checkbox,
+.FormControl--radio {
+  position: absolute;
+  width: var(--base-size-16, 16px);
+  height: var(--base-size-16, 16px);
+  opacity: 0;
+
+  &:checked {
+    + .FormControl--checkbox-svg {
+      .FormControl--checkbox-background {
+        fill: var(--color-accent-fg);
+        stroke: var(--color-accent-fg);
+      }
+
+      .FormControl--checkbox-check {
+        fill: var(--color-fg-on-emphasis);
+        visibility: visible;
+
+        @media screen and (prefers-reduced-motion: no-preference) {
+          animation: checkmarkIn 200ms cubic-bezier(0.11, 0, 0.5, 0) forwards;
+        }
+      }
+    }
+  }
+
+  &:indeterminate {
+    + .FormControl--checkbox-svg {
+      .FormControl--checkbox-background {
+        fill: var(--color-accent-fg);
+        stroke: var(--color-accent-fg);
+      }
+
+      .FormControl--checkbox-indeterminate {
+        fill: var(--color-fg-on-emphasis);
+        visibility: visible;
+      }
+    }
+  }
+
+  @keyframes checkmarkIn {
+    from {
+      clip-path: inset(16px 0 0 0);
+    }
+
+    to {
+      clip-path: inset(0 0 0 0);
+    }
+  }
+
+  @keyframes checkmarkOut {
+    from {
+      clip-path: inset(0 0 0 0);
+    }
+
+    to {
+      clip-path: inset(16px 0 0 0);
+    }
+  }
+}
+
+.FormControl--checkbox-svg {
+  width: var(--base-size-16, 16px);
+  height: var(--base-size-16, 16px);
+  margin-top: 0.125rem;
+  cursor: pointer;
+
+  .FormControl--checkbox-background {
+    fill: var(--color-canvas-default);
+    stroke: var(--color-border-default);
+  }
+
+  .FormControl--checkbox-check {
+    visibility: hidden;
+    transition: visibility 0s linear 200ms;
+    clip-path: inset(16px 0 0 0);
+
+    @media screen and (prefers-reduced-motion: no-preference) {
+      animation: checkmarkOut 200ms cubic-bezier(0.11, 0, 0.5, 0) forwards;
+    }
+  }
+
+  .FormControl--checkbox-indeterminate {
+    fill: transparent;
+    visibility: hidden;
+  }
+}

package/forms/index.scss

@@ -5,3 +5,5 @@
 @import './form-validation.scss';
 @import './input-group.scss';
 @import './radio-group.scss';
+// new pvc components
+@import './FormControl.scss';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/css",
-  "version": "20.2.1-rc.1659cd9a",
+  "version": "20.2.2-rc.705b5cf4",
   "description": "The CSS implementation of GitHub's Primer Design System",
   "homepage": "https://primer.style/css",
   "author": "GitHub, Inc.",