Skip to content
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

Segmented control styles are not correct in Storybook #2204

Closed
mperrotti opened this issue Aug 15, 2022 · 0 comments
Closed

Segmented control styles are not correct in Storybook #2204

mperrotti opened this issue Aug 15, 2022 · 0 comments

Comments

@mperrotti
Copy link
Contributor

Describe the bug

  1. :hover and :focus styles not being shown
  2. Dividers are not being shown between buttons

To Reproduce
Steps to reproduce the behavior:

  1. Go to https://primer.style/css/storybook/?path=/story/components-segmentedcontrol--basic or any other segmented control story
  2. See that the styles are not showing as expected

Expected behavior
SegmentedControlHoverActiveBug-correct

Screenshots
Kapture 2022-08-15 at 15 04 21

Desktop (please complete the following information):

  • OS: macOS
  • Browser Chrome
  • Version 104

Additional context
This is not a bug with the SCSS, the Storybook markup just needs to be updated. These issues were likely caused when we updated segmented controls to be an unordered list in this PR.

The hover and active styles should start being shown once we set aria-current={"true"|"false"} on each button

The dividers should start showing once we scope the divider styles to the list items instead of the buttons. Currently, we use an adjacent sibling selector on the button class to show these styles: src/segmented-control/segmented-control.scss#L58

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants