-
Notifications
You must be signed in to change notification settings - Fork 1.1k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Provide a way to control UI states #6403
Comments
Duplicate of #6198 |
Argh, thanks. I tried to search for btw I just think of a better alternative. export function MyButton(props: MyButtonProps) {
// ...
return <Button className={state => getMyButtonClassName(props, state)} .../>
}
export function getMyButtonClassName(props, state) { ... }
// my_button.stories.tsx
export const Showcase = {
render() {
return <MyButton className={getMyButtonClassName({ ... }, { isPressed: true })} ... />
}
} |
Ah, that's a great approach. Thanks for sharing! |
Amend to the solution I have, some mocking function is needed to promote the mocked state classes to regular classes. For example using Tailwind, As I looked into these states, it seems like the Reopening this for now to address the issues. |
I noticed that my approach doesn't work with pseudo classes like Setting the data attribute In comparison, it works with it will be a huge save if we can get the same support here. |
Actually, I think it is a bug: codesandbox. I'll file an issue. |
Provide a general summary of the feature here
When creating component documentation, e.g. using storybook,
I want to create a story that show the component in various states.
For example, creating a story for a button, and showing how it looks like normally, when pressed, when hover, when focused, etc.
I couldn't do that write now because using css selector doesn't change the
state
object in:And the
ButtonContext
doesn't seem to work with UI states:It prints
isDisabled: true
butisPressed: false
. Also it does not have other states (likeisFocusVisible
).I can do it if I break it down to one story per component per state, and use
user.event()
to cause the state change.But the number of stories will explode and it is very hard to navigate.
🤔 Expected Behavior?
Have a way to do that.
😯 Current Behavior
No good way to do that statically.
💁 Possible Solution
Maybe provide a
<UIStateContext.Provider/>
🔦 Context
Creating a nice documentation
💻 Examples
No response
🧢 Your Company/Team
Palo Alto Networks
🕷 Tracking Issue
No response
The text was updated successfully, but these errors were encountered: