feat(Fieldset): update styles to support new 2.0 components #2023
Conversation
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## next #2023 +/- ##
==========================================
+ Coverage 97.40% 97.43% +0.02%
==========================================
Files 109 109
Lines 2582 2608 +26
Branches 648 665 +17
==========================================
+ Hits 2515 2541 +26
Misses 65 65
Partials 2 2 ☔ View full report in Codecov by Sentry. |
size-limit report 📦
|
booc0mtaco
force-pushed
the
aholloway/EDS-1242_EDS-1237
branch
3 times, most recently
from
4211930
to
c88a967
Compare
| @@ -1,6 +1,7 @@ | |||
| import { generateSnapshots } from '@chanzuckerberg/story-utils'; | |||
| import * as stories from './{{pascalCase name}}.stories'; | |||
| import type { StoryFile } from '../../util/utility-types'; | |||
There was a problem hiding this comment.
Improve: Update the plop template to do the right things
| @@ -3,10 +3,13 @@ import React from 'react'; | |||
| import styles from './{{pascalCase name}}.module.css'; | |||
|
|
|||
| export interface Props { | |||
| // Component API | |||
There was a problem hiding this comment.
Improve: Add newer templating where we group the props by those needed by eng (this area), from those to match what's in figma (Design API)
| @@ -18,13 +21,15 @@ export interface Props { | |||
| */ | |||
| export const {{pascalCase name}} = ({ | |||
| className, | |||
| // Add other deferenced props to use | |||
There was a problem hiding this comment.
Make sure the plopped file generates code that isn't immediately invalid to prettier but also a few more instruction areas
| @@ -52,37 +52,7 @@ module.exports = (plop) => { | |||
| template: | |||
| "export { default as {{pascalCase name}} } from './components/{{pascalCase name}}';", | |||
| }, | |||
| // From https://github.com/bradfrost/czi-vanilla-storybook | |||
There was a problem hiding this comment.
this sorting removes the useful comments and sections in the index.ts file. Updated the comment so if we want to restore the sorting, can look at the diff associated with the comment
| @@ -180,7 +180,7 @@ | |||
| border-color: var(--eds-theme-color-border-utility-critical); | |||
| } | |||
|
|
|||
| & ~ .radio__selected { | |||
| &:checked ~ .radio__selected { | |||
There was a problem hiding this comment.
Fixes bug where selected treatment is applied to ALL radio buttons regardless of checked state
- add in new props - update tests - add in warnings and assertions (with tests) - add in implementation examples for using radio buttons and checkboxes
booc0mtaco
force-pushed
the
aholloway/EDS-1242_EDS-1237
branch
from
c88a967
to
2704159
Compare
|
|
||
| describe('<{{pascalCase name}} />', () => { | ||
| generateSnapshots(stories); | ||
| generateSnapshots(stories as StoryFile); |
There was a problem hiding this comment.
Dang, this is annoying 😞. Shouldn't be necessary, but it's not obvious to me what the deal is.
What's weird is this works without casting in Bento. That project is using Storybook 8.2.4. Maybe there was a type regression in 8.2.5?
There was a problem hiding this comment.
This started happening sorta randomly when I first upgraded to storybook 7. Not every file threw errors at first, and I also couldn't figure out what made some imports freak out like this ... 🤔 Looks like all the tests now have this cast.
Removing the cast yields this TS error:
Argument of type 'typeof import("/**/$Component.stories")' is not assignable to parameter of type 'StoryFile'.
The types of 'default.play' are incompatible between these types.
Type 'PlayFunction<ReactRenderer, AccordionProps> | undefined' is not assignable to type 'PlayFunction<ReactRenderer, Args> | undefined'.
Type 'PlayFunction<ReactRenderer, AccordionProps>' is not assignable to type 'PlayFunction<ReactRenderer, Args>'.
Types of parameters 'context' and 'context' are incompatible.
Type 'PlayFunctionContext<ReactRenderer, Args>' is missing the following properties from type 'PlayFunctionContext<ReactRenderer, AccordionProps>': context, canvas, mount ts(2345)
## [15.2.0](v15.1.0...v15.2.0) (2024-07-25) [Storybook](https://61313967cde49b003ae2a860-bksjqddurj.chromatic.com/) ### Features * **Fieldset:** update styles to support new 2.0 components ([#2023](#2023)) ([e542b32](e542b32)) ### Bug Fixes * **Button:** update typography tokens to match design ([#2019](#2019)) ([3b94114](3b94114)) * **InputField:** align text content with inputWithin spacing ([#2020](#2020)) ([e87767b](e87767b))
Test Plan: