Form field theming set up #2672
Conversation
🦋 Changeset detectedLatest commit: 8992b07 The changes in this PR will be included in the next version bump. This PR includes changesets to release 5 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
|
Size Change: -22 B (-0.02%) Total Size: 100 kB
ℹ️ View Unchanged
|
…e, sizing token usage, and use global focus styles for TextField and TextArea
A new build was pushed to Chromatic! 🚀https://5e1bf4b385e3fb0020b7073c-mjdyoddrji.chromatic.com/ Chromatic results:
|
…ographyand sizing usage
beaesguerra
force-pushed
the
text-input-fields
branch
from
864b7ad to
780c5db
Compare
| export const Combinations: Story = { | ||
| render: (args) => { | ||
| return ( | ||
| <AllVariants |
There was a problem hiding this comment.
Creating a new story for testing the component with a value and placeholder in different states. We don't include this in the StateSheet because it's unnecessary to see these things with all the different pseudo states (it's enough to show these cases at rest!)
| name: "Readonly", | ||
| props: {readOnly: true}, |
There was a problem hiding this comment.
Adding readonly since we have TB designs for the readonly state!
| // This minHeight is equivalent to when the textarea has one row | ||
| minHeight: `calc(${VERTICAL_SPACING_PX * 2 + 2}px + ${font.lineHeight.medium})`, | ||
| minHeight: `calc(${VERTICAL_SPACING} * 2 + ${sizing.size_020} + ${font.lineHeight.medium})`, | ||
| ...focusStyles.focus, | ||
| }, | ||
| default: { | ||
| background: semanticColor.input.default.background, |
There was a problem hiding this comment.
We continue to use the semanticColor.input tokens. In the next PR where I work on adding the TB theme, I'll see if we need to make any changes to the shared input tokens!
| @@ -727,6 +727,7 @@ const styles = StyleSheet.create({ | |||
| borderRadius: border.radius.radius_040, | |||
| border: `solid 1px ${theme.combobox.color.default.border}`, | |||
| paddingInline: spacing.xSmall_8, | |||
| overflow: "hidden", | |||
There was a problem hiding this comment.
This addresses an issue where the TextField was overlapping the combobox wrapper
beaesguerra
force-pushed
the
text-input-fields
branch
from
050fc5e to
a8c0b70
Compare
GeraldRequired Reviewers
Don't want to be involved in this pull request? Comment |
npm Snapshot: Published🎉 Good news!! We've packaged up the latest commit from this PR (9090a71) and published all packages with changesets to npm. You can install the packages in ./dev/tools/deploy_wonder_blocks.js --tag="PR2672"Packages can also be installed manually by running: pnpm add @khanacademy/wonder-blocks-<package-name>@PR2672 |
| @@ -727,6 +727,7 @@ const styles = StyleSheet.create({ | |||
| borderRadius: border.radius.radius_040, | |||
| border: `solid 1px ${theme.combobox.color.default.border}`, | |||
| paddingInline: spacing.xSmall_8, | |||
| overflow: "hidden", | |||
| defaultFocus: { | ||
| // TODO(WB-1864): Use focusStyles.focus | ||
| ":focus-visible": { | ||
| borderColor: semanticColor.focus.outer, | ||
| outline: `${border.width.thin} solid ${semanticColor.focus.outer}`, | ||
| // Negative outline offset so it focus outline is not cropped off if | ||
| // an ancestor element has overflow: hidden | ||
| outlineOffset: -2, | ||
| }, | ||
| }, |
There was a problem hiding this comment.
praise: Awesome, thanks for the cleanup!
| chromatic: { | ||
| modes: { | ||
| default: allModes.themeDefault, | ||
| thunderblocks: allModes.themeThunderBlocks, | ||
| }, | ||
| }, |
There was a problem hiding this comment.
thought: I also mentioned this in Chromatic. Would it make sense to refactor this to use StateSheet. I'm seeing that we are going to x2 the stories here, and I'm wondering if there's space to optimize for that.
There was a problem hiding this comment.
I reduced the number of snapshots we had for LabeledField and SearchField by combining and simplifying stories. Let me know what you think!
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## feature/field-theming #2672 +/- ##
=============================================
=============================================
Continue to review full report in Codecov by Sentry.
🚀 New features to boost your workflow:
|
Summary:
Prep work for applying TB theming for TextField, TextArea, and LabeledField
spacingtokens tosizingAlso added more stories for visual regression tests. And set up testing snapshot stories for LabeledField and SearchField so that we can have less Chromatic snapshots for each story in each theme.
The next PR will set up the TB styling for these components!
Issue: WB-1864
Test plan:
?path=/story/packages-form-testing-snapshots-textarea--state-sheet-story&globals=theme:defaulthttp://localhost:6061/?path=/story/packages-form-testing-snapshots-textfield--state-sheet-story&globals=theme:defaulthttp://localhost:6061/?path=/docs/packages-labeledfield--docs&globals=theme:default?path=/story/packages-form-testing-snapshots-textarea--combinations&globals=;theme:default?path=/story/packages-form-testing-snapshots-textfield--combinations&globals=;theme:default