Skip to content

UI: Fix interaction step collapse icon#31853

Merged
valentinpalkovic merged 9 commits into
storybookjs:nextfrom
AvitalHass:avitalhass/firstbranch
Jul 14, 2025
Merged

UI: Fix interaction step collapse icon#31853
valentinpalkovic merged 9 commits into
storybookjs:nextfrom
AvitalHass:avitalhass/firstbranch

Conversation

@AvitalHass

@AvitalHass AvitalHass commented Jun 23, 2025

Copy link
Copy Markdown
Contributor

Related to #31701. Does not close the issue.

What I did

change interaction step collapse icon to arrowUp/ arrowDown and add an aria-label to the icon

Checklist for Contributors

Testing

The changes in this PR are covered in the following automated tests:

  • stories
  • unit tests
  • integration tests
  • end-to-end tests

Manual testing

This section is mandatory for all contributions. If you believe no manual test is necessary, please state so explicitly. Thanks!

  1. Run Storybook locally with cd code && yarn task compile && yarn storybook:ui
  2. Go to http://localhost:6006/?path=/story/core-component-test-basics--step
  3. Select the interaction panel and run the function
  4. See the collapse/expand buttons used on the side of each step

Documentation

  • Add or update documentation reflecting your changes
  • If you are deprecating/removing a feature, make sure to update
    MIGRATION.MD

Checklist for Maintainers

  • When this PR is ready for testing, make sure to add ci:normal, ci:merged or ci:daily GH label to it to run a specific set of sandboxes. The particular set of sandboxes can be found in code/lib/cli-storybook/src/sandbox-templates.ts

  • Make sure this PR contains one of the labels below:

    Available labels
    • bug: Internal changes that fixes incorrect behavior.
    • maintenance: User-facing maintenance tasks.
    • dependencies: Upgrading (sometimes downgrading) dependencies.
    • build: Internal-facing build tooling & test updates. Will not show up in release changelog.
    • cleanup: Minor cleanup style change. Will not show up in release changelog.
    • documentation: Documentation only changes. Will not show up in release changelog.
    • feature request: Introducing a new feature.
    • BREAKING CHANGE: Changes that break compatibility in some way with current major version.
    • other: Changes that don't fit in the above categories.

🦋 Canary release

This PR does not have a canary release associated. You can request a canary release of this pull request by mentioning the @storybookjs/core team here.

core team members can create a canary release here or locally with gh workflow run --repo storybookjs/storybook canary-release-pr.yml --field pr=<PR_NUMBER>

@greptile-apps greptile-apps Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

1 file reviewed, 1 comment
Edit PR Review Bot Settings | Greptile

Comment thread code/core/src/component-testing/components/Interaction.tsx Outdated
@valentinpalkovic valentinpalkovic added bug accessibility ui ci:normal Run our default set of CI jobs (choose this for most PRs). labels Jun 30, 2025
@storybook-app-bot

storybook-app-bot Bot commented Jun 30, 2025

Copy link
Copy Markdown

Package Benchmarks

Commit: 3d2f385, ran on 6 July 2025 at 18:25:09 UTC

No significant changes detected, all good. 👏

@nx-cloud

nx-cloud Bot commented Jul 2, 2025

Copy link
Copy Markdown

View your CI Pipeline Execution ↗ for commit ba59f68.

Command Status Duration Result
nx run-many -t build --parallel=15 ✅ Succeeded 16s View ↗

☁️ Nx Cloud last updated this comment at 2025-07-02 08:18:11 UTC

@Sidnioulz Sidnioulz left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM but please switch the icons to chevrons instead.

import { IconButton, TooltipNote, WithTooltip } from 'storybook/internal/components';

import { ListUnorderedIcon } from '@storybook/icons';
import { ArrowSolidDownIcon, ArrowSolidUpIcon } from '@storybook/icons';

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
import { ArrowSolidDownIcon, ArrowSolidUpIcon } from '@storybook/icons';
import { ChevronDownIcon, ChevronUpIcon } from '@storybook/icons';

onClick={toggleCollapsed}
aria-label={isCollapsed ? 'Expand interaction' : 'Collapse interaction'}
>
{isCollapsed ? <ArrowSolidDownIcon /> : <ArrowSolidUpIcon />}

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
{isCollapsed ? <ArrowSolidDownIcon /> : <ArrowSolidUpIcon />}
{isCollapsed ? <ChevronDownIcon /> : <ChevronUpIcon />}

This would be the icon we want to use for collapse/expand.

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

done

@Sidnioulz

Sidnioulz commented Jul 6, 2025 via email

Copy link
Copy Markdown
Contributor

@AvitalHass

Copy link
Copy Markdown
Contributor Author

It will probably be merged tomorrow. I'm a reviewer but not a maintainer, so my approved PRs are usually reassigned to a core team member on the weekly meetings on Monday. If your CI is all green, it should be over very soon :)

great, thank you:)

@valentinpalkovic valentinpalkovic changed the title fix: change interaction step collapse icon to arrowUp/ arrowDown and add an aria-label the icon UI: Fix interaction step collapse icon Jul 14, 2025
@valentinpalkovic valentinpalkovic merged commit 9bf3929 into storybookjs:next Jul 14, 2025
49 checks passed
@github-actions github-actions Bot mentioned this pull request Jul 14, 2025
18 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

accessibility bug ci:normal Run our default set of CI jobs (choose this for most PRs). ui

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants