Skip to content

Commit

Permalink
Apply BEM refactoring to progress
Browse files Browse the repository at this point in the history 
Refs: #7036
  • Loading branch information
@anicyne
anicyne committed Nov 28, 2024
1 parent f74480e commit 54138ca
Show file tree
Hide file tree
Showing 7 changed files with 147 additions and 128 deletions.
35 changes: 20 additions & 15 deletions packages/components/src/components/progress/shadow.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import type { KoliBriProgressVariantType, LabelPropType, ProgressAPI, ProgressStates } from '../../schema';
import { KoliBriProgressVariantEnum, validateLabel, watchNumber, watchString, watchValidator } from '../../schema';
import { Component, h, Host, Prop, State, Watch } from '@stencil/core';
import { Component, h, Prop, State, Watch } from '@stencil/core';

import type { JSX } from '@stencil/core';
const VALID_VARIANTS = Object.keys(KoliBriProgressVariantEnum);
Expand All @@ -12,14 +12,14 @@ const CycleSvg = ({ state }: { state: ProgressStates }) => {
const valueY = state._label ? textPositionBottom : '50%';

return (
<svg class="cycle" width="100" viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">
<circle class="background" cx="60" cy="60" r="54.5" fill="currentColor" stroke="currentColor" stroke-width="8"></circle>
<circle class="whitespace" cx="60" cy="60" r="59" fill="currentColor" stroke="currentColor" stroke-width="3"></circle>
<circle class="border" cx="60" cy="60" r="59" fill="currentColor" stroke="currentColor" stroke-width="1"></circle>
<circle class="whitespace" cx="60" cy="60" r="51" fill="currentColor" stroke="currentColor" stroke-width="1"></circle>
<circle class="border" cx="60" cy="60" r="50" fill="currentColor" stroke="currentColor" stroke-width="1"></circle>
<svg class="kol-progress__cycle" width="100" viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">
<circle class="kol-progress__cycle--background" cx="60" cy="60" r="54.5" fill="currentColor" stroke="currentColor" stroke-width="8"></circle>
<circle class="kol-progress__cycle--whitespace" cx="60" cy="60" r="59" fill="currentColor" stroke="currentColor" stroke-width="3"></circle>
<circle class="kol-progress__cycle--border" cx="60" cy="60" r="59" fill="currentColor" stroke="currentColor" stroke-width="1"></circle>
<circle class="kol-progress__cycle--whitespace" cx="60" cy="60" r="51" fill="currentColor" stroke="currentColor" stroke-width="1"></circle>
<circle class="kol-progress__cycle--border" cx="60" cy="60" r="50" fill="currentColor" stroke="currentColor" stroke-width="1"></circle>
<circle
class="progress"
class="kol-progress__cycle--progress"
fill="currentColor"
stroke="currentColor"
stroke-linecap="round"
Expand Down Expand Up @@ -47,11 +47,11 @@ const BarSvg = ({ state }: { state: ProgressStates }) => {
const percentage = 100 * (state._value / state._max);

return (
<div class="bar">
<div class="kol-progress__bar">
{state._label && <div>{state._label}</div>}
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="12" overflow="visible">
<rect
class="background"
class="kol-progress__bar--background"
x="1"
y="1"
height="10"
Expand All @@ -62,7 +62,7 @@ const BarSvg = ({ state }: { state: ProgressStates }) => {
style={{ width: `calc(100% - 2px - ${textLabelPadding})` }}
></rect>
<rect
class="border"
class="kol-progress__bar--border"
x="1"
y="1"
height="10"
Expand All @@ -73,7 +73,7 @@ const BarSvg = ({ state }: { state: ProgressStates }) => {
style={{ width: `calc(100% - 2px - ${textLabelPadding})` }}
></rect>
<rect
class="progress"
class="kol-progress__bar--progress"
x="2.5"
y="2.5"
height="7"
Expand Down Expand Up @@ -116,15 +116,20 @@ export class KolProcess implements ProgressAPI {
// https://dequeuniversity.com/library/aria/progress-bar-bounded
public render(): JSX.Element {
return (
<Host class="kol-progress">
<div class="kol-progress">
{createProgressSVG(this.state)}

{/* https://css-tricks.com/html5-progress-element/ */}
<progress aria-busy={this.state._value < this.state._max ? 'true' : 'false'} max={this.state._max} value={this.state._value}></progress>
<progress
class="kol-progress__progress"
aria-busy={this.state._value < this.state._max ? 'true' : 'false'}
max={this.state._max}
value={this.state._value}
></progress>
<span aria-live="polite" aria-relevant="removals text" class="visually-hidden">
{this.state._liveValue} von {this.state._max} {this.state._unit}
</span>
</Host>
</div>
);
}

Expand Down
92 changes: 48 additions & 44 deletions packages/components/src/components/progress/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,65 +2,69 @@
@import '../style';

@layer kol-component {
:host {
.kol-progress {
font-size: rem(16);
}

progress {
display: block;
height: 0;
overflow: hidden;
width: 0;
}
&__progress {
display: block;
height: 0;
overflow: hidden;
width: 0;
}

.bar {
width: rem(150);
&__bar {
width: rem(150);

.border {
fill: transparent;
stroke: black;
}
&--border {
fill: transparent;
stroke: black;
}

.background {
fill: lightgray;
stroke: white;
}
&--background {
fill: lightgray;
stroke: white;
}

.progress {
fill: #0075ff;
stroke: transparent;
transition: 250ms ease-in-out 50ms;
&--progress {
fill: #0075ff;
stroke: transparent;
transition: 250ms ease-in-out 50ms;
}
}
}

.cycle .background {
fill: transparent;
stroke: lightgray;
}
&__cycle {
&--background {
fill: transparent;
stroke: lightgray;
}

.cycle .border {
fill: transparent;
stroke: black;
}
&--border {
fill: transparent;
stroke: black;
}

.cycle .whitespace {
fill: transparent;
stroke: white;
}
&--whitespace {
fill: transparent;
stroke: white;
}

.cycle .progress {
fill: transparent;
stroke: #0075ff;
transform-origin: 50% 50%;
transform: rotate(-90deg);
transition: 250ms ease-in-out 50ms;
&--progress {
fill: transparent;
stroke: #0075ff;
transform-origin: 50% 50%;
transform: rotate(-90deg);
transition: 250ms ease-in-out 50ms;
}
}
}

/* https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion */
@media (prefers-reduced-motion) {
.progress {
transition-duration: 0s;
transition-delay: 0s;
.kol-progress {
&__progress {
transition-duration: 0s;
transition-delay: 0s;
}
}
}
}
64 changes: 36 additions & 28 deletions packages/components/src/components/progress/test/snapshot.spec.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,25 +18,27 @@ describe('test Progress', () => {
it('render empty Progress', async () => {
const page = await newSpecPage({
components: [KolProcess],
html: `<kol-progress class="kol-progress"></kol-progress>`,
html: `<kol-progress ></kol-progress>`,
});
expect(page.root).toEqualHtml(
`<kol-progress class="kol-progress">
`<kol-progress >
<mock:shadow-root>
<div class="bar">
<div class="kol-progress">
<div class="kol-progress__bar">
<svg height="12" overflow="visible" width="100%" xmlns="http://www.w3.org/2000/svg">
<rect class="background" fill="currentColor" height="10" rx="5" stroke="currentColor" stroke-width="3" x="1" y="1" style="width: calc(100% - 2px - var(--kolibri-text-label-padding, 45px));"></rect>
<rect class="border" fill="currentColor" height="10" rx="5" stroke="currentColor" stroke-width="1" x="1" y="1" style="width: calc(100% - 2px - var(--kolibri-text-label-padding, 45px));"></rect>
<rect class="progress" fill="currentColor" height="7" rx="3.5" stroke="currentColor" stroke-width="3" x="2.5" y="2.5" style="width: calc(0% - 5px - (var(--kolibri-text-label-padding, 45px) / 100 * 0));"></rect>
<rect class="kol-progress__bar--background" fill="currentColor" height="10" rx="5" stroke="currentColor" stroke-width="3" x="1" y="1" style="width: calc(100% - 2px - var(--kolibri-text-label-padding, 45px));"></rect>
<rect class="kol-progress__bar--border" fill="currentColor" height="10" rx="5" stroke="currentColor" stroke-width="1" x="1" y="1" style="width: calc(100% - 2px - var(--kolibri-text-label-padding, 45px));"></rect>
<rect class="kol-progress__bar--progress" fill="currentColor" height="7" rx="3.5" stroke="currentColor" stroke-width="3" x="2.5" y="2.5" style="width: calc(0% - 5px - (var(--kolibri-text-label-padding, 45px) / 100 * 0));"></rect>
<text aria-hidden="true" dominant-baseline="middle" fill="currentColor" text-anchor="end" x="100%" y="50%">
0%
</text>
</svg>
</div>
<progress aria-busy="true" max="100" value="0"></progress>
<progress class="kol-progress__progress" aria-busy="true" max="100" value="0"></progress>
<span ${DEFAULT_HTML_SPAN_PROPS} class="visually-hidden">
0 von 100 %
</span>
</div>
</mock:shadow-root>
</kol-progress>`,
);
Expand All @@ -49,22 +51,24 @@ describe('test Progress', () => {
template: () => <kol-progress {...DEFAULT_PROPS}></kol-progress>,
});
expect(page.root).toEqualHtml(
`<kol-progress class="kol-progress">
`<kol-progress >
<mock:shadow-root>
<div class="bar">
<div class="kol-progress">
<div class="kol-progress__bar">
<svg height="12" overflow="visible" width="100%" xmlns="http://www.w3.org/2000/svg">
<rect class="background" fill="currentColor" height="10" rx="5" stroke="currentColor" stroke-width="3" x="1" y="1" style="width: calc(100% - 2px - var(--kolibri-text-label-padding, 45px));"></rect>
<rect class="border" fill="currentColor" height="10" rx="5" stroke="currentColor" stroke-width="1" x="1" y="1" style="width: calc(100% - 2px - var(--kolibri-text-label-padding, 45px));"></rect>
<rect class="progress" fill="currentColor" height="7" rx="3.5" stroke="currentColor" stroke-width="3" x="2.5" y="2.5" style="width: calc(40.476190476190474% - 5px - (var(--kolibri-text-label-padding, 45px) / 100 * 40.476190476190474));"></rect>
<rect class="kol-progress__bar--background" fill="currentColor" height="10" rx="5" stroke="currentColor" stroke-width="3" x="1" y="1" style="width: calc(100% - 2px - var(--kolibri-text-label-padding, 45px));"></rect>
<rect class="kol-progress__bar--border" fill="currentColor" height="10" rx="5" stroke="currentColor" stroke-width="1" x="1" y="1" style="width: calc(100% - 2px - var(--kolibri-text-label-padding, 45px));"></rect>
<rect class="kol-progress__bar--progress" fill="currentColor" height="7" rx="3.5" stroke="currentColor" stroke-width="3" x="2.5" y="2.5" style="width: calc(40.476190476190474% - 5px - (var(--kolibri-text-label-padding, 45px) / 100 * 40.476190476190474));"></rect>
<text aria-hidden="true" dominant-baseline="middle" fill="currentColor" text-anchor="end" x="100%" y="50%">
${DEFAULT_PROPS._value}%
</text>
</svg>
</div>
<progress aria-busy="true" max="${DEFAULT_PROPS._max}" value="${DEFAULT_PROPS._value}"></progress>
<progress class="kol-progress__progress" aria-busy="true" max="${DEFAULT_PROPS._max}" value="${DEFAULT_PROPS._value}"></progress>
<span ${DEFAULT_HTML_SPAN_PROPS} class="visually-hidden">
0 von ${DEFAULT_PROPS._max} %
</span>
</div>
</mock:shadow-root>
</kol-progress>`,
);
Expand All @@ -76,23 +80,25 @@ describe('test Progress', () => {
template: () => <kol-progress _max={DEFAULT_PROPS._max} _value={DEFAULT_PROPS._max}></kol-progress>,
});
expect(page.root).toEqualHtml(
` <kol-progress class="kol-progress">
` <kol-progress >
<mock:shadow-root>
<div class="bar">
<div class="kol-progress">
<div class="kol-progress__bar">
<svg height="12" overflow="visible" width="100%" xmlns="http://www.w3.org/2000/svg">
<rect class="background" fill="currentColor" height="10" rx="5" stroke="currentColor" stroke-width="3" x="1" y="1" style="width: calc(100% - 2px - var(--kolibri-text-label-padding, 45px));"></rect>
<rect class="border" fill="currentColor" height="10" rx="5" stroke="currentColor" stroke-width="1" x="1" y="1" style="width: calc(100% - 2px - var(--kolibri-text-label-padding, 45px));"></rect>
<rect class="progress" fill="currentColor" height="7" rx="3.5" stroke="currentColor" stroke-width="3" x="2.5" y="2.5" style="width: calc(100% - 5px - (var(--kolibri-text-label-padding, 45px) / 100 * 100));"></rect>
<rect class="kol-progress__bar--background" fill="currentColor" height="10" rx="5" stroke="currentColor" stroke-width="3" x="1" y="1" style="width: calc(100% - 2px - var(--kolibri-text-label-padding, 45px));"></rect>
<rect class="kol-progress__bar--border" fill="currentColor" height="10" rx="5" stroke="currentColor" stroke-width="1" x="1" y="1" style="width: calc(100% - 2px - var(--kolibri-text-label-padding, 45px));"></rect>
<rect class="kol-progress__bar--progress" fill="currentColor" height="7" rx="3.5" stroke="currentColor" stroke-width="3" x="2.5" y="2.5" style="width: calc(100% - 5px - (var(--kolibri-text-label-padding, 45px) / 100 * 100));"></rect>
<text aria-hidden="true" dominant-baseline="middle" fill="currentColor" text-anchor="end" x="100%" y="50%">
42%
</text>
</svg>
</div>
<progress aria-busy="false" max="${DEFAULT_PROPS._max}" value="${DEFAULT_PROPS._max}"></progress>
<progress class="kol-progress__progress" aria-busy="false" max="${DEFAULT_PROPS._max}" value="${DEFAULT_PROPS._max}"></progress>
<span ${DEFAULT_HTML_SPAN_PROPS} class="visually-hidden">
0 von ${DEFAULT_PROPS._max} %
</span>
</mock:shadow-root>
</div>
</kol-progress>`,
);
});
Expand All @@ -103,21 +109,23 @@ describe('test Progress', () => {
template: () => <kol-progress {...DEFAULT_PROPS} _variant={'cycle'}></kol-progress>,
});
expect(page.root).toEqualHtml(
`<kol-progress class="kol-progress">
`<kol-progress>
<mock:shadow-root>
<svg class="cycle" viewBox="0 0 120 120" width="100" xmlns="http://www.w3.org/2000/svg">
<circle class="background" cx="60" cy="60" r="54.5" fill="currentColor" stroke="currentColor" stroke-width="8"></circle>
<circle class="whitespace" cx="60" cy="60" r="59" fill="currentColor" stroke="currentColor" stroke-width="3"></circle>
<circle class="border" cx="60" cy="60" r="59" fill="currentColor" stroke="currentColor" stroke-width="1"></circle>
<circle class="whitespace" cx="60" cy="60" r="51" fill="currentColor" stroke="currentColor" stroke-width="1"></circle>
<circle class="border" cx="60" cy="60" fill="currentColor" r="50" stroke="currentColor" stroke-width="1"></circle>
<circle class="progress" cx="60" cy="60" fill="currentColor" r="54.5" stroke="currentColor" stroke-dasharray="138px 342px" stroke-linecap="round" stroke-width="6"></circle>
<div class="kol-progress">
<svg class="kol-progress__cycle" viewBox="0 0 120 120" width="100" xmlns="http://www.w3.org/2000/svg">
<circle class="kol-progress__cycle--background" cx="60" cy="60" r="54.5" fill="currentColor" stroke="currentColor" stroke-width="8"></circle>
<circle class="kol-progress__cycle--whitespace" cx="60" cy="60" r="59" fill="currentColor" stroke="currentColor" stroke-width="3"></circle>
<circle class="kol-progress__cycle--border" cx="60" cy="60" r="59" fill="currentColor" stroke="currentColor" stroke-width="1"></circle>
<circle class="kol-progress__cycle--whitespace" cx="60" cy="60" r="51" fill="currentColor" stroke="currentColor" stroke-width="1"></circle>
<circle class="kol-progress__cycle--border" cx="60" cy="60" fill="currentColor" r="50" stroke="currentColor" stroke-width="1"></circle>
<circle class="kol-progress__cycle--progress" cx="60" cy="60" fill="currentColor" r="54.5" stroke="currentColor" stroke-dasharray="138px 342px" stroke-linecap="round" stroke-width="6"></circle>
<text aria-hidden="true" fill="currentColor" text-anchor="middle" x="50%" y="50%">
17%
</text>
</svg>
<progress ${DEFAULT_HTML_PROGRESS_PROPS}></progress>
<progress class="kol-progress__progress" ${DEFAULT_HTML_PROGRESS_PROPS}></progress>
<span ${DEFAULT_HTML_SPAN_PROPS} class="visually-hidden">0 von ${DEFAULT_PROPS._max} %</span>
</div>
</mock:shadow-root>
</kol-progress>`,
);
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/components/textarea/controller.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,7 @@ export class TextareaController extends InputIconController implements TextareaW
new Set(`String {${cssResizeOptions.join(', ')}`),
value,
{
defaultValue: 'vertical'
defaultValue: 'vertical',
},
);
}
Expand Down
34 changes: 18 additions & 16 deletions packages/themes/default/src/components/progress.scss
View file
Original file line number Diff line number Diff line change
@@ -1,31 +1,33 @@
@import '../mixins/rem';

@layer kol-theme-component {
:host {
.kol-progress {
font-family: var(--font-family);
}

:host progress,
:host span {
display: block;
height: 0;
overflow: hidden;
width: 0;
&__progress,
span {
display: block;
height: 0;
overflow: hidden;
width: 0;
}

&__cycle {
&--progress {
stroke: var(--color-primary-variant);
}
}
}

:host svg line:first-child,
:host svg circle:first-child {
svg line:first-child,
svg circle:first-child {
fill: transparent;
stroke: var(--color-mute-variant);
}

:host svg line:last-child,
:host svg circle:last-child {
svg line:last-child,
svg circle:last-child {
fill: transparent;
stroke: var(--color-primary);
}

.cycle .progress {
stroke: var(--color-primary-variant);
}
}
Loading

0 comments on commit 54138ca

Please sign in to comment.