HackMDArc UI System Roadmap
Introduction
Arc UI System is a collection of tools and practices that help teams working on BT Enterprise digital products build high quality web user interfaces at scale.
This document is the opportunity roadmap for Arc, with milestones broken down into the following categories:
- Now: we're actively working on these
- Next: these are high priority and will be pulled into the queue as soon work-in-progress capacity allows
- Later: options for the future, in a rough priority order
- Done: completed 🚀
Now
- Calendar & Datepicker
- Media Card
Next
- Typography Card
- New Design language roll out
Later
Form extensions
- Support icons in TextInput
- Consider supporting aria-disabled (reference: Making Disabled Buttons More Inclusive)
Build middle tier components
This should be considered as a list of possibilities.
- Loader/Spinner
- Avatar
- Video Player
- Table
- Tooltips
- Carousel
- Countdown
- Colour switcher (on PDP e.g. choose handset colour)
- Timeslot picker
- Logos (vendor, payment etc)
Support Flutter
Distant future, establish a need first.
Support email building
Distant future, establish a need first.
Done
Where we keep things that are no longer recently completed.
The past
We didn't start tracking in this format until we decoupled from the Consumer team.
Fundamental components (20th Jan 2021)
- Button
- Surface
- Card
- VerticalSpace
- Group
- Columns
- Align
- Section
- Heading
- Text
- Image
- Poster
- RichText
- HorizontalRule
- BrandLogo
- Link
Get first cut deployed (9th Feb 2021)
Handle post-decouple infrastructure repair.
- Rename Github org
- Create new NPM org
- Confirm URL for initial version of site
- Confirm project name
- Discuss if we reset versioning to zero or not
- Restore deploys
- Update meta info in package.json
- Publish components
- Fix versioned Storybook file paths
- Update design.bt.com links in docs to new URL
- Set up domain
- Set up email address
Support BT icons (10th Feb 2021)
- Source BT SVG icons
- Add Icon variant to Figma plugin
- Add SVG icons to system
- Create Icon component in components-react
Incorporate BT Design Language (15th Mar 2021)
- Reverse BT colour palette back to brand
- Create color use tokens
- Add gradients
- Consider linking language in Button/Link component
- Support muted/supporting text in Text
- Solve Surface nesting issues
- Adjust bt raw color pink-01
- Rework Card
- Support Proposition text (pink) & Headline color
- Card buttons and links should respond to Card hover/active states
- Tokenize rounded corners
- Add BT radial gradient tokens to system
- Support elevation
- Solve Icon fill state
- Support motion
- Remove role="button" and associated attributes from anchor Buttons
- Fix various visual issues with link states in Cards (inc. Safari specific)
- Add Icon to existing components
- Support curves
- Add Curve support to Figma
- Ensure Figma aligns with system/updated components
- Release it!
Deliver viable Figma library (15th Mar 2021)
Get the Figma system into a useful state for BTB agency work.
- Update Figma to work with latest system
- Migrate Figma plugin to TypeScript
- Setup Figma team or project
- Add BrandLogo component to Figma library
- Add Surface component to Figma library
- Add Frame component to Figma library
- Make Figma plugin easier to reason with
- Built Figma version is unpredictable
- Automate distribution of Figma plugin
- Represent system using Figma styles
- Support relevant components in Figma
- Support all typographic tokens in Figma
- Add Heading/Text components to Figma
- Add gradients to Figma plugins
- Add drop shadow effect to Figma
- Add BT use colors to figma
- Add Icon variant properties to Figma
- Restrict weights in Figma Heading & Text components
- Investigate Figma component composability
- Add Card to Figma library
- Restructure Figma icon component
- Demo Figma plugin and workflow
March Cool-down
A grab-bag of bug fixes and smaller issues.
Rename from Loop to Arc (20th Apr 2021)
- Rename
looptoarcin roadmap - Rename
looptoarcin repo code & docs - Rename packages
- Rename
looptoarcin release template - Change Github repo name
- Announce first arc release
- Add some
arcwords tohelp-ui-systemSlack channel description & topic - Update demo meeting
- Rename Figma library and team
Improve docs and comms (22nd Apr 2021)
- Upgrade Storybook
- Spike: add Figma to Storybook
- Move Docusaurus dev/contributing sections from public to internal docs
- Fix Docusaurus to Storybook link
- Investigate general Storybook performance
- Prevent favicon 403 in deployed storybook
- Change Docusaurus sidebar link from Github to Components (Storybook)
- Use official BT imagery in stories
- Storybook gardening
- Create public
#help-ui-systemchannel - Organise stories in Storybook
- BT Business page example can show in EE brand in Storybook
- Fix demo sessions
- Make
btthe default forBase - Write general introduction
- Spike on docs
- Prevent indexing and crawling of site
- Write barebones READMEs for published packages
- Link to UI site in Slack channel
- Create intro story in Storybook
- Write design workflow docs
- Fix brand-forbidden Arc logo in Storybook and Docs site
- Fix sorting on t-shirt sizes in stories
- Handle links to Figma plugin
- Handle errors for docs pages that don't exist in previous versions
- VerticalSpace story is broken
- Add Roadmap to sidebar
Initial Phoenix composition and DevEx additions (17th May 2021)
- Support layering
- Update Surface padding props to numeric enums
- Fix
Postercurves - Add Phoenix example page
- Hide margin when empty Col is full width
- Add noWrap prop to Group.Item
- Remove unnecessary toUpperCase in VerticalSpace
- Rotate Poster scrim to improve text legibilty
- Flatten Poster overlay on small viewports
Build simple BT-only site furniture components (17th May 2021)
- BT GroupHeader
- BT Footer
- placeholder BT SiteHeader
- Release simple BT-only site furniture components
- Add simple BT-only site furniture components to Figma
Enhance and release Figma library (7th June 2021)
- Fix incorrect maths in figma gradients
- Align Figma Heading/Text breakpoints with Grid styles
- Use manual designs for Figma Heading & Text
- group raw BT colors in Figma
- Align Figma heading breakpoints with other components
- Update Figma component names to match React
- Make Figma library public
May/June Cool-down (7th June 2021)
A grab-bag of bug fixes and smaller issues.
- Fix SiteFooter layout bug
- Set up mirror on internal Gitlab
- Order Tracker comps
- Mandate two factor for members of Github org
- Fix Storybook deployed builds
- Rename OrgansiationHeader to UniversalHeader
- See if we can add * { revert:all } to Base
- BrandLogo needs a text label for a11y
- Prevent off-brand bold text in large Headings
- Audit and bump packages
- Poster subcomponents are missing displayName
- Collate feedback on notifications
- Turn on Dependabot
- Bump lerna to v4.x
Make design tokens public (9th June 2021)
For per-project components.
- Investigate design token readiness
- Add EE warning
- Add missing CSS-only tokens to
tokens-scss - Add SVG (icon & curve) tokens to
tokens-scss - Upgrade to
style-dictionary3.x - Pre-publish
tokens-scss - Pre-publish
tokens-json - Pre-publish
tokens-web - Release the tokens
- Update release template
Browser and device spec draft (2nd July 2021)
System additions and amends 01 (2nd July 2021)
Derived from design reviews and original Phoenix comp.
- Revise section max width and breakpoints
- Add isGutterless prop to Columns
- Support brand colours in icon
- Support social icons
Add 80px spacing increment to VerticalSpacing- Add more values to Surface padding
Solve for white outline buttons in dark pathwaySolve for Poster pop on narrow- Research Brand illustrations
- Add gutterBorder to Group
Resolve IE11 situation (13th July 2021)
Fix support for Internet Explorer 11.
- Fix Icon in IE11
- Move browserslist config to root
- Single column Columns in IE11
- Fix Storybook in IE11
- Plan IE11 issues
- Test everything in FF 60.x using Browserstack
- Various minor Grade B bugs
- Fix
BrandLogoin Grade B browsers - Decide how to handle
Disclosurein IE11 - Set up browserslist with intent
- Fix flat
Buttonpressed state in IE11 - Update all "Grade B" in code comments to "IE 11"
- Final QA pass
Core documentation (18th August 2021)
- Add browser support to site docs
- Add grid of all icons via Icon component to docs
- Arc fonts aren't loading on website
- Document system
- Arc logo not showing in Safari 14.1.1
- Document BT Colour
- Make Arc fonts available in docs site
- Review detailed design docs
Prep and release v1 (15th September 2021)
Stabilise API. Aim for 13th September 2021.
- Bump
@figma/plugin-typings - HTML snippet crashes storybook
- Investigate bumping React peerdep and associated to v17.x
- Invalid fill states in some icons
- Update browser spec with review feedback
- Add new icons from Brand
- Decide what to do with Card
- Rename tokens based on docs audit
- Reimport icons
- Remove alpha message from banner on docs site
- Do v1 release
Documentation additions (8th October 2021)
- Document analytics
- Mention @arc-ui/tokens-scss in the documentation
- Process holding area doc notes
- Fix tokens naming
- Heading scale in docs should now reference "extra large" not "large" breakpoint
- Expand on linking language docs
- Document polyfills
- Can we add links to docs page stories to view them full screen?
- Add token names to background colours in docs site
- Consistentify Arc naming
Full site furniture (9th December 2021)
Space between icon & text inSiteFooter.Itemsrelies on flexgap- Update
SiteHeadercomponent SiteFooter<disclosure>elements don't open in bundle-web version- Add YouTube icon to Figma
- Update
SiteFootercomponent in Figma - Review Phoenix site furniture design
- Fix
SiteFooteruse of internal Columns in IE11 - Update
SiteFootercomponent - Add
SiteHeaderrehydrator - Release Figma v2.1.0
- Improve
SiteHeaderkeyboard & screenreader support - Fix layout jump in
SiteHeadersub nav - Add
searchprop toSiteHeader - Support setting current
SiteHeader.NavItem
Internal onboarding prep (14th January 2022)
Prep Arc codebase for more contributors.
- Document icon update process
- Document Figma library publishing process
- Document release announce process
- Archive
react-from-markupfork - Deprecate
react-from-markupfork packages - Bump or remove
block-fixup-mergeaction - Investigate updating
storybook/addon-ie11dependency and fix - Transfer
@storybook/addon-ie11fork to BTEnterpriseDigital Github org - Remove iOS Swift support
- Link to browser supports docs from PR checklist template
- Investigate Babel "deoptimised" warnings and Storybook webpack config
- Explore uncoupling
react-demoandwebsitedependencies - Reconfigure & update Jest
- Explore performance
- Reset test strategy
- Scaffold test coverage
- Add
.vercelto eslintignore - Add SiteHeader tests
- Add comment to PR template to delete irrelevant checks
Forms (1st March 2022)
Revisit original forms implemention.
- Minor tweaks to RadioGroup
- Checkboxes in a FormControl should not show (optional)
- Replace input –invalid modifiers with aria selectors
- Align RadioGroup and Checkbox margins
- Add Formik example to Storybook
- Improve form component spacing
- Review Form components status (tracker)
- Review
aria-attribute usage - Add onBlur handlers to form components
- Form component Phoenix alignments
- Review form component markup (consistency, correctness)
- Add missing disabled states to Figma
- Review form component props API for consistency
- Add form component tests
IE11 Support (4th May 2022)
More onboarding prep (16th May 2022)
- Include linting in
yarn test - Upgrade to PostCSS 8
- Include custom "do not edit" comments in style dictionary generated files
- Lint css (and scss)
- Ensure developer docs info is correct and up-to-date
- Update main README
- Update/edit Figma plugin manual steps in developer docs
- Document versioning strategy
Remove EE brand (13th June 2022)
React 18
- Update to React 18 (5th July 2022)
