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

feat(tabs): css changes #2431

Merged
merged 4 commits into from
Sep 17, 2024
Merged

feat(tabs): css changes #2431

merged 4 commits into from
Sep 17, 2024

Conversation

Barsnes
Copy link
Member

@Barsnes Barsnes commented Sep 17, 2024

part of #2295

Copy link

changeset-bot bot commented Sep 17, 2024

🦋 Changeset detected

Latest commit: 7d3030f

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 4 packages
Name Type
@digdir/designsystemet-css Patch
@digdir/designsystemet-react Patch
@digdir/designsystemet Patch
@digdir/designsystemet-theme Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

Copy link
Contributor

github-actions bot commented Sep 17, 2024

Preview deployments for this pull request:

Storybook 17. Sep 2024 - 10:16 (Norwegian time)

Copy link
Contributor

github-actions bot commented Sep 17, 2024

Coverage Report

Status Category Percentage Covered / Total
🔵 Lines 63.65% 4583 / 7200
🔵 Statements 63.65% 4583 / 7200
🔵 Functions 86.17% 162 / 188
🔵 Branches 75.76% 594 / 784
File Coverage
File Stmts % Branch % Funcs % Lines Uncovered Lines
Changed Files
packages/react/src/components/Tabs/Tab.tsx 100% 100% 100% 100%
packages/react/src/components/Tabs/TabsRoot.tsx 100% 66.66% 100% 100%
Generated in workflow #406

@Barsnes Barsnes marked this pull request as ready for review September 17, 2024 07:10
z-index: 2;
}
&:focus-visible {
z-index: 2;
Copy link
Contributor

Choose a reason for hiding this comment

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

Could we just do position: relative and also add a comment about why we are doing this? 😊

Copy link
Member Author

Choose a reason for hiding this comment

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

No, we need to make sure it lands on top of the other buttons. Using just position relative makes the active line bleed through the focus indicator

Copy link
Member Author

Choose a reason for hiding this comment

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

This is what happens when we use just position: relative:
image

Copy link
Contributor

Choose a reason for hiding this comment

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

Right! comment on z-index and I'm happy <3

packages/css/tabs.css Outdated Show resolved Hide resolved
@Barsnes Barsnes merged commit 3451704 into next Sep 17, 2024
5 checks passed
@Barsnes Barsnes deleted the css/tabs branch September 17, 2024 08:43
mimarz pushed a commit that referenced this pull request Sep 20, 2024
This PR was opened by the [Changesets
release](https://github.com/changesets/action) GitHub action. When
you're ready to do a release, you can merge this and the packages will
be published to npm automatically. If you're not ready to do a release
yet, that's fine, whenever you add more changesets to next, this PR will
be updated.

⚠️⚠️⚠️⚠️⚠️⚠️

`next` is currently in **pre mode** so this branch has prereleases
rather than normal releases. If you want to exit prereleases, run
`changeset pre exit` on `next`.

⚠️⚠️⚠️⚠️⚠️⚠️

# Releases
## @digdir/[email protected]

### Patch Changes

- Textarea: Use `field-sizing: content`
([#2463](#2463))

- ErrorSummary: Rename ErrorSummary.Root to ErrorSummary
([#2437](#2437))

-   Tabs: ([#2448](#2448))

    -   Renames `Tabs.Root` to `Tabs`
    -   Renames `Tabs.Content` to `Tabs.Panel`

- Rename classes from `ds-error-message*` to `ds-validation-message*`
([#2473](#2473))

- Modal: css changes
([#2418](#2418))

- DropdownMenu:
([#2432](#2432))

    -   Rename from `DropdownMenu` to `Dropdown`
    -   Change API and structure
    -   Rename `.Root` to `.Context`
    -   Rename `.Content` to `Dropdown`

- Tabs: css changes
([#2431](#2431))

- ToggleGroup: Rename ToggleGroup.Root to ToggleGroup
([#2424](#2424))

- Badge: Only use single DOM element for rendering
([#2422](#2422))

- Skeleton: Replace Skeleton.Text, Skeleton.Circle and
Skeleton.Rectangle with <Skeleton variant="">
([#2435](#2435))

- Breadcrumbs: Rename `Breadcrumbs.Root` to `Breadcrumbs` and remove
`Breadcrumbs.Nav`
([#2428](#2428))

- HelpText:
([#2438](#2438))

    -   Use Popover API
    -   Remove `portal` prop
    -   Render icon with pseudo element and require aria-label

- Fieldset: Style using css attributes
([#2447](#2447))

## @digdir/[email protected]

### Patch Changes

- Correctly mark dependencies as external. This ensures Accordion works
when consumers have enabled tree-shaking.
([#2479](#2479))

- Button: Remove `type` when `asChild={true}`
([#2472](#2472))

- ErrorSummary: Rename ErrorSummary.Root to ErrorSummary
([#2437](#2437))

-   Tabs: ([#2448](#2448))

    -   Renames `Tabs.Root` to `Tabs`
    -   Renames `Tabs.Content` to `Tabs.Panel`

- Modal: css changes
([#2418](#2418))

- Rename `ErrorMessage` to `ValidationMessage`
([#2473](#2473))

- DropdownMenu:
([#2432](#2432))

    -   Rename from `DropdownMenu` to `Dropdown`
    -   Change API and structure
    -   Rename `.Root` to `.Context`
    -   Rename `.Content` to `Dropdown`

- Tabs: css changes
([#2431](#2431))

- ToggleGroup: Rename ToggleGroup.Root to ToggleGroup
([#2424](#2424))

- Badge: Only use single DOM element for rendering
([#2422](#2422))

- Skeleton: Replace Skeleton.Text, Skeleton.Circle and
Skeleton.Rectangle with <Skeleton variant="">
([#2435](#2435))

- Breadcrumbs: Rename `Breadcrumbs.Root` to `Breadcrumbs` and remove
`Breadcrumbs.Nav`
([#2428](#2428))

- HelpText:
([#2438](#2438))

    -   Use Popover API
    -   Remove `portal` prop
    -   Render icon with pseudo element and require aria-label

- Fieldset: Style using css attributes
([#2447](#2447))

## @digdir/[email protected]



## @digdir/[email protected]

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants