Sarka/storybook migration b7 #4485
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
Storybook staging is available at https://kiwicom-orbit-sarka-storybook-migration-b7.surge.sh |
|
Size Change: -5 B (0%) Total Size: 460 kB
ℹ️ View Unchanged
|
Deploying orbit with
|
| Latest commit: |
22ed55c
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://072e45b7.orbit.pages.dev |
| Branch Preview URL: | https://sarka-storybook-migration-b7.orbit.pages.dev |
sarkaaa
force-pushed
the
sarka/storybook-migration-b7
branch
3 times, most recently
from
781bacd to
79e6fda
Compare
sarkaaa
commented
Sep 27, 2024
| ...args | ||
| }) { | ||
| return ( | ||
| <Box background="cloudLight"> |
There was a problem hiding this comment.
I wrapped the Tabs component and its children by Box component with a background to better visualize the whole set of components (components could have set padding, margin, spacing).
sarkaaa
force-pushed
the
sarka/storybook-migration-b7
branch
from
79e6fda to
7ad8c3c
Compare
sarkaaa
commented
Sep 27, 2024
| control: { | ||
| type: "select", | ||
| argTypes: { | ||
| spacing: { |
There was a problem hiding this comment.
I defined "table category" for each arg as I mix multiple components here. Some of the components contain the same prop name, so I set a different name for them and then I set the "name" to have a correct prop name in the controls panel (same for the Table component, there is id common prop).
sarkaaa
commented
Sep 27, 2024
| secondTabContent: "Tab 2", | ||
| fullWidth: false, | ||
| }; | ||
| export const Playground: Story = { |
There was a problem hiding this comment.
In this Playground story I didn't include active and onClick props for Tab/TabPanel component as it's related to the Controlled state. In case when have two tabs in the playground, I couldn't find a simpler solution to handle the active state separately for each Tab/TabPanel.
There was a problem hiding this comment.
I'll comment here since you wrote this comment and it's related, but maybe it could be applied to Controlled story. Can't we just add something like selected arg with select options 0-3 and use that to control the tabs?
I assumed until now that for controlled stories, it's not possible to manipulate with the component manually and you can only change the value via controls. At least that's what's happening e.g. in Card controlled story. Maybe I completely misunderstood 😅
I think we need to revisit this in the stories.
There was a problem hiding this comment.
I have two general points:
- Have you checked conditional controls? I think it might be useful in some situations (e.g. with controlled/uncontrolled)
- I don't know if we agreed on something regarding info, but I think mostly we have been setting something like - for default stories "this is the default configuration", for playground "this is playground/you can try all possible combinations" and for RTL "this is a preview of this component in RTL setup". Sometimes you have very random info like "Explore *** component" 😄 Maybe when you will be doing some changes to stories, you can maybe take a look at this so we are consistent.
| titleDecrement: "Remove a passenger", | ||
| active: false, | ||
| }; | ||
| export const Stateless: Story & StoryObj<typeof StatelessStepper> = { |
There was a problem hiding this comment.
Can we make the increment/decrement buttons work? 🤔
There was a problem hiding this comment.
I couldn't figure it out. I guess it's related to un/controlled state. Do you have any idea how to fix it? 🙏
packages/orbit-components/src/StopoverArrow/StopoverArrow.stories.tsx
Outdated
Show resolved
Hide resolved
| secondTabContent: "Tab 2", | ||
| fullWidth: false, | ||
| }; | ||
| export const Playground: Story = { |
There was a problem hiding this comment.
I'll comment here since you wrote this comment and it's related, but maybe it could be applied to Controlled story. Can't we just add something like selected arg with select options 0-3 and use that to control the tabs?
I assumed until now that for controlled stories, it's not possible to manipulate with the component manually and you can only change the value via controls. At least that's what's happening e.g. in Card controlled story. Maybe I completely misunderstood 😅
I think we need to revisit this in the stories.
No, I haven't, we can include it in the "fix" ticket and set some internal rules (when use it, etc...)
As far as I remember, we returned it back when the info didn't correspond to the state of a respective story (eg. info describing "playground" in the default Story), but we haven't agreed on any standard of the form of the info description. |
sarkaaa
force-pushed
the
sarka/storybook-migration-b7
branch
2 times, most recently
from
6e56758 to
ec18a44
Compare
sarkaaa
force-pushed
the
sarka/storybook-migration-b7
branch
from
ec18a44 to
9523be1
Compare
domihustinova
approved these changes
Oct 7, 2024
sarkaaa
force-pushed
the
sarka/storybook-migration-b7
branch
from
81df124 to
22ed55c
Compare
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This Pull Request meets the following criteria:
For new components:
d.tsfiles and are exported inindex.d.tsCloses https://kiwicom.atlassian.net/jira/software/c/projects/FEPLT/boards/404?selectedIssue=FEPLT-2078