Form style updates

[bspeare]

Resolves #1021

To test

• Look at the forms under
  • Components -> Form -> filters
  • Form -> Kitchen sink
  • Components -> Form -> filters
  • Showcase -> Application -> Directory
  • Showcase -> Application -> Form
  • Showcase -> Forms -> Information Request Form
• Check the individual form elements
• Verify that the chagnes complete a coherent update that addresses the most common inputs and controls for forms
• Verify internal style and code consistency.
• Do accessibility checks.

[GaryRidgway]

Added fixes for some things raised in Denny's feedback, and added future potential changes in a comment here.

[GaryRidgway]

Decided to take the range slider out, but I also made an example slider element that matches a lot of our styles while making a larger hitbox if we want to implement it in the future.

Example here

CSS here

// === Range specific === //
.form-item [type='range'] {
  appearance: none;
  box-sizing: border-box;
  height: 32px;
  display: flex;
  align-items: center;
  position: relative;
  border-radius: 50px;
  overflow: hidden;
  outline: none;
  border: none;
  padding: 0 2px;
  cursor: pointer;
  background-color: var(--uids-gray-light);
  transition: background-color ease 0.3s;
  margin-top: 0;

  &:focus-visible {
    background: variables.$light;
    outline: 1px solid variables.$secondary;
  }

  &.form--error {
    background-color: variables.$danger-light;
    outline: 2px solid variables.$danger;
  }


  &::-webkit-slider-thumb {
  }

  &::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 28px;
    height: 28px;
    background: #fff;
    top: 2px;
    border-radius: 50%;
    //border: 2px solid var(--brand-primary);
    //box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    transition: all cubic-bezier(0.3, 1.5, 0.7, 1) 0.3s;
    box-shadow:
      0 1px 2px rgba(0, 0, 0, 0.2),
      -10015px 0 0 9999px var(--brand-primary),
      0 0 0 2px var(--brand-primary);

    &:before {


    }
  }
}
// === End: Range specific === //

[joewhitsitt]

My IDE notes some deleted, unused stuff in src/components/form/ExampleFiltersForm.vue

Same for button on src/components/form/FormFieldset.vue

Should the form collapsible stuff be completely removed or left for later? (e.g. .form-collapsible__wrapper css) - f3ceeb6

[joewhitsitt]

My design eye might not catch the style consistency but on glance it looks purty!

http://localhost:6006/?path=/story/showcase-forms--information-request-form has the form--require class but not the required attribute like http://localhost:6006/?path=/story/elements-form--text&args=required:!true

Accessibility scans using siteimprove, lighthouse, webaim and ainspector all return good (except for the absence of higher up DOM necessities)

[GaryRidgway]

My IDE notes some deleted, unused stuff in src/components/form/ExampleFiltersForm.vue

Same for button on src/components/form/FormFieldset.vue

Should the form collapsible stuff be completely removed or left for later? (e.g. .form-collapsible__wrapper css) - f3ceeb6

good catch Joe, I can go in and remedy the things you have noticed and pass it back. thanks for checking things!

[joewhitsitt]

I am going to remove myself from review because I am out Monday, but happy to re-assign if it is still outstanding on Tuesday.

[joewhitsitt]

Thanks for the extra clean up. As reviewed before the a11y checks passed and things look good/correct. Without more guidance with the testing instructions I am not sure what else to look for.