Skip to content

Commit 1254ffc

Browse files
deleoniodeleonio
authored
Replace Toggle Button in nav with KolButtonWc (#7584)
2 parents 5871663 + 7325c9e commit 1254ffc

File tree

7 files changed

+118
-5
lines changed

7 files changed

+118
-5
lines changed

‎packages/components/src/components/nav/shadow.tsx‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ import { Component, h, Host, Prop, State, Watch } from '@stencil/core';
2828
import { translate } from '../../i18n';
2929
import { addNavLabel, removeNavLabel } from '../../utils/unique-nav-labels';
3030
import { watchNavLinks } from './validation';
31-
import { KolButtonTag, KolButtonWcTag, KolLinkWcTag } from '../../core/component-names';
31+
import { KolButtonWcTag, KolLinkWcTag } from '../../core/component-names';
3232
import type { StencilUnknown } from '../../schema';
3333

3434
const linkValidator = (link: ButtonOrLinkOrTextWithChildrenProps): boolean => {
@@ -230,7 +230,8 @@ export class KolNav implements NavAPI {
230230
</nav>
231231
{hasCompactButton && (
232232
<div class="compact">
233-
<KolButtonTag
233+
<KolButtonWcTag
234+
class="toggle-button"
234235
_ariaControls="nav"
235236
_ariaExpanded={!hideLabel}
236237
_icons={hideLabel ? 'codicon codicon-chevron-right' : 'codicon codicon-chevron-left'}
@@ -246,7 +247,7 @@ export class KolNav implements NavAPI {
246247
}}
247248
_tooltipAlign="right"
248249
_variant="ghost"
249-
></KolButtonTag>
250+
></KolButtonWcTag>
250251
</div>
251252
)}
252253
</div>

‎packages/components/src/components/nav/test/__snapshots__/snapshot.spec.tsx.snap‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -64,7 +64,7 @@ exports[`kol-nav should render with _label="Nav Label" _links=[{"_label":"Homepa
6464
</ul>
6565
</nav>
6666
<div class="compact">
67-
<kol-button _ariacontrols="nav" _ariaexpanded="" _hidelabel="" _icons="codicon codicon-chevron-left" _label="kol-nav-minimize" _tooltipalign="right" _variant="ghost"></kol-button>
67+
<kol-button-wc _ariacontrols="nav" _ariaexpanded="" _hidelabel="" _icons="codicon codicon-chevron-left" _label="kol-nav-minimize" _tooltipalign="right" _variant="ghost" class="toggle-button"></kol-button-wc>
6868
</div>
6969
</div>
7070
</template>

‎packages/themes/bwst/src/components/nav.scss‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -83,4 +83,36 @@
8383
justify-content: center;
8484
}
8585
}
86+
87+
.toggle-button :is(a, button) > .kol-span-wc,
88+
.toggle-button :is(a, button):disabled:hover > .kol-span-wc {
89+
border-color: var(--color-light);
90+
background-color: var(--color-light);
91+
box-shadow: none;
92+
color: var(--color-primary);
93+
font-weight: 400;
94+
border-radius: var(--border-radius);
95+
border-style: solid;
96+
border-width: var(--border-width);
97+
min-height: var(--a11y-min-size);
98+
min-width: var(--a11y-min-size);
99+
padding: rem(8) rem(14);
100+
text-align: center;
101+
transition-duration: 0.2s;
102+
transition-property: background-color, color, border-color;
103+
}
104+
105+
.toggle-button :is(a, button):active > .kol-span-wc,
106+
.toggle-button :is(a, button):hover > .kol-span-wc {
107+
background-color: var(--color-primary-variant);
108+
border-color: var(--color-primary-variant);
109+
box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);
110+
color: var(--color-light);
111+
}
112+
113+
.toggle-button :is(a, button):active > .kol-span-wc {
114+
border-color: var(--color-light);
115+
box-shadow: none;
116+
outline: none;
117+
}
86118
}

‎packages/themes/default/src/components/nav.scss‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
@use '../mixins/rem' as *;
22
@use '../mixins/focus-outline' as *;
3+
@use '../mixins/button' as *;
34

45
@layer kol-theme-component {
56
:host {
@@ -83,4 +84,25 @@
8384
justify-content: center;
8485
}
8586
}
87+
88+
.toggle-button :is(a, button) > .kol-span-wc,
89+
.toggle-button :is(a, button):disabled:hover > .kol-span-wc {
90+
color: var(--color-primary);
91+
font-weight: 700;
92+
min-height: var(--a11y-min-size);
93+
min-width: var(--a11y-min-size);
94+
border-color: var(--color-light);
95+
background-color: var(--color-light);
96+
border-radius: var(--border-radius);
97+
border-style: solid;
98+
box-shadow: none;
99+
}
100+
101+
.toggle-button :is(a, button):active > .kol-span-wc,
102+
.toggle-button :is(a, button):hover > .kol-span-wc {
103+
background-color: var(--color-primary-variant);
104+
border-color: var(--color-primary-variant);
105+
box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);
106+
color: var(--color-light);
107+
}
86108
}

‎packages/themes/ecl/src/ecl-ec/components/nav.scss‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -82,4 +82,25 @@
8282
.expanded > div > .expand-button kol-icon::part(icon)::before {
8383
content: '\eab4';
8484
}
85+
86+
button.toggle-button :focus .kol-span-wc {
87+
outline-offset: -2px;
88+
}
89+
90+
.toggle-button a .kol-span-wc,
91+
.toggle-button button .kol-span-wc {
92+
background-color: transparent;
93+
border-color: transparent;
94+
color: var(--color-blue);
95+
}
96+
97+
.toggle-button a:focus .kol-span-wc,
98+
.toggle-button button:focus .kol-span-wc {
99+
outline-color: var(--color-blue);
100+
}
101+
102+
.toggle-button a:hover .kol-span-wc,
103+
.toggle-button button:hover .kol-span-wc {
104+
color: var(--color-blue-130);
105+
}
85106
}

‎packages/themes/ecl/src/ecl-eu/components/nav.scss‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -82,4 +82,19 @@
8282
.expanded > div > .expand-button kol-icon::part(icon)::before {
8383
content: '\eab4';
8484
}
85+
86+
.toggle-button a > .kol-span-wc,
87+
.toggle-button button > .kol-span-wc {
88+
color: #0e47cb;
89+
}
90+
91+
.toggle-button a:focus-visible > .kol-span-wc,
92+
.toggle-button button:focus-visible > .kol-span-wc {
93+
outline-color: #0e47cb;
94+
}
95+
96+
.toggle-button a:hover > .kol-span-wc,
97+
.toggle-button button:hover > .kol-span-wc {
98+
color: #0e47cb;
99+
}
85100
}

‎packages/themes/itzbund/src/components/nav.scss‎

Lines changed: 23 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -82,7 +82,6 @@
8282
/* compact button */
8383
:host > div > div:last-child {
8484
margin-top: 0.5em;
85-
width: 100%;
8685
text-align: center;
8786
}
8887

@@ -104,4 +103,27 @@
104103
.kol-span-wc {
105104
justify-items: baseline;
106105
}
106+
107+
.toggle-button :is(a, button) > .kol-span-wc,
108+
.toggle-button :is(a, button):disabled:hover > .kol-span-wc {
109+
background-color: var(--color-ghost);
110+
color: var(--color-anthrazit);
111+
display: grid;
112+
place-items: center;
113+
border-radius: 32px;
114+
border-style: solid;
115+
min-width: var(--a11y-min-size);
116+
min-height: var(--a11y-min-size);
117+
border-width: var(--spacing);
118+
font-size: inherit;
119+
padding: 0 rem(8);
120+
border-color: transparent;
121+
}
122+
123+
.toggle-button :is(a, button):hover > .kol-span-wc,
124+
.toggle-button :is(a, button):focus > .kol-span-wc {
125+
background-color: var(--color-ghost);
126+
border-color: var(--color-ghost);
127+
color: var(--color-anthrazit);
128+
}
107129
}

0 commit comments

Comments
 (0)
⚡