The aria announcer creates a pixel sized element on the page. This can break user layouts. We should make sure it is not within the document flow.

Figma Link: https://www.figma.com/file/uQkaSNPxTxrIdkLhZ4UJnf/Button?t=XaooBQNFfosrPApx-0

• Investigate removing active style polyfill
• Remove focus polyfill
• Accessibility Spec
• Interaction Spec
• Documentation
• Figma Component @bhoppers2008

IDE has "Organize Imports" which uses TypeScript language service to sort import order. Some of the PR uses this, which creates more diff for review. So it would be good to enable it via prettier for example.

We want to migrate all tests to Cypress. So lab/src/tests/breadcrumbs need to be converted and housed at labs/src/tests/__e2e/breadcrumbs

See many existing examples for cypress patterns/conventions
The Cypress tests can consume StoryBook stories as fixtures

This can be seen on the QA story

Figma Spec: https://figma.com/file/PPXJDUextPeVjYr3Op3czK/Toolkit-Provider

• Add feature to allow styling of the body via the root Toolkit provider
• #607
• #658

Still to do:

Docs review for AriaAnnouncer will be tackled elsewhere

Symptom

CSS override from a consuming app will behave differently during a dev build and a prod build, due to CSS loading order issue.

Reproduce

Using this test repo as an example, clone the repo and run it locally yarn && yarn start uitk-app (modular unfortunately doesn't work with StackBlitz or Code Sandbox) and compare with prod build on github pages (or build and yarn modular serve uitk-app yourself).

Observe the Button position, where dev build would be on top right and prod build would be under the card.

Dev build, local

Prod build, GitHub page

Why

In the example repo, Button is styled with a custom class like below

<Button className="AbsoluteButton">

.AbsoluteButton {
  position: absolute;
  right: 0;
  top: 0;
}

During dev build, index.css is loaded last, followed the order of code

import App from './App';
import './index.css';

During prod build, CSS is extracted into a static file /static/css/main.0718f2f3.css (contains uitk-theme CSS and index.css) which is loaded before style injected uitk component CSS.

So if looking into dist/jpmorganchase-uitk-core/dist-es/packages/core/src/button, there is a Button.css.js and Button CSS will be loaded into head at run time.

Potential solution

Option 1

Extract CSS during uitk component build, so consumers can load the CSS like a static asset from theme package.

If we do this, we may as well include both core and lab css into theme css file, to make the theme package representing 'all you need' CSS.

Note that in this approach, all uitk-core/lab CSS will be loaded at once instead of only components being rendered. You may wonder whether this means there are more code being loaded to the browser at run time? Kind of yes and no. Currently all components CSS is bundled in JS as string, so CSS parsing and loading is actually happening after the page is first loaded, which may actually be slower depends on browser strategy. File caching strategy could be another consideration, e.g. for apps, extracting vender css separately maybe beneficial.

Quick test

1. Modify node_modules/modular-scripts/dist-cjs/build/buildPackage/makeBundle.js and modify _rollupPluginPostcss to use extract: true (this line of source code)
2. Build packages
3. Observe dist/jpmorganchase-uitk-core/dist-es/index.css being created
4. Copy and replace build files to the sample app node_modules
5. Import import '@jpmorganchase/uitk-core/dist-es/index.css'; in sample app code
6. Observe Button rendered at the correct position in both dev and prod build

Other options

Given uitk consumers will be using all types of building tools (CRA, modular, webpack, rollup, etc.), we can't assume certain things being done at the tooling level.

Core

Lab

Card css shouldn't target wildcard all pseudo elements

.uitkCard *, *:before, *:after {
    box-sizing: inherit;
}

Below 2 are duplicated

export const Status = {
  LOADING: "loading" as ContentStatusStatus,
  ERROR: "error" as ContentStatusStatus,
  SUCCESS: "success" as ContentStatusStatus,
  WARNING: "warning" as ContentStatusStatus,
  INFO: "info" as ContentStatusStatus,
};

&

export type Status = keyof typeof Status;

We probably don't need the first one, as TypeScript should be able to check status = Status.INFO the same way as status = "info", and the 2nd one is easier for consumer to write (one less import) with the same benefit of auto inference.

Preparation

• Existing defect backlog reviewed/evaluated, prioritized, and selected
• Functional requirements defined: functional test script is defined/written (not coded) and signed off by Dev, Design, ADA and Product leads
• Non-functional requirements defined (e.g. controlled vs. uncontrolled)
• Existing enhancements backlog reviewed/evaluated, prioritized, and selected
• Usability testing plan defined or deemed unnecessary
• Examples needed to properly demonstrate component features are defined and signed off by Dev, Design, ADA and Product leads

Development

• Component implemented in/ported to TypeScript
• 3rd-party dependencies removed
• JSS converted to CSS
• CSS upgraded to use characteristics
• Selected defects resolved
• Component API finalized
• Necessary refactoring completed
• Selected enhancements added

Testing

• Functional test script is implemented in Cypress and passes
• Code not covered by the functional test script is identified and reviewed by Dev & Design leads
• QA (v1-2 visual regression) test passes
• Automated Axe tests added and pass

Examples

• All examples present in TK1 are implemented as stories in Odyssey (ported from BitBucket)
• All examples needed are implemented as stories (either ported from BitBucket or created net new)

Deployment

• Codemods for migration created and verified
• Reviews/Signoff
• Dev production review
• Design review
• Product signoff
• ADA review
• Documentation
• Dev docs content provided
• TK1→Odyssey migration guide provided
• Design docs provided
• Consolidated documentation produced by combining dev content, migration guide, and design docs
• Consolidated documentation published on Storybook
• Consolidated documentation reviewed and updated according to user feedback
• Figma symbols
• New Odyssey Figma symbol created
• Figma symbol references updated to use new Figma symbol

Current horizontal checkbox group is missing spacing, e.g. on storybook

Where it should have 3x spacing like below

Although there is disableTooltip prop available, but this shouldn't be necessary for a text only group which shouldn't raise any accessibility concern

Reproduce: https://react-ts-vvs62w.stackblitz.io

One of the requirement for a lab component to be moved into core package is having a "Docs" page, e.g. Button doc is generated by this MDX button.doc.stories.mdx. What we need is at least

• Examples
• API
  • Props Table
  • HTML Anatomy
  • CSS Class
  • Characteristics Used
  • Custom Property API
    Customising styles

Components

• Accordion
• AppHeader
• Avatar #247
• Badge #194
• Breadcrumbs
• ButtonBar
• Calendar
• Card
• Cascading Menu
• Checkbox #237
• ColorChooser
• ComboBox
• ContactDetails
• ContentStatus
• Dialog
• Dropdown
• FileDropZone
• FormField
• FormattedInput
• Input
• Link
• List
• Logo
• MenuButton
• Metric
• Overlay
• Pagination
• Panel
• Pill
• Progress
• QueryInput
• RadioButton #201
• Responsive
• Scrim
• SearchInput
• Slider
• Spinner
• StepperInput #214
• Switch #239
• Tabstrip
• ToggleButton
• TokenizedInput
• Toolbar
• Tooltip #219
• Typography

motion styles should be wrapped in @media (prefers-reduced-motion: no-preference) in ParentChildLayout

Dialog icon size is smaller than expected, see below snapshot.

https://uitk.pages.dev/?path=/story/lab-dialog-qa--examples-grid

From Chromatic history, it's broken from b71a4d9

Also, Chromatic is not capturing the full grid, which missed the top most example.

All major browsers now support :focus-visible according to caniuse. We can therefore remove a bunch of code working around it, e.g.

• Button's focus-visible & focus workaround
• useIsFocusVisible is no longer needed

cc @joshwooding

Core

• Move accordion to core #235

Lab

• List family refactor
• New deck layout component #140
• New Skip Link component #248

Grid

• Ag grid theme #242

Dialog should not read aloud all of this content. Old UITK applied ...other which allowed users to override defaults such as aria-describedby which produces this issue. Similarly, DialogTitle forces h1 to be applied. A fix for this is to use disabledAria. Ideally, we should be able to provide a heading value since we would still need to re-add the span wrapper to achieve the desired heading style.

    <Dialog
      aria-describedby={null}
    >
      <DialogTitle disableAria>
      </DialogTitle>
    </Dialog>

Not an exhaust list (most labs feature can be pushed back to next release), but create one to track remaining work before cutting a new release.

Theme

• Characteristics refactor

Icons package

• Icon and helper is moved from Core to Icons package #200

Promote component to core

• Layouts (flex, flow, grid, stack) #141
• (Push back to next release) Form controls
  • Form Field #191 #204
  • Switch (pending move to core) #176
  • Checkbox
  • Input
  • Radio Button #201
  • Stepped Input
• Card #181
• Panel #155
• (Push back to next release) Pill #144 + Move to core
• Tooltip (dep of FormField) #198

New Lab features

Refer to #121

Doc

• Docs for new core component
  • Layout #158
• Storybook navigation structure #171

Others

• No foundation token used in core component css #186

Add doc for ParentChildLayout, BorderLayout and SplitLayout

We have --uitk-zIndex-tooltip defined in characteristics but it's not being applied in Tooltip.css. When used with FormField, it will do something like below

See error:
https://github.com/jpmorganchase/uitk/actions/runs/2598062792/attempts/1

https://www.npmjs.com/package/desktop-testing-environment

We want to migrate all tests to Cypress. So lab/src/tests/accordion need to be converted and housed at labs/src/tests/__e2e/accordion

See many existing examples for cypress patterns/conventions
The Cypress tests can consume StoryBook stories as fixtures

Currently, we don't handle this in the component's css but there's a storybook example showcasing how it can be achieved. A decision (ADA/design) needs to be made about how we handle this not only in the layer component but also similar components that have animations.

It would be nice for SplitLayout component to use the standard spacing through exposing gap prop, and passing it down into FlexLayout

When running storybook locally yarn start, there are a few TypeError from the docgen plugin. One of them being

TypeError: Cannot read properties of null (reading 'type')
...
Encountered issue parsing CSS variable declaration "--tab-before-content" in ".../uitk/packages/lab/src/tabs/Tab.css"

This is likely due to --tab-before-content is set to "", which is not fully supported by the parser.

Current behavior 😯

When using ButtonBar, the right most button has margins applied

Expected behavior 🤔

Right most button should have no right margin

Steps to reproduce 🕹

N/A

Theme

• Characteristic and foundation changes #196
• Backwards compat standardization #216

Core

• Form Controls move to Core
  • FormField #204
  • Input #232
  • Checkbox #237
  • RadioButton #238
  • Switch #239
• Pill move to Core #234
• Layout component ParentChild, Border,Split move to Core #221

Lab

• Breadcrumb uses Typograph #122
• Layout doc update #206
• New layer layout #152

Chromatic doesn't run on forked PR, e.g. #247. Chromatic doc suggests to move the token to project.

Currently we are using a custom implementation of useId. In version 18 React introduced their own version, we should use this when possible.

The ColorPicker component uses react-color for some visualisation, which we need to replace mostly due to bundle size.

https://bundlephobia.com/package/@jpmorganchase/[email protected]

Only SketchPicker is used in ColorPicker, and it should be replaceable by some gradients and drag/drop events.