FormControl refactor/cleanup (#2114)

* checkbox animation adjustment

* radio styles

* disabled state

* pull styles from app header

* cleanup spacing/alignment

* add checkbox focus styles

* stories + radio focus styles

* convert to css check

* refactor to pure *CSS* :)

* configure multi radio story

* lint

* Create neat-sloths-march.md

* snappier animations

* adjust mask size for better scailing

* checkbox mask size

* lint

* Stylelint auto-fixes

* rename classes

* how many times will she refactor?

* slight refactor based on original api

* delete component file test

* Stylelint auto-fixes

* add comments around padding

* Stylelint auto-fixes

* undo changes to old forms

* increase touch target :)

* remove unused grid + cursor pointer

* Stylelint auto-fixes

* adjust disabled checked styles

* bump primitives

* Stylelint auto-fixes

* Update neat-sloths-march.md

* temp add prefix for testing

* test windows high contrast

* cleanup prefix for final build

Co-authored-by: Actions Auto Build <[email protected]>

.changeset/neat-sloths-march.md

@@ -0,0 +1,7 @@
+---
+"@primer/css": patch
+---
+
+- Updates stories to reflect markup for Rails
+- Clean up FormControl classes
+- Add Radio and Checkbox custom styles

docs/.storybook/main.js

@@ -7,7 +7,8 @@ module.exports = {
     '@storybook/preset-scss',
     '@whitespace/storybook-addon-html',
     'storybook-addon-designs',
-    'storybook-color-picker'
+    'storybook-color-picker',
+    'storybook-addon-variants/preset.js'
   ],
   framework: '@storybook/react',
   core: {

docs/package.json

@@ -59,6 +59,7 @@
     "@whitespace/storybook-addon-html": "^5.0.0",
     "babel-loader": "^8.2.5",
     "storybook-addon-designs": "6.2.1",
+    "storybook-addon-variants": "^0.0.5",
     "storybook-color-picker": "2.3.1"
   }
 }

docs/src/stories/rails-form-framework/Checkbox.stories.jsx

@@ -0,0 +1,117 @@
+import React from 'react'
+import clsx from 'clsx'
+
+export default {
+  title: 'Rails Forms/Checkbox',
+  parameters: {
+    layout: 'padded'
+  },
+  decorators: [
+    Story => (
+      <form>
+        <Story />
+      </form>
+    )
+  ],
+  excludeStories: ['InputTemplate'],
+  argTypes: {
+    disabled: {
+      description: 'disabled field',
+      control: {type: 'boolean'},
+      table: {
+        category: 'CSS'
+      }
+    },
+    visuallyHidden: {
+      description: 'visually hide label',
+      control: {type: 'boolean'},
+      table: {
+        category: 'CSS'
+      }
+    },
+    label: {
+      type: 'string',
+      name: 'label',
+      description: 'string',
+      table: {
+        category: 'HTML'
+      }
+    },
+    caption: {
+      name: 'caption',
+      type: 'string',
+      description: 'caption',
+      table: {
+        category: 'HTML'
+      }
+    },
+    focusElement: {
+      control: {type: 'boolean'},
+      description: 'set focus on element',
+      table: {
+        category: 'Interactive'
+      }
+    },
+    checked: {
+      control: {type: 'boolean'},
+      description: 'checked',
+      table: {
+        category: 'Interactive'
+      }
+    },
+    indeterminate: {
+      control: {type: 'boolean'},
+      description: 'indeterminate',
+      table: {
+        category: 'Interactive'
+      }
+    }
+  }
+}
+
+const focusMethod = function getFocus() {
+  // find the focusable element
+  var input = document.getElementsByTagName('input')[0]
+  // set focus on element
+  input.focus()
+}
+
+export const InputTemplate = ({label, disabled, visuallyHidden, focusElement, caption, checked, indeterminate}) => (
+  <>
+    <div data-view-component="true" class="FormControl-checkbox-wrap">
+      <input
+        id="input-id"
+        type="checkbox"
+        disabled={disabled}
+        class="FormControl-checkbox"
+        checked={checked ? 'true' : undefined}
+        indeterminate={indeterminate ? 'true' : undefined}
+        ariaDescribedBy={caption ? 'caption-ebb67985' : undefined}
+      />
+      <span class="FormControl-checkbox-labelWrap">
+        <label htmlFor="input-id" className={clsx('FormControl-label', visuallyHidden && 'sr-only')}>
+          {label}
+        </label>
+        {caption && (
+          <p className="FormControl-caption" id="caption-ebb67985">
+            {caption}
+          </p>
+        )}
+      </span>
+    </div>
+
+    {focusElement && focusMethod()}
+  </>
+)
+
+export const Playground = InputTemplate.bind({})
+Playground.args = {
+  label: 'Select an option',
+  disabled: false,
+  focusElement: false,
+  caption: 'Caption',
+  invalid: false,
+  visuallyHidden: false,
+  checked: false,
+  indeterminate: false
+}

docs/src/stories/rails-form-framework/Radio.stories.jsx

@@ -0,0 +1,127 @@
+import React from 'react'
+import clsx from 'clsx'
+
+export default {
+  title: 'Rails Forms/Radio',
+  parameters: {
+    layout: 'padded'
+  },
+  decorators: [
+    Story => (
+      <form>
+        <Story />
+      </form>
+    )
+  ],
+  excludeStories: ['RadioTemplate'],
+  argTypes: {
+    disabled: {
+      description: 'disabled field',
+      control: {type: 'boolean'},
+      table: {
+        category: 'CSS'
+      }
+    },
+    visuallyHidden: {
+      description: 'visually hide label',
+      control: {type: 'boolean'},
+      table: {
+        category: 'CSS'
+      }
+    },
+    label: {
+      type: 'string',
+      name: 'label',
+      description: 'string',
+      table: {
+        category: 'HTML'
+      }
+    },
+    caption: {
+      name: 'caption',
+      type: 'string',
+      description: 'caption',
+      table: {
+        category: 'HTML'
+      }
+    },
+    id: {
+      name: 'id',
+      type: 'string',
+      description: 'id',
+      table: {
+        category: 'Radio'
+      }
+    },
+    focusElement: {
+      control: {type: 'boolean'},
+      description: 'set focus on element',
+      table: {
+        category: 'Interactive'
+      }
+    },
+    checked: {
+      control: {type: 'boolean'},
+      description: 'checked',
+      table: {
+        category: 'Interactive'
+      }
+    },
+    indeterminate: {
+      control: {type: 'boolean'},
+      description: 'indeterminate',
+      table: {
+        category: 'Interactive'
+      }
+    }
+  }
+}
+
+const focusMethod = function getFocus() {
+  // find the focusable element
+  var input = document.getElementsByTagName('input')[0]
+  // set focus on element
+  input.focus()
+}
+
+export const RadioTemplate = ({label, disabled, visuallyHidden, focusElement, caption, checked, indeterminate, id}) => (
+  <>
+    <div class="FormControl-radio-wrap">
+      <input
+        id={id}
+        name="radio"
+        type="radio"
+        disabled={disabled}
+        class="FormControl-radio"
+        checked={checked ? 'true' : undefined}
+        indeterminate={indeterminate ? 'true' : undefined}
+        ariaDescribedBy={caption ? 'caption-ebb67985' : undefined}
+      />
+      <span class="FormControl-radio-labelWrap">
+        <label htmlFor={id} className={clsx('FormControl-label', visuallyHidden && 'sr-only')}>
+          {label}
+        </label>
+        {caption && (
+          <p className="FormControl-caption" id="caption-ebb67985">
+            {caption}
+          </p>
+        )}
+      </span>
+    </div>
+
+    {focusElement && focusMethod()}
+  </>
+)
+
+export const Playground = RadioTemplate.bind({})
+Playground.args = {
+  id: 'some-id',
+  label: 'Select an option',
+  disabled: false,
+  focusElement: false,
+  caption: 'Caption',
+  invalid: false,
+  visuallyHidden: false,
+  checked: false,
+  indeterminate: false
+}

docs/src/stories/rails-form-framework/RadioFeatures.stories.jsx

@@ -0,0 +1,14 @@
+import React from 'react'
+import {RadioTemplate} from './Radio.stories.jsx'
+
+export default {
+  title: 'Rails Forms/Radio/Features'
+}
+
+export const MultiRadios = ({}) => (
+  <form style={{display: 'grid', gap: '.5rem'}}>
+    <RadioTemplate label="First radio item" caption="This one has a caption!" id="first" />
+    <RadioTemplate label="Second radio item" id="second" />
+    <RadioTemplate label="Third radio item" id="third" />
+  </form>
+)