[#762] Inputs

CHANGELOG.md

@@ -7,6 +7,16 @@
 - Badge with Label, added an example showing a text label rendered next to a badge component, to the badge docs.
 - A new layout component at `atoms/switcher`, that lays out its children in a horizontal row with consistent spacing between children. The layout switches to a vertical stack once the width of the component passes below a threshold, or the number of children goes over a limit.
 - A new layout component at `atoms/stack`, that lays out its children vertically, with consistent spacing between children.
+- Joined-ui now works with inputs — you can now join inputs together with other inputs, or inputs together with buttons.
+- Inputs now use the global `:focus` outline, for improved keyboard navigation and visual accessibility.
+
+### Fixed
+
+- Default configuration for webfonts uses absolute values instead of CSS Custom Properties, so the font-weights work correctly again.
+
+### Changed
+
+- Updated visual appearance of inputs. If you weren’t overriding the default configuration, you don’t need to do anything to update. If you were overriding the configuration, be aware that there are now extra states for radio & checkboxes that you should override the colors for: active, checked-hover, checked-active, invalid, invalid-checked. You can now also set the box-shadow for each state.
 
 ## [[6.0.0]](https://github.com/bitcrowd/bitstyles/releases/tag/v6.0.0) - 2023-06-08
 

scss/bitstyles/atoms/button-colors/_index.scss

@@ -7,17 +7,25 @@
 @use '../../tools/themes';
 @use 'sass:map';
 
+/* prettier-ignore */
+
 @each $variant-name, $variant-themes in settings.$variants {
   $variant-default-theme: map.get($variant-themes, 'default');
+  $button-name: '';
+  @if $variant-name == '' {
+    $button-name: 'button--primary';
+  } @else {
+    $button-name: 'button#{$variant-name}';
+  }
 
   /* stylelint-disable custom-property-pattern, max-nesting-depth */
   #{classname.get($classname-items: 'button#{$variant-name}', $layer: 'atom')} {
     @if map.has-key($variant-default-theme, 'default') {
       &,
       &:visited {
         @each $property in button-settings.$allowed-color-properties {
-          #{$property}: var(
-            design-token.get('button#{$variant-name}', $property)
+          #{design-token.get('button', $property)}: var(
+            design-token.get($button-name, $property)
           );
         }
       }
@@ -27,8 +35,8 @@
       &:hover,
       &:focus {
         @each $property in button-settings.$allowed-color-properties {
-          #{$property}: var(
-            design-token.get('button#{$variant-name}', 'hover', $property)
+          #{design-token.get('button', 'hover', $property)}: var(
+            design-token.get($button-name, 'hover', $property)
           );
         }
       }
@@ -37,8 +45,8 @@
     @if map.has-key($variant-default-theme, 'active') {
       &:active {
         @each $property in button-settings.$allowed-color-properties {
-          #{$property}: var(
-            design-token.get('button#{$variant-name}', 'active', $property)
+          #{design-token.get('button', 'active', $property)}: var(
+            design-token.get($button-name, 'active', $property)
           );
         }
       }
@@ -50,8 +58,8 @@
       &[aria-selected='true'],
       &[aria-current] {
         @each $property in button-settings.$allowed-color-properties {
-          #{$property}: var(
-            design-token.get('button#{$variant-name}', 'pressed', $property)
+          #{design-token.get('button', 'pressed', $property)}: var(
+            design-token.get($button-name, 'pressed', $property)
           );
         }
       }
@@ -65,8 +73,8 @@
       &:disabled:focus,
       &[aria-disabled='true']:focus {
         @each $property in button-settings.$allowed-color-properties {
-          #{$property}: var(
-            design-token.get('button#{$variant-name}', 'disabled', $property)
+          #{design-token.get('button', 'disabled', $property)}: var(
+            design-token.get($button-name, 'disabled', $property)
           );
         }
       }
@@ -76,7 +84,7 @@
 
   @each $theme-name, $theme in $variant-themes {
     @include themes.get($theme-name) {
-      @include button.colors($colors: $theme, $variant-name: $variant-name);
+      @include button.colors($colors: $theme, $variant-name: $button-name);
     }
   }
 }

scss/bitstyles/atoms/button-shapes/_settings.scss

@@ -11,6 +11,7 @@ $default: (
   'min-width': 0,
   'font-size': var(design-token.get('font-size', '2')),
   'font-weight': var(design-token.get('font-weight', 'semibold')),
+  'line-height': var(design-token.get('line-height', '4')),
 ) !default;
 /* stylelint-enable length-zero-no-unit */
 $small: (

scss/bitstyles/atoms/button/_index.scss

@@ -13,8 +13,6 @@
   #{design-token.get('button', 'border-top-left-radius')}: var(design-token.get('button', 'border-radius'));
   #{design-token.get('button', 'transition')}: settings.$transition;
   #{design-token.get('button', 'justify-content')}: settings.$justify-content;
-  #{design-token.get('button', 'transition')}: settings.$transition;
-  #{design-token.get('button', 'justify-content')}: settings.$justify-content;
   display: flex;
   position: relative;
   flex-shrink: 0;
@@ -36,10 +34,15 @@
     var(design-token.get('button', 'border-top-right-radius'))
     var(design-token.get('button', 'border-bottom-right-radius'))
     var(design-token.get('button', 'border-bottom-left-radius'));
+  border-color: var(design-token.get('button', 'border-color'));
   outline-offset: 0;
+  background-color: var(design-token.get('button', 'background-color'));
+  box-shadow: var(design-token.get('button', 'box-shadow'));
+  color: var(design-token.get('button', 'color'));
   font-family: settings.$font-family;
-  font-size: var(design-token.get('button', 'font-size'));
-  font-weight: var(design-token.get('button', 'font-weight'));
+  font-size: var(design-token.get('button', 'font-size'), inherit);
+  font-weight: var(design-token.get('button', 'font-weight'), inherit);
+  line-height: var(design-token.get('button', 'line-height'), inherit);
   text-align: center;
   text-decoration: none;
   white-space: nowrap;
@@ -51,7 +54,21 @@
   &:hover,
   &:focus {
     z-index: 1;
+    border-color: var(design-token.get('button', 'hover', 'border-color'));
+    outline-width: 0;
+    background-color: var(design-token.get('button', 'hover', 'background-color'));
+    box-shadow: var(design-token.get('button', 'hover', 'box-shadow'));
+    color: var(design-token.get('button', 'hover', 'color'));
+    text-decoration: none;
+  }
+
+  &:active {
+    z-index: 1;
+    border-color: var(design-token.get('button', 'active', 'border-color'));
     outline-width: 0;
+    background-color: var(design-token.get('button', 'active', 'background-color'));
+    box-shadow: var(design-token.get('button', 'active', 'box-shadow'));
+    color: var(design-token.get('button', 'active', 'color'));
     text-decoration: none;
   }
 
@@ -66,6 +83,10 @@
   &[aria-selected='true'],
   &[aria-current] {
     z-index: 2;
+    border-color: var(design-token.get('button', 'pressed', 'border-color'));
+    background-color: var(design-token.get('button', 'pressed', 'background-color'));
+    box-shadow: var(design-token.get('button', 'pressed', 'box-shadow'));
+    color: var(design-token.get('button', 'pressed', 'color'));
   }
 
   &:disabled,
@@ -74,6 +95,10 @@
   &[aria-disabled='true']:hover,
   &:disabled:focus,
   &[aria-disabled='true']:focus {
+    border-color: var(design-token.get('button', 'disabled', 'border-color'));
+    background-color: var(design-token.get('button', 'disabled', 'background-color'));
+    box-shadow: var(design-token.get('button', 'disabled', 'box-shadow'));
+    color: var(design-token.get('button', 'disabled', 'color'));
     cursor: not-allowed;
   }
 }

scss/bitstyles/atoms/button/_settings.scss

@@ -32,5 +32,6 @@ $allowed-shape-properties: (
   'min-width',
   'font-size',
   'font-weight',
+  'line-height',
   'justify-content'
 ) !default;

scss/bitstyles/base/forms/Input.js

