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

feat(TabGroup): update handling for tab item hover states #2124

Merged
merged 2 commits into from
Jan 21, 2025
+27 −37
Merged

feat(TabGroup): update handling for tab item hover states #2124

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
131b198
feat(TabGroup): update handling for tab item hover states
booc0mtaco Jan 15, 2025
0110231
chore(TabGroup): change version from 2.1 to 2.0.1
booc0mtaco Jan 21, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions .storybook/preview.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -86,6 +86,8 @@ export const parameters: Preview['parameters'] = {
...createComponentVersion('1.0'),
...createThemeVersion('1.0'),
...createThemeVersion('2.0'),
...createThemeVersion('2.0.1'),
...createThemeVersion('2.1'),
implementationExample: {
styles: {
backgroundColor: '#ffffff',
Expand Down
60 changes: 24 additions & 36 deletions src/components/TabGroup/TabGroup.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
/**
* TODO: Icon inherits color from the surrounding text, but should use the matching -icon- tokens from below
*/

/**
* List of of links where each link toggles open associated information
*/
Expand All @@ -29,11 +29,9 @@
* The color "white" is arbitrary and any non transparent color can be used here.
*/
.tabs--scrollable-left {
-webkit-mask-image: -webkit-linear-gradient(
left,
transparent,
white 4rem
);
-webkit-mask-image: -webkit-linear-gradient(left,
transparent,
white 4rem);
}

.tabs--scrollable-left .tabs__list--align-center,
Expand All @@ -42,21 +40,17 @@
}

.tabs--scrollable-right {
-webkit-mask-image: -webkit-linear-gradient(
right,
transparent,
white 4rem
);
-webkit-mask-image: -webkit-linear-gradient(right,
transparent,
white 4rem);
}

.tabs--scrollable-left.tabs--scrollable-right {
-webkit-mask-image: -webkit-linear-gradient(
left,
transparent,
white 4rem,
white calc(100% - 4rem),
transparent 100%
);
-webkit-mask-image: -webkit-linear-gradient(left,
transparent,
white 4rem,
white calc(100% - 4rem),
transparent 100%);
}

/**
Expand Down Expand Up @@ -106,8 +100,6 @@
flex-shrink: 0;
position: relative;
overflow: hidden;
border-top-left-radius: calc(var(--eds-theme-border-radius-objects-sm) * 1px);
border-top-right-radius: calc(var(--eds-theme-border-radius-objects-sm) * 1px);

&.eds-is-active {
font-weight: 500;
Expand Down Expand Up @@ -170,13 +162,15 @@
.tab__highlight {
border-radius: calc(var(--eds-border-radius-full) * 1px);
transition: bottom calc(var(--eds-anim-fade-quick) * 1s) var(--eds-anim-ease),
width calc(var(--eds-anim-fade-quick) * 1s) var(--eds-anim-ease);
width calc(var(--eds-anim-fade-quick) * 1s) var(--eds-anim-ease), background-color calc(var(--eds-anim-fade-quick) * 1s) var(--eds-anim-ease);

.tabs__item.eds-is-active & {
.tabs__item & {
position: absolute;
bottom: 0;
height: 0.25rem;
width: 100%;

background-color: transparent;
}

.tabs__item .tabs__link:focus-visible & {
Expand All @@ -203,14 +197,11 @@
&:focus-visible {
box-shadow: inset 0 0 0 0.125rem var(--eds-theme-color-border-utility-focus);
}
}

&:hover {
background-color: var(--eds-theme-color-background-utility-interactive-no-emphasis-hover);
}

&:active {
background-color: var(--eds-theme-color-background-utility-interactive-no-emphasis-active);
}
/* add in handling of showing highlight on hover */
.tabs__item:hover .tab__highlight {
background-color: var(--eds-theme-color-text-utility-interactive-primary);
}

.tabs__item.eds-is-active .tab__highlight {
Expand All @@ -227,14 +218,11 @@
&:focus-visible {
box-shadow: inset 0 0 0 0.125rem var(--eds-theme-color-border-utility-inverse);
}
}

&:hover {
background-color: var(--eds-theme-color-background-utility-inverse-no-emphasis-hover);
}

&:active {
background-color: var(--eds-theme-color-background-utility-inverse-no-emphasis-active);
}
/* add in handling of showing highlight on hover */
.tabs__item:hover .tab__highlight {
background-color: var(--eds-theme-color-background-utility-inverse-high-emphasis);
}

.tabs__item.eds-is-active .tab__highlight {
Expand Down
2 changes: 1 addition & 1 deletion src/components/TabGroup/TabGroup.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ export default {
component: TabGroup,
parameters: {
layout: 'centered',
badges: ['api-2.0', 'theme-2.0'],
badges: ['api-2.0', 'theme-2.0.1'],
},
args: {
children: (
Expand Down
Loading