Pagination: 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

Variants

• Default (data table)
• Pagination nav (standalone)

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
• 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

[tw15egan]

With the move to IconButton, Pagination is currently not rendering any arrow icons (Next, Previous). Should we update the v10 Pagination to use IconButton to fix this issue?

Fixed via #10510

[tw15egan]

of 4 pages text is using text-secondary. Is this correct or should this be using text-primary? Sketch file only mentions the Items per page text and the 1-10 text

[tw15egan]

Component sizes

• Component size props have no effect in the new storybook. The class is being properly added, but styles are not there. Digging deeper, it seems the size styles have not been ported to the new @carbon/styles repo

[tw15egan]

Storybook

• Prop table is population, but there are no knobs/controls to play with the different prop values.

[tw15egan]

Getting some new a11y violations, but I think this is due to the button regression that should be fixed via #10510

This has been fixed via #10510

[laurenmrice]

Visual bugs

scss

• label type-style should be type token body-compact-01.
• select-input type-style should be type token body-compact-01.
• select-input:hover should be color token $layer-hover.
• Check to make sure all spacing tokens use the format $spacing- instead of having to prefix the token with $carbon--.
• Yes @tw15egan this should be using color token $text-primary.

of 4 pages text is using text-secondary. Is this correct or should this be using text-primary? Sketch file only mentions the Items per page text and the 1-10 text

• pagination nav variant:
  • selected underline should be color token $border-interactive.
  • number text should be color token $text-primary.

[laurenmrice]

Website

Style tab

• Color: Add a row to specify where to use $text-primary color token.

Live demo

*Updating the Live demo with our current code should fix most of these bugs.

• Some visual bugs with rule divider not showing up around caret icon.
• Disabled prop does not visually disabling everything.
• Right caret icon is not the correct color in the dark themes.

[laurenmrice]

Design kit

Master files:

• pagination default: Add Medium (40px) and Small (32px) sizes to kits
• pagination nav variant: underline should be color token $border-interactive.

[tw15egan]

Looks good from a dev perspective 👍🏻

[tay1orjones]

Live demo updates appear to be the only thing left for this one, we've got an issue for it:

• Update all component live demos on the website for v11 #10889