@@ -0,0 +1,19 @@
+export default ({
+  value = '',
+  placeholder = '',
+  disabled = false,
+  ariaInvalid = false,
+  type = 'text',
+  checked = false,
+  id,
+}) => {
+  const input = document.createElement('input');
+  input.type = type;
+  input.value = value;
+  input.placeholder = placeholder;
+  if (disabled) input.setAttribute('disabled', disabled);
+  if (ariaInvalid) input.setAttribute('aria-invalid', ariaInvalid);
+  if (id) input.setAttribute('id', id);
+  if (checked) input.setAttribute('checked', checked);
+  return input;
+};

scss/bitstyles/base/forms/Label.js

@@ -0,0 +1,17 @@
+export default ({
+  children,
+  htmlFor = null,
+  ariaInvalid = false,
+  ariaDisabled = false,
+  classnames = [],
+}) => {
+  const label = document.createElement('label');
+  children.forEach((child) => {
+    label.append(child);
+  });
+  if (ariaInvalid) label.setAttribute('aria-invalid', ariaInvalid);
+  if (ariaDisabled) label.setAttribute('aria-disabled', ariaDisabled);
+  if (htmlFor) label.setAttribute('for', htmlFor);
+  classnames.forEach((classname) => label.classList.add(classname));
+  return label;
+};

scss/bitstyles/base/forms/Select.js

@@ -0,0 +1,34 @@
+const defaultOptions = [
+  {
+    value: 'blue',
+    label: 'Blue',
+  },
+  {
+    value: 'red',
+    label: 'Red',
+  },
+  {
+    value: 'green',
+    label: 'Green',
+  },
+  {
+    value: 'pink',
+    label: 'Pink',
+  },
+];
+
+export default ({ disabled = false, ariaInvalid = false, id, options }) => {
+  const select = document.createElement('select');
+  if (disabled) select.setAttribute('disabled', disabled);
+  if (ariaInvalid) select.setAttribute('aria-invalid', ariaInvalid);
+  if (id) select.setAttribute('id', id);
+
+  const opts = options || defaultOptions;
+  opts.forEach((option) => {
+    const opt = document.createElement('option');
+    opt.value = option.value;
+    opt.append(option.label);
+    select.appendChild(opt);
+  });
+  return select;
+};

scss/bitstyles/base/forms/Textarea.js

@@ -0,0 +1,17 @@
+export default ({
+  value = '',
+  placeholder = '',
+  disabled = false,
+  ariaInvalid = false,
+  id,
+}) => {
+  const textarea = document.createElement('textarea');
+  textarea.value = value;
+  textarea.placeholder = placeholder;
+  textarea.setAttribute('rows', '5');
+  textarea.setAttribute('cols', '30');
+  if (disabled) textarea.setAttribute('disabled', disabled);
+  if (ariaInvalid) textarea.setAttribute('aria-invalid', ariaInvalid);
+  if (id) textarea.setAttribute('id', id);
+  return textarea;
+};

scss/bitstyles/base/forms/_index.scss

@@ -20,9 +20,16 @@ legend {
 }
 
 label {
-  display: block;
-  margin-bottom: 0;
+  display: flex;
+  gap: settings.$label-gap;
+  align-items: baseline;
+  margin-bottom: settings.$label-gap;
+  font-weight: settings.$label-font-weight;
   cursor: pointer;
+
+  &[aria-disabled='true'] {
+    color: settings.$label-disabled-color;
+  }
 }
 
 [type='color'] {

scss/bitstyles/base/forms/_settings.scss

@@ -1,3 +1,5 @@
+@use '../../tools/design-token';
+
 //
 // Fieldset ////////////////////////////////////////
 
@@ -14,3 +16,10 @@ $legend-background-color: transparent !default;
 $legend-border: 0 !default;
 $legend-border-radius: 0 !default;
 $legend-color: inherit !default;
+
+//
+// Label ////////////////////////////////////////
+
+$label-gap: var(design-token.get('size', 's7')) !default;
+$label-font-weight: var(design-token.get('font-weight', 'medium')) !default;
+$label-disabled-color: var(design-token.get('color', 'grayscale')) !default;