Skip to content

Commit a5a804c

Browse files
anicyneanicyne
committed
UseKolButton and Adjust Shadow Root
Refs: #7467
1 parent 29aa966 commit a5a804c

File tree

10 files changed

+110
-30
lines changed

10 files changed

+110
-30
lines changed

‎packages/components/src/components/single-select/readme.md‎

Lines changed: 23 additions & 22 deletions
Large diffs are not rendered by default.

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

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { Component, Element, h, Host, Listen, Prop, State, Watch } from '@stenci
33

44
import type { LabelPropType, ToolbarAPI, ToolbarStates, ToolbarItemsPropType, ToolbarItemPropType } from '../../schema';
55
import { validateLabel, validateToolbarItems } from '../../schema';
6-
import { KolLinkTag, KolButtonTag } from '../../core/component-names';
6+
import { KolButtonWcTag, KolLinkButtonTag } from '../../core/component-names';
77

88
const TOOLBAR_ITEM_TAG_NAME = 'kol-toolbar-item';
99

@@ -24,23 +24,22 @@ export class KolToolbar implements ToolbarAPI {
2424

2525
@State() private currentIndex: number = 0;
2626

27-
private indexToElement = new Map<number, HTMLKolLinkElement | HTMLKolButtonElement>();
27+
private indexToElement = new Map<number, HTMLKolLinkButtonElement | HTMLKolButtonWcElement>();
2828

2929
private renderItem = (element: ToolbarItemPropType, index: number): JSX.Element => {
3030
const tabIndex = index === this.currentIndex && !element?._disabled ? 0 : -1;
3131
const props = {
3232
key: index,
33-
class: TOOLBAR_ITEM_TAG_NAME,
3433
_tabIndex: tabIndex,
3534
};
36-
const catchRef = (element?: HTMLKolLinkElement | HTMLKolButtonElement) => {
35+
const catchRef = (element?: HTMLKolLinkButtonElement | HTMLKolButtonWcElement) => {
3736
element && this.indexToElement.set(index, element);
3837
};
3938

4039
return '_href' in element ? (
41-
<KolLinkTag {...element} {...props} ref={catchRef}></KolLinkTag>
40+
<KolLinkButtonTag {...element} {...props} class={TOOLBAR_ITEM_TAG_NAME} ref={catchRef}></KolLinkButtonTag>
4241
) : (
43-
<KolButtonTag {...element} {...props} ref={catchRef}></KolButtonTag>
42+
<KolButtonWcTag {...element} {...props} class={{ button: true, normal: true, TOOLBAR_ITEM_TAG_NAME: true }} ref={catchRef}></KolButtonWcTag>
4443
);
4544
};
4645

‎packages/components/src/components/toolbar/style.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
@use '../@shared/mixins' as *;
22
@use '../style' as *;
3+
@use '../tooltip/style.scss' as *;
34

45
@layer kol-component {
56
:host {

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,8 @@ exports[`kol-toolbar should render with _label="Text" _items=[{"_label":"Button"
44
<kol-toolbar class="kol-toolbar">
55
<template shadowrootmode="open">
66
<div aria-label="Text" class="toolbar" role="toolbar">
7-
<kol-button _label="Button" _tabindex="0" class="kol-toolbar-item"></kol-button>
8-
<kol-link _href="#" _label="Link" _tabindex="-1" class="kol-toolbar-item"></kol-link>
7+
<kol-button-wc _label="Button" _tabindex="0" class="TOOLBAR_ITEM_TAG_NAME button normal"></kol-button-wc>
8+
<kol-link-button _href="#" _label="Link" _tabindex="-1" class="kol-toolbar-item"></kol-link-button>
99
</div>
1010
</template>
1111
</kol-toolbar>

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

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
@use '../rem' as *;
2+
@use '../mixins/button' as *;
3+
4+
@layer kol-theme-component {
5+
:is(a, button) > .kol-span-wc {
6+
font-weight: 400;
7+
border-radius: var(--border-radius);
8+
border-style: solid;
9+
border-width: var(--border-width);
10+
min-height: var(--a11y-min-size);
11+
min-width: var(--a11y-min-size);
12+
padding: rem(8) rem(14);
13+
text-align: center;
14+
transition-duration: 0.2s;
15+
transition-property: background-color, color, border-color;
16+
}
17+
18+
@include kol-button;
19+
}

‎packages/themes/bwst/src/index.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,7 @@ import textareaCss from './components/textarea.scss';
4646
import toastContainerCss from './components/toast-container.scss';
4747
import treeCss from './components/tree.scss';
4848
import treeItemCss from './components/tree-item.scss';
49+
import toolbarCss from './components/toolbar.scss';
4950

5051
export const BWSt = KoliBri.createTheme('bwst', {
5152
GLOBAL: globalCss,
@@ -93,6 +94,7 @@ export const BWSt = KoliBri.createTheme('bwst', {
9394
'KOL-TABS': tabsCss,
9495
'KOL-TEXTAREA': textareaCss,
9596
'KOL-TOAST-CONTAINER': toastContainerCss,
97+
'KOL-TOOLBAR': toolbarCss,
9698
'KOL-TREE': treeCss,
9799
'KOL-TREE-ITEM': treeItemCss,
98100
});

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

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
@use '../mixins/button' as *;
12
@use '../mixins/rem' as *;
23

34
@layer kol-theme-component {
@@ -8,4 +9,19 @@
89
border-width: var(--border-width);
910
border-style: solid;
1011
}
12+
13+
:is(a, button) > .kol-span-wc {
14+
font-weight: 700;
15+
border-radius: var(--border-radius);
16+
border-style: solid;
17+
border-width: var(--border-width);
18+
min-height: var(--a11y-min-size);
19+
min-width: var(--a11y-min-size);
20+
padding: rem(8) rem(14);
21+
text-align: center;
22+
transition-duration: 0.5s;
23+
transition-property: background-color, color, border-color;
24+
}
25+
26+
@include kol-button;
1127
}

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

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
@use '../../mixins/rem' as *;
2+
@use '../mixins/button' as *;
23

34
@layer kol-theme-component {
45
.toolbar {
@@ -8,4 +9,19 @@
89
border-width: 1px;
910
background-color: var(--color-grey-5);
1011
}
12+
13+
a .kol-span-wc,
14+
button .kol-span-wc {
15+
border-radius: 0;
16+
border-style: solid;
17+
border-width: 2px;
18+
font-weight: var(--font-weight-bold);
19+
margin: 0;
20+
min-height: rem(44);
21+
min-width: rem(44);
22+
padding: 0.25em 0.75em;
23+
line-height: 1.2;
24+
}
25+
26+
@include kol-button;
1127
}

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

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
@use '../../mixins/rem' as *;
2+
@use '../mixins/button' as *;
23

34
@layer kol-theme-component {
45
.toolbar {
@@ -11,4 +12,6 @@
1112
0 rem(-4) rem(4) rgb(9 49 142 / 4%);
1213
background-color: var(--color-white);
1314
}
15+
16+
@include kol-button;
1417
}

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

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
@use '../mixins/button' as *;
12
@use '../mixins/rem' as *;
23

34
@layer kol-theme-component {
@@ -9,4 +10,26 @@
910
border-color: var(--kolibri-border-color);
1011
background-color: var(--color-white);
1112
}
13+
14+
a,
15+
button {
16+
border-radius: 32px;
17+
font-family: var(--font-family-sans);
18+
/* text-transform: uppercase; */
19+
}
20+
21+
a > .kol-span-wc,
22+
button > .kol-span-wc {
23+
border-radius: 32px;
24+
border-style: solid;
25+
min-width: rem(44);
26+
min-height: rem(44);
27+
border-width: var(--spacing);
28+
font-size: inherit;
29+
/*line-height: 1.25em;*/
30+
/*padding: calc(4 * var(--spacing));*/
31+
padding: 0 rem(16);
32+
}
33+
34+
@include kol-button;
1235
}

0 commit comments

Comments
 (0)
⚡