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.

Sign up for GitHub

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

Jump to bottom

Implement OnyxTabs font styles and overflow #2079

Closed
11 tasks done
larsrickert opened this issue Nov 13, 2024 · 3 comments
Closed
11 tasks done

Implement OnyxTabs font styles and overflow #2079

larsrickert opened this issue Nov 13, 2024 · 3 comments
Assignees
@larsrickert
Labels
dev Requires technical expertise
Milestone
Navigation bars

Comments

@larsrickert
Copy link
Collaborator

larsrickert commented Nov 13, 2024 •
edited by MajaZarkova
Loading

Depends on

Why?

We want to offer multiple font styles for the OnyxTabs component and also make them horizontally scrollable if they exceed the max. available width (e.g. if many tabs are used).

Design

Figma

Acceptance criteria

  • Tabs should be horizontally scrollable if they exceed the max available width.
  • h3 and h4 font styles are implemented
  • The Storybook examples are updated to be more realistic
  • the bug is fixed that the tab content is not vertically centered if the tab is not selected
    image

Applicable ARIA Pattern

Tabs pattern

Definition of Done

  • covered by tests
    • visual tests (Playwright screenshots)
  • updated version + documentation is deployed
  • Storybook can show the feature
  • Storybook code snippet of new/changed examples are checked that they are generated correctly
  • Namings are aligned with Figma

Approval
@larsrickert larsrickert mentioned this issue Nov 13, 2024
Closed
16 tasks
@larsrickert larsrickert changed the title the tabs are horizontal scrollable if not all tabs fit into the available width Implement OnyxTabs being horizontally scrollable Nov 13, 2024
@larsrickert larsrickert added this to onyx Nov 13, 2024
@larsrickert larsrickert added the dev Requires technical expertise label Nov 13, 2024
@github-project-automation github-project-automation bot moved this to New in onyx Nov 13, 2024
@larsrickert larsrickert moved this from New to Backlog in onyx Nov 13, 2024
@larsrickert larsrickert self-assigned this Nov 13, 2024
@larsrickert larsrickert changed the title Implement OnyxTabs being horizontally scrollable Implement OnyxTabs font styles and overflow Nov 13, 2024
@larsrickert larsrickert moved this from Backlog to In Progress in onyx Nov 13, 2024
@larsrickert larsrickert mentioned this issue Nov 13, 2024
Merged
3 tasks
@mj-hof mj-hof added this to the Navigation bars milestone Nov 13, 2024
larsrickert added a commit that referenced this issue Nov 15, 2024
@larsrickert
feat(OnyxTabs): support horizontal scrolling when overflowing (#2089)
3f55c48 
Relates to #2079

- support horizontal scrolling when not all tabs fit into the available
width
- add property `size` to change the font style
- add CSS variable `--onyx-outline-width` and use it in all components
for consistency
- make Storybook examples more realistic
- fix vertical alignment of tab text if its not selected
@jannick-ux
Copy link
Collaborator

scroll behavior and font size is fine. Thanks.
Just one finding here regarding the colors: The deselected tabs should have the "color/text+icons/neutral/medium" variable, but it seems like the have the "intense" one. The intense-value is exclusively for the selected tab.

@larsrickert
Copy link
Collaborator Author

scroll behavior and font size is fine. Thanks. Just one finding here regarding the colors: The deselected tabs should have the "color/text+icons/neutral/medium" variable, but it seems like the have the "intense" one. The intense-value is exclusively for the selected tab.

The deselected already have the medium color, only the selected one has the intense one, see screenshot below. The difference is better visible in dark mode since medium and intense seem to be pretty similar in light mode

Image
Image

@jannick-ux
Copy link
Collaborator

Okay, in figma the deifference is more visible. But never mind, the important thing here ist, that the correct variable is used and it seems, this is the case.
The text colors will be optimized in the next couple of weeks to create more contrast. So we're on the fine side.

approved

@github-project-automation github-project-automation bot moved this from In Approval to Done in onyx Nov 15, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@larsrickert larsrickert

Labels
dev Requires technical expertise
Projects
onyx
Status: Done
Milestone
Navigation bars
Development

No branches or pull requests
3 participants
@larsrickert @mj-hof @jannick-ux