Lukebailey/infra 386 create a a11y checkbox #53

lukerohanbailey · 2022-01-05T18:19:57Z

Summary

Create a a11y checkbox per the V3 Library on Figma, with states for:

disabled
unchecked
checked
focused
indeterminate

References

Linear: https://linear.app/contra/issue/INFRA-386/create-a-a11y-checkbox
Loom: https://www.loom.com/share/7c8ef7dc185646bf9d6cdc60c25ed109
Figma: https://www.figma.com/file/owwo3mjL0dCKJijKGaf1XB/V3-Library?node-id=705%3A9117

erictaylor

The new dependencies will need to be added to:
https://github.com/contra/ui-kit/blob/main/bin/build-cjs.js#L11

src/components/Checkbox.tsx

lukerohanbailey · 2022-01-06T09:43:28Z

The new dependencies will need to be added to: https://github.com/contra/ui-kit/blob/main/bin/build-cjs.js#L11

Ah thanks @erictaylor! I didn't realise this was a thing (I'm new to cjs), will add these in today.

Also, as I'm the author of this PR I cannot approve and merge the changes requested, what is the best way to proceed here?

…tion' into lukebailey/infra-386-create-a-a11y-checkbox

…rops and ToggleProps

…ailey/infra-387-explore-and-create-a-micro-interaction

…tion' into lukebailey/infra-386-create-a-a11y-checkbox

src/components/Checkbox.tsx

erictaylor · 2022-01-13T20:54:06Z

.gitignore

+*.log
+.vscode/


Let's not add .vscode to the ignore. We do like to share some configuration in projects. This project doesn't have anything shared yet, but I'd imagine we would do some similiar sharing that we do in https://github.com/contra/contra-web-app/tree/master/.vscode

Yep! This has been fixed in 55ab973

erictaylor · 2022-01-13T20:56:26Z

package.json

@@ -85,6 +86,8 @@
    "react": "^16.14.0 || ^17.0.0"
  },
  "dependencies": {
-    "@stitches/react": "^1.2.5"
+    "gsap": "^3.9.1",


I have some slight concerns about bringing gsap in as a dependency. gsap is large library, and I'm curious how much we need it as opposed to handling things in a more light weight manner.

Would love to hear some thoughts on this.

I thought this maybe a thing! totally fine to remove GSAP and go with CSS transitions for the UI kit. See comment #53 (comment)

erictaylor · 2022-01-13T21:04:59Z

src/animationIcons/CheckIcon.tsx

+const Path = styled('path', {
+  'input:checked ~ div &': {
+    transition: 'stroke-dashoffset 1s cubic-bezier(0.16, 1, 0.3, 1)',
+  },
+  transition: 'stroke-dashoffset 0.2s cubic-bezier(0.11, 0, 0.5, 0)',
+});


I think we should use variants to essentially add a isChecked prop that would adjust the transition style.

The reason I would do this is that the style then relies on a prop and not the structure of the DOM.

Right now this styling is very conditional based on where it is used and isn't really sharable.

Thoughts @Boeing787 and @lukerohanbailey?

Agreed! See comment #53 (comment)

src/components/Checkbox.tsx

erictaylor · 2022-01-13T21:31:18Z

src/components/Checkbox.tsx

+  text,
+  defaultSelected,
+  isIndeterminate,
+  ...restProps


I usually highly advise not using rest props on component libraries like this, and to specifically list all props out so you can make sure you are never spreading props improperly to base react components (if you did you'll get those annoying react warnings about a prop not being recognized).

In general it would be very easy for a consumer to pass a prop that could ultimately end up getting inappropriately passed all the way down to base component that it shouldnt.

src/components/Checkbox.tsx

erictaylor · 2022-01-13T21:33:29Z

@lukerohanbailey feel free to reach out to me for a Tuple if you'd like and we can walk through some changes together (if desired). I realize that getting all the context or answers to questions is difficult going back and forth in just comments.

lukerohanbailey · 2022-01-14T00:31:57Z

@erictaylor I've made some changes that remove GSAP and replace it with CSS transitions that use the stitches variants feature e8cf1a9

erictaylor

Looking great. Couple small things.

erictaylor · 2022-01-19T17:22:30Z

package.json

@@ -85,6 +86,7 @@
    "react": "^16.14.0 || ^17.0.0"
  },
  "dependencies": {
-    "@stitches/react": "^1.2.5"


I see we moved this from dependencies to devDependencies. If we are going to do this, then we need to add @stitches/react to peerDependencies which would constitute a major/breaking change.

erictaylor · 2022-01-19T17:25:09Z

src/components/Checkbox.tsx

+import { easeOutExpo } from '../primitives/animation';
+
+const Label = styled('label', {
+  '& input:checked:disabled + div': {


What are we needing to target specifically with div here? Can we tighten this to reference IconContainer specifically?

erictaylor · 2022-01-19T17:33:07Z

src/primitives/animation.ts

+// Easing
+export const easeInQuad = 'cubic-bezier(0.55, 0.085, 0.68, 0.53)';
+export const easeInCubic = 'cubic-bezier(0.55, 0.055, 0.675, 0.19)';
+export const easeInQuart = 'cubic-bezier(0.895, 0.03, 0.685, 0.22)';
+export const easeInQuint = 'cubic-bezier(0.755, 0.05, 0.855, 0.06)';
+export const easeInExpo = 'cubic-bezier(0.95, 0.05, 0.795, 0.035)';
+export const easeInCirc = 'cubic-bezier(0.6, 0.04, 0.98, 0.335)';
+export const easeOutQuad = 'cubic-bezier(0.25, 0.46, 0.45, 0.94)';
+export const easeOutCubic = 'cubic-bezier(0.215, 0.61, 0.355, 1)';
+export const easeOutQuart = 'cubic-bezier(0.165, 0.84, 0.44, 1)';
+export const easeOutQuint = 'cubic-bezier(0.23, 1, 0.32, 1)';
+export const easeOutExpo = 'cubic-bezier(0.19, 1, 0.22, 1)';
+export const easeOutCirc = 'cubic-bezier(0.075, 0.82, 0.165, 1)';
+export const easeInOutQuad = 'cubic-bezier(0.455, 0.03, 0.515, 0.955)';
+export const easeInOutCubic = 'cubic-bezier(0.645, 0.045, 0.355, 1)';
+export const easeInOutQuart = 'cubic-bezier(0.77, 0, 0.175, 1)';
+export const easeInOutQuint = 'cubic-bezier(0.86, 0, 0.07, 1)';
+export const easeInOutExpo = 'cubic-bezier(1, 0, 0, 1)';
+export const easeInOutCirc = 'cubic-bezier(0.785, 0.135, 0.15, 0.86)';


I wonder if it be better for us to export this an an object so you can import one item and have it strongly typed and autosuggested.

ie

export const animation = Object.freeze({ easeInQuad: 'cubic-bezier(0.55, 0.085, 0.68, 0.53), // ... }) as const;

Then consumption simply becomes

import { animation } from '@contra/ui-kit'; console.log(animation.easeInQuad);

Additionally, let's make sure we export this via ./src/index.ts.

Consider naming animationTimingFunction (long winded but accurate).

lukerohanbailey added 7 commits January 5, 2022 13:57

feat: add react-aria and react-stately

17cffa8

feat: add simple react-aria checkbox

23e5e0d

feat: add simple checkbox story

e254aa5

feat: add disabled and enabled checkbox styles

1ce89d5

feat: add state styling to checkbox

5c819c1

style: update All Checkbox component name to Checkbox States

d86c95d

fix: update autoFocus attribute element to match the order on figma

59efa9f

erictaylor suggested changes Jan 5, 2022

View reviewed changes

Boeing787 reviewed Jan 6, 2022

View reviewed changes

src/components/Checkbox.tsx Outdated Show resolved Hide resolved

lukerohanbailey added 18 commits January 6, 2022 09:51

chore: move stitches to devdependencies

c66b5cd

fix: add react-aria and react-stately to build-cjs

ca95774

feat: add aria-label to checkbox

0a41a35

chore: add onChange handler to checkbox

93013ed

build: add gsap to project

177e1c9

feat: add basic gsap setup and microinteraction to checkbox

4f84d58

build: add .vscode to .gitignore

3c53864

fix: remove GSAPTimeline type import

dac2cfd

feat: add animatiable check icon

969c328

feat: animate checkbox check icon based on isSelected state

ab4d3dc

feat: improve checkbox animation timings

7bf7cdd

Merge branch 'lukebailey/infra-387-explore-and-create-a-micro-interac…

fc43aa6

…tion' into lukebailey/infra-386-create-a-a11y-checkbox

fix: destructure checkbox types from ComponentPropsWithRef, CheckboxP…

9d2b028

…rops and ToggleProps

fix: invalid styling

6786ee4

Merge branch 'lukebailey/infra-386-create-a-a11y-checkbox' into lukeb…

661b8d3

…ailey/infra-387-explore-and-create-a-micro-interaction

fix: aria-label console warnings

aa97e6c

feat: update checkbox animation timings

8b505fa

Merge branch 'lukebailey/infra-387-explore-and-create-a-micro-interac…

f4a25d7

…tion' into lukebailey/infra-386-create-a-a11y-checkbox

Boeing787 reviewed Jan 11, 2022

View reviewed changes

src/components/Checkbox.tsx Outdated Show resolved Hide resolved

src/components/Checkbox.tsx Outdated Show resolved Hide resolved

src/components/Checkbox.tsx Outdated Show resolved Hide resolved

style: destructure ToggleProps from useToggleState hook

965235e

fix: move check timeline play call to a useEffect hook

8d2a0f1

erictaylor suggested changes Jan 13, 2022

View reviewed changes

erictaylor reviewed Jan 13, 2022

View reviewed changes

src/components/Checkbox.tsx Outdated Show resolved Hide resolved

fix: type naming conventions and allow label to accept any ReactNode

5c060e9

lukerohanbailey force-pushed the lukebailey/infra-386-create-a-a11y-checkbox branch from 6186d32 to 5c060e9 Compare January 13, 2022 21:56

lukerohanbailey added 2 commits January 13, 2022 22:14

fix: remove .vscode/ from .gitignore

55ab973

feat: replace gsap animations with CSS transitions

e8cf1a9

lukerohanbailey added 2 commits January 14, 2022 12:37

fix: remove restprops usage

dce6b65

fix: prevent pressed stateon disabled checkboxes

4280b21

erictaylor suggested changes Jan 19, 2022

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Lukebailey/infra 386 create a a11y checkbox #53

Lukebailey/infra 386 create a a11y checkbox #53

lukerohanbailey commented Jan 5, 2022

erictaylor left a comment

lukerohanbailey commented Jan 6, 2022 •

edited

erictaylor Jan 13, 2022

lukerohanbailey Jan 13, 2022

erictaylor Jan 13, 2022

lukerohanbailey Jan 14, 2022

erictaylor Jan 13, 2022

lukerohanbailey Jan 14, 2022

erictaylor Jan 13, 2022

erictaylor commented Jan 13, 2022

lukerohanbailey commented Jan 14, 2022

erictaylor left a comment

erictaylor Jan 19, 2022

erictaylor Jan 19, 2022

erictaylor Jan 19, 2022

		*.log
		.vscode/

Lukebailey/infra 386 create a a11y checkbox #53

Are you sure you want to change the base?

Lukebailey/infra 386 create a a11y checkbox #53

Conversation

lukerohanbailey commented Jan 5, 2022

Summary

References

erictaylor left a comment

Choose a reason for hiding this comment

lukerohanbailey commented Jan 6, 2022 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

erictaylor commented Jan 13, 2022

lukerohanbailey commented Jan 14, 2022

erictaylor left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

lukerohanbailey commented Jan 6, 2022 •

edited