Skip to content

Conversation

@AvitalHass
Copy link
Contributor

@AvitalHass AvitalHass commented Jun 23, 2025

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>

Copy link
Contributor

@greptile-apps greptile-apps bot left a comment

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

@storybook-app-bot
Copy link

storybook-app-bot bot commented Jun 30, 2025

Package Benchmarks

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

No significant changes detected, all good. 👏

@nx-cloud
Copy link

nx-cloud bot commented Jul 2, 2025

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

Copy link
Member

@Sidnioulz Sidnioulz left a comment

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
Member

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
Member

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
Contributor Author

Choose a reason for hiding this comment

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

done

@Sidnioulz
Copy link
Member

Sidnioulz commented Jul 6, 2025 via email

@AvitalHass
Copy link
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

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants