Build out the <FormField /> and <TextInput /> components, and add other features in preparation for new v2 pages
#1653
Conversation
🦋 Changeset detectedLatest commit: 6f9f614 The changes in this PR will be included in the next version bump. This PR includes changesets to release 3 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 |
|
Visit the preview URL for this PR (updated for commit 6f9f614): https://penumbra-ui-preview--pr1653-jessepinho-input-7kxh64ru.web.app (expires Fri, 16 Aug 2024 00:09:16 GMT) 🔥 via Firebase Hosting GitHub Action 🌎 Sign: 709d729610ef7a6369b23f1cb2b820a60cc685b1 |
jessepinho
force-pushed
the
jessepinho/input
branch
3 times, most recently
from
35206cd
to
ec240ff
Compare
jessepinho
force-pushed
the
jessepinho/input
branch
2 times, most recently
from
c32787f
to
6dcb645
Compare
jessepinho
force-pushed
the
jessepinho/input
branch
from
6dcb645
to
fe2a28f
Compare
jessepinho
force-pushed
the
jessepinho/input
branch
from
fe2a28f
to
f4ee9c7
Compare
| @@ -37,7 +37,7 @@ export const AssetsPage = () => { | |||
| }); | |||
|
|
|||
| return ( | |||
| <div className='flex flex-col gap-1'> | |||
| <> | |||
There was a problem hiding this comment.
The div was never needed, since it only had one child
| @@ -30,16 +30,14 @@ export const DashboardLayout = () => { | |||
|
|
|||
| <Grid tablet={8} desktop={6} xl={4}> | |||
| <Card title={CARD_TITLE_BY_PATH[v2PathPrefix(pagePath)]}> | |||
| <div className='flex flex-col gap-4'> | |||
There was a problem hiding this comment.
This wrapper is no longer needed, since <Card /> now applies a spacing of 4 to all its direct children
There was a problem hiding this comment.
There was a problem hiding this comment.
I added a bunch more content to the card in this story, to show how it can be used (especially with the new <Card.Stack /> and <Card.Section /> subcomponents).
| @@ -71,7 +71,7 @@ const Color = <T extends Exclude<TColor, 'action' | 'other' | 'base'>>({ color } | |||
| <Grid mobile={6} tablet={10}> | |||
| <Variants> | |||
| {color === 'text' | |||
| ? (['primary', 'secondary', 'disabled', 'special'] as const).map(variant => ( | |||
| ? (['primary', 'secondary', 'muted', 'special'] as const).map(variant => ( | |||
There was a problem hiding this comment.
(due to the updated theme values)
There was a problem hiding this comment.
There was a problem hiding this comment.
Some color updates per Figma
There was a problem hiding this comment.
jessepinho
changed the title
<FormField /> and <TextInput /> components, and add other features in preparation for new v2 pages
This is another PR where I was planning on making some new v2 pages, but then realized how many more components still had to be built before I could create the pages.
In this PR
<Card />component further with<Card.Stack />and<Card.Section />sub-components.<FormField />and<TextInput />components.<SegmentedControl />(rather than just one of its options).DisabledContextanduseDisabled()hook.disabledto<FormField />without having to also pass it to whatever input component is the<FormField />'s children.<FormField />then sets the disabled context totrue, which is then read by the child input component.ActionTypeinto a shared type used by multiple files.