Date-picker: v11 audit

[aagonzales]

Audit

A designer and developer will pair on this audit, some tasks may be discipline focused. Follow the checklist below for the features and items to review. If there are no issues with the item then check the item as complete. If any problems or bugs come up when auditing add a comment to this issue with the problem and how to correct it (if you know how). Bugs do not need to be fixed while auditing.

Resources

• Design spec in Sketch
• V11 Website
• SCSS
• Storybook

Checklist

Visual (in React code)
Design and dev check

• Component is using the correct design tokens (color and type), see design spec and scss code.
• Component is rendering correctly across themes and layers, see design spec and storybook.
  • White theme
  • Gray 10 theme
  • Gray 90 theme
  • Gray 100 theme

Update: bugs found, see comments below

• Component is rendering correctly across browsers (check themes across browsers as well), see storybook.
  • Firefox
  • Safari
  • Chrome
• Component sizes are rendering and named correctly (if applicable)

Website (v11)
Design checks

• Style tab has correct design tokens listed
• Style and usage tabs are using the correct size props names (if applicable)
• Usage tab is up-to-date for with any v11 behavioral changes (if any)
• Live Demo has applied v11 changes
  • Themes are rendering correctly
  • Size props are named correctly
  • No light props included

Design Kits (Sketch only)
Design checks

• Correct design tokens (type and color) are used
• Component using the correct size prop names
• Any additional v11 behaviors have been added

Storybook
Dev checks

• Confirm that prop table is populating
• Take note of missing examples/stories (if any)

React package
Dev checks

• Go to https://codesandbox.io/s/github/carbon-design-system/carbon/tree/main/packages/react/examples/codesandbox and confirm that you can use the component as expected from @carbon/react

Accessibility
Dev checks

• Confirm that there are no violations in Accessibility checker
• Confirm that component works as expected with VoiceOver

Migration docs
Design and dev check

• Any breaking changes to this component are present in the v11 migration guide.
  • Design
  • Develop - partially checked. The size prop and className prop have been documented but there is no documentation for the component moving from a class to a function

[aagonzales]

Visuals (React)

• Disabled state should be using $field not $field-disabled (which we're removing)

• _flatpickr.scss is still using v10 tokens. Follow migration guide for updates.

[aagonzales]

Storybook

• Size are not available on storybook
• Disabled state is not available on storybook

[aagonzales]

Website

Live demo

• Remove light prop
• Update size name

[abbeyhrt]

@aagonzales I unfortunately don't have a sketch license (I applied but haven't heard back yet) so I can't confirm if this is the intent but it looks like the hover for the arrows and dates in the date picker is different in v10 and v11 dark themes.

In v10:

in v11:

would you be able to confirm if this is intended when you get to this audit?

[abbeyhrt]

I'm not sure what token they are supposed to be but the little arrows next to the month and year have a different hover state than in v10 across all themes and browsers.

In v11:

In v10:

[aagonzales]

@abbeyhrt $layer-hover is correct. I also noticed all the hover colors inside this file are still using v10 tokens.

[aagonzales]

Here is the spec for date picker

[abbeyhrt]

@abbeyhrt $layer-hover is correct. I also noticed all the hover colors inside this file are still using v10 tokens.

Those are the v10 styles so they should be okay! I think we've only updated @carbon/styles with the new tokens

[abbeyhrt]

As far as development review goes, this audit is complete! 🎉 Summary of findings:

• Fixed incorrect token for hover on dates and arrows fix(styles): update hover token value for date picker #10854
• Updated token used for hover of littler arrows next to year in picker fix(styles): update tokens used #10932