Provide a way to control UI states

[unional]

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:

<Button className={(state) => ...}/>

And the ButtonContext doesn't seem to work with UI states:

<ButtonContext.Provider value={{ isPressed: true, isDisabled: true }}>
  <Button
    className={(state) => {
      console.log('state', state)
      return ''
    }}
  >
    Click me
  </Button>
</ButtonContext.Provider>

It prints isDisabled: true but isPressed: false. Also it does not have other states (like isFocusVisible).

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

[snowystinger]

Duplicate of #6198

[unional]

Argh, thanks. I tried to search for isPressed and focusVisible so couldn't find that issue.

btw I just think of a better alternative.
The key is to extract the className handler out and apply it early in the story:

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 })} ... />
  }
}

[snowystinger]

Ah, that's a great approach. Thanks for sharing!
And no worries. I'm in here all the time, much easier for me to find a duplicate.

[unional]

Amend to the solution I have, some mocking function is needed to promote the mocked state classes to regular classes.

For example using Tailwind, hover:... needs to be promoted to ... and use tailwind-merge to enforce class order.

As I looked into these states, it seems like the <Link> component is missing the isVisited state, and isTargeted state is missing from components in general.

Reopening this for now to address the issues.

[unional]

I noticed that my approach doesn't work with pseudo classes like :active and :hover.

Setting the data attribute data-hovered doesn't work either.

In comparison, it works with @headlessui/react.

codesandbox

it will be a huge save if we can get the same support here.

[unional]

Actually, I think it is a bug: codesandbox.

I'll file an issue.

[snowystinger]

isTargeted state is missing from components in general

I'm not sure how we'd handle this one, we'd have to listen to the url fragment changing and on page load, then we'd need to match it with the id globally across all components. The string isn't a 1:1 match with the id either, there is a transform for it that the browser does. I think it's better to use the pseudo class for this one.

<Link> component is missing the isVisited state

This is another pretty complicated one. https://developer.mozilla.org/en-US/docs/Web/CSS/:visited see all the rules around what styles can even be applied. I'm not aware of a way to determine with JS that a link has been visited. We could take a guess if the link has been clicked, but I don't think that'd be the same as how the browser applies this pseudo class. I think it's better to use the pseudo class for this one as well.
For more info, see https://stackoverflow.com/questions/7290959/how-can-i-detect-visited-and-unvisited-links-on-a-page

Was there a particular reason you were looking for these? Or just wanted to render the styles for visual regression testing?
If just for testing, then I suggest applying a classname which applies the same styles.

my approach doesn't work with pseudo classes like :active and :hover

This is expected, those classes are applied by the browser, not by us.

With regards to the original ask, for ways to put components into specific states, tools such as Storybook/Chromatic now have methods to interact with a component before taking a snapshot, so you could use that to "mouse over, then press down" before taking a screenshot. https://www.chromatic.com/docs/interactions/ This should also theoretically work with the pseudo classes.

Happy to continue discussing, though I'm going to close the issue for now.