feat!: make version 2 the permanent version - #4259
Conversation
BREAKING CHANGE: Remove version selection and standardize web components and React and Angular wrappers
|
Preview links
Built from commit a0167f3. Previews are removed automatically when this PR closes. |
Updated dark mode theming to be included by default in web-components. Also updated a couple browser tests that were testing using old v1 tokens. And updated documentation around developer setup and dark mode setup.
twjeffery
left a comment
twjeffery
left a comment
There was a problem hiding this comment.
Went through the previews, including both playgrounds. The token swap does what it says, the switcher removal is clean in React and Angular with nothing orphaned, and the two test fixes look right, the dropdown one is measuring the popover now instead of one option, which is what #4200 asked for.
I went through the components that still reference v1 token names that aren't in 2.12.7, expecting some of them to lose styling. They don't, the v2 rules override them in every case. So the swap itself looks clean.
One thing it does surface though. The popover shadow is lighter now, and it's lighter than it should be. In Figma the popover uses Raised-heavy, and --goa-popover-box-shadow is pointing at --goa-shadow-raised-light. We were getting away with it because the v1 drop-shadow was stacking on top and darkening it, and this removes that. --goa-shadow-raised-heavy already exists in the tokens and nothing uses it, so it looks like a wiring fix in design-tokens rather than anything in this PR. Popover is the only component doing that stacking, so it should be the only one affected.
One question on the docs. The "Using design tokens in SCSS" section still has the callout warning that $goa-* variables can't flip with theme, but the part showing how to import tokens.scss came out. Was dropping the Sass support deliberate? If so the heading and callout could probably go too.
@twjeffery Both of these issues have been resolved in the Third Update. The |
twjeffery
left a comment
twjeffery
left a comment
There was a problem hiding this comment.
Went through all five components visually. Badge and filter chip are good in every state including dark mode, the menu button is fine, and the checkbox checkmark position came out right.
Three things.
The focus ring is gone on secondary and tertiary buttons. They're still in the tab order, they just don't show anything when you tab to them. I think it's from dropping .v2 off the selectors. button.v2:focus-visible used to have the same specificity as button.secondary:focus-visible and won on being later in the file. Now it's one class lower, so the outline: none on secondary and tertiary wins. Primary is unaffected. It shows up anywhere those buttons are nested too, so pagination, file upload, menu button and the form pages all lose their ring from the same cause. I ran into the same thing on the icon button a while back, where a variant rule was outranking the focus rule, and fixed it by re-asserting the ring at the higher specificity. There's a comment on it at the bottom of IconButton.svelte if it's useful.
The checkbox error state has a smaller version of the same thing. Its focus ring lost the gap between the ring and the red border, so it sits flush now.
Separate from those, the docs site is loading design tokens twice. BaseLayout.astro imports the web components stylesheet and then @abgov/design-tokens/dist/tokens.css right after, and docs/package.json is still on 2.12.7 while the root is on 2.12.8. The second one wins, so the docs are rendering older tokens than the components ship with. That's why the popover shadow fix isn't showing in the preview even though your pin is right. That second import is also the thing this PR is telling teams they don't need, so it might just be able to come out.
@twjeffery These issues should be resolved now with the latest push that also updated a few more components to test |
|
Went through everything in the latest update and it all looks right. Focus rings are back on secondary and tertiary, the checkbox error state has its gap again, and the docs are on the right tokens now so the popover shadow is showing properly. |
|
Went through the form components in the latest update and they all look right. |
|
Table, pagination and date picker look good. Just two issues on the Tabs:
From what I can tell the rule that clears the old border off the tabs isn't strong enough anymore now that the v2 came off it, so the selected and disabled tabs are getting their old borders back. On the active tab that would sit right under the new indicator and read as one thick line, and on the disabled one it's invisible but still taking up space, which would push the text up. Probably the same fix as the button focus ring. |
Just pushed an update. This should fix both of these issues, as well as updating Push Drawer, Notification, Modal, Drawer, and Callout |
2 participants
BREAKING CHANGE: Remove version selection and standardize web components and React and Angular wrappers
This update removes all references to a "version 2" in our web-components, and angular and react wrappers. This enforces a standard version used throughout the Design System and enforces the use of v2 of design-tokens.
I will modify this message as I add stuff to be tested to this PR:
First Update
For this first update, I have removed
design-tokens-v2alias from being used, and made our normaldesign-tokenspackage included inweb-componentsto be the latest version. This included modifying all of our PR libraries and our documentation site to use the new design-tokens now incorporated into web-components.All of the above needs to be tested and ensure it still works as it did. One point of mention, token switching in the Angular and React PRs no longer exists, as it's no longer needed.
Second Update
Updated a couple tests
dropdown.browser.spec.tsxandscroll-panel.browser.spec.tsx. They were testing very specific pixel measurements, which is brittle and can change with outside changes, such as design tokens (which is what happened here). Also updated Dark Mode usage, it is now included by default in web-componentsindex.css, instead of needing to download thedesign-tokensnpm package. And finally updated Developer Setup documentation and documentation around the Dark Mode theming and setup.Third Update
Updated the package.json to install
design-tokensv2.12.8 to get a fix for a previous commentMoved SASS installation instructions from Dark Mode Theme instructions, to the bottom of the basic Developer Setup page
Updated the following components to remove all mention of version 2:
This includes updating:
version="2"version="2"everywhere they're used)Fourth Update
Updated documentation package.json to install
design-tokensv2.12.8 for accurate token documentation.Updated how focus rings are handled for Button and for Checkbox
Updated the following components to remove all mention of version 2:
This includes updating:
version="2"version="2"everywhere they're used)Fifth Update
Updated the following components to remove all mention of version 2:
This includes updating:
version="2"version="2"everywhere they're used)Sixth Update
Updated the following components and their associated wrappers, and any documentation examples they are used in:
1. Tabs
2. Table Sort Header
3. Table
4. Pagination
5. Calendar
This includes a small update to Date Picker as well to remove passing version to Calendar.
This also includes updates to tables used in our documentation on pages:
1. Foundations - Motion
2. Foundations - Iconography
3. Foundations - Colour
4. Foundations - Date Format
5. All Component Documentation pages - Props tables
6. Get Started - Developers - Updating your product
7. Get Started - Developers - Browsers
8. Get Started - Articles - Two Phase Migration
9. Get Started - Articles - Parallel paths migration
10. Get Started - Migration guide
11. Get Started - AI tools and resources
12. Tokens Grid
13. Examples Grid
14. Components Grid
And this includes a minor change to the Data Grid web-components "Keyboard-navigation table" example.
And this updates the code used for the following examples:
1. Task list page
2. Sort data in a table
3. Show status in a table
4. Show number of results per page
5. Show multiple actions in a compact table
6. Show different views of data in a table
7. Set a specific tab to be active
8. Review page
9. Filter data in a table
10. Filter a list using a push drawer
11. Display user information
12. Display numbers in a table so they can be scanned easily
13. Activate a specific tab with a button
Seventh Update
Updated the following components and their associated wrappers, and any documentation examples they are used in:
1. Push Drawer
2. Notification
3. Modal
4. Drawer
5. Callout
This also includes updates to a lot of callouts used in our documentation on pages:
1. Foundations - Style Guide - Layout
2. Foundations - Content Guidelines - Date Format
3. All Component pages
4. Support
5. Workspace
6. Public Form
7. Get Started - Developers - Technologies
8. Get Started - Developers - Setup
9. Get Started - Developers - Dark Mode Theme
10. Get Started - Designers - Designing with DS
11. Get Started - Designers - Designing for Dark Mode
12. Get Started - AI Tools and Resources - Skills
13. Get Started - Roadmap
14. Get Started - Out of Support
15. Get Started
16. Get Started - Contribute
17. Get Started - AI Tools and Resources
And this updates the code used for the following examples:
1. Warn a user of a deadline
2. Task list page
3. Result page
4. Require user action before continuing
5. Notify the user of a future service outage
6. Filter a list using a push drawer
7. Confirm before navigating away
8. Confirm a destructive action
9. Confirm a change
10. Add another item in a modal
11. Add and edit lots of filters
12. Add a record using a drawer