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

Apply BEM refactoring for details #7175

Merged
merged 5 commits into from
Dec 10, 2024
Merged

Apply BEM refactoring for details #7175

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
d2f8ada
bem refactoring details
AlexanderSchmidtCE Dec 10, 2024
c38f0dc
moved font-family to block
AlexanderSchmidtCE Dec 10, 2024
367b0b8
changed open to modifier
AlexanderSchmidtCE Dec 10, 2024
f51b664
test update
AlexanderSchmidtCE Dec 10, 2024
63bf5b8
review fixes
AlexanderSchmidtCE Dec 10, 2024
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
6 changes: 3 additions & 3 deletions packages/components/src/components/accordion/test/__snapshots__/snapshot.spec.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ exports[`kol-accordion should render with _label="Überschrift" _level=1 _open=f
exports[`kol-accordion should render with _label="Überschrift" _level=1 _open=false _disabled=true 1`] = `
<kol-accordion>
<template shadowrootmode="open">
<div class="collapsible disabled kol-accordion" id="nonce">
<div class="collapsible collapsible--disabled kol-accordion" id="nonce">
<h1 class="collapsible__heading kol-accordion__heading kol-headline kol-headline--h1 kol-headline--single">
<kol-button-wc _ariacontrols="nonce-control" _disabled="" _icons="codicon codicon-add" _label="Überschrift" class="collapsible__heading-button kol-accordion__heading-button" slot="expert"></kol-button-wc>
</h1>
Expand All @@ -41,7 +41,7 @@ exports[`kol-accordion should render with _label="Überschrift" _level=1 _open=f
exports[`kol-accordion should render with _label="Überschrift" _level=1 _open=true _disabled=false 1`] = `
<kol-accordion _open="">
<template shadowrootmode="open">
<div class="collapsible kol-accordion open" id="nonce">
<div class="collapsible collapsible--open kol-accordion" id="nonce">
<h1 class="collapsible__heading kol-accordion__heading kol-headline kol-headline--h1 kol-headline--single">
<kol-button-wc _ariacontrols="nonce-control" _ariaexpanded="" _icons="codicon codicon-remove" _label="Überschrift" class="collapsible__heading-button kol-accordion__heading-button" slot="expert"></kol-button-wc>
</h1>
Expand All @@ -60,7 +60,7 @@ exports[`kol-accordion should render with _label="Überschrift" _level=1 _open=t
exports[`kol-accordion should render with _label="Überschrift" _level=1 _open=true _disabled=true 1`] = `
<kol-accordion _open="">
<template shadowrootmode="open">
<div class="collapsible disabled kol-accordion open" id="nonce">
<div class="collapsible collapsible--disabled collapsible--open kol-accordion" id="nonce">
<h1 class="collapsible__heading kol-accordion__heading kol-headline kol-headline--h1 kol-headline--single">
<kol-button-wc _ariacontrols="nonce-control" _ariaexpanded="" _disabled="" _icons="codicon codicon-remove" _label="Überschrift" class="collapsible__heading-button kol-accordion__heading-button" slot="expert"></kol-button-wc>
</h1>
Expand Down
12 changes: 5 additions & 7 deletions packages/components/src/components/details/shadow.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Component, Element, h, Host, Method, Prop, State, Watch, type JSX } from '@stencil/core';
import { Component, Element, h, Method, Prop, State, Watch, type JSX } from '@stencil/core';
import type { DetailsCallbacksPropType, DetailsAPI, DetailsStates, DisabledPropType, FocusableElement, HeadingLevel, LabelPropType } from '../../schema';
import { validateDetailsCallbacks, validateDisabled, validateLabel, validateOpen } from '../../schema';
import KolCollapsibleFc, { type CollapsibleProps } from '../../functional-components/Collapsible';
Expand Down Expand Up @@ -65,7 +65,7 @@ export class KolDetails implements DetailsAPI, FocusableElement {
const { _open, _label, _disabled } = this.state;
const _level = 1;

const rootClass = 'details';
const rootClass = 'kol-details';

const props: CollapsibleProps = {
id: this.nonce,
Expand All @@ -89,11 +89,9 @@ export class KolDetails implements DetailsAPI, FocusableElement {
};

return (
<Host class="kol-details">
<KolCollapsibleFc {...props}>
<slot />
</KolCollapsibleFc>
</Host>
<KolCollapsibleFc {...props}>
<slot />
</KolCollapsibleFc>
);
}

Expand Down
8 changes: 3 additions & 5 deletions packages/components/src/components/details/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,15 +4,13 @@
@import '../../functional-components/Collapsible/collapsible';

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

.details {
&__heading-button {
display: flex;

button {
.kol-button {
min-height: auto;

.kol-span {
Expand All @@ -24,7 +22,7 @@
}
}

.open &__heading-button {
.collapsible--open &__heading-button {
.kol-icon::part(icon) {
transform: rotate(90deg);
}
Expand Down
168 changes: 84 additions & 84 deletions packages/components/src/components/details/test/__snapshots__/snapshot.spec.tsx.snap
View file
Open in desktop

Large diffs are not rendered by default.

4 changes: 2 additions & 2 deletions packages/components/src/functional-components/Collapsible/Collapsible.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,8 +47,8 @@ const KolCollapsibleFc: FC<CollapsibleProps> = (props, children) => {
class={clsx(
'collapsible',
{
disabled: disabled === true,
open: open === true,
'collapsible--disabled': disabled === true,
'collapsible--open': open === true,
},
classNames,
)}
Expand Down
6 changes: 3 additions & 3 deletions packages/components/src/functional-components/Collapsible/collapsible.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,11 +18,11 @@
visibility: hidden;
}

.open &__wrapper {
.collapsible--open &__wrapper {
grid-template-rows: 1fr;
}

.open &__wrapper-animation {
.collapsible--open &__wrapper-animation {
visibility: visible;
}

Expand All @@ -35,7 +35,7 @@

/* @see https://github.com/public-ui/kolibri/issues/5952 */
@media print {
:not(.open) &__wrapper-animation {
:not(.collapsible--open) &__wrapper-animation {
display: none;
}
}
Expand Down
4 changes: 2 additions & 2 deletions packages/themes/default/src/components/accordion.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@
@include focus-outline;
cursor: pointer;

button {
.kol-button {
outline: 0;
}
}
Expand All @@ -49,7 +49,7 @@
border-radius: var(--border-radius);
min-height: rem(35.2);

button {
.kol-button {
padding: rem(12) rem(8);

:focus {
Expand Down
9 changes: 3 additions & 6 deletions packages/themes/default/src/components/details.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,12 +3,9 @@
@import '../mixins/focus-outline';

@layer kol-theme-component {
:host {
font-size: rem(16);
.kol-details {
font-family: var(--font-family);
}

.details {
font-size: rem(16);
width: 100%;
height: 100%;
display: grid;
Expand Down Expand Up @@ -41,7 +38,7 @@
}
}

button:focus-within {
.kol-button:focus-within {
@include focus-outline;
cursor: pointer;
}
Expand Down
4 changes: 2 additions & 2 deletions packages/themes/ecl/src/ecl-ec/components/accordion.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,15 +13,15 @@
border-width: rem(1);

&__heading-button {
button {
.kol-button {
text-align: left;
width: 100%;
padding: 0 var(--spacing-m);
display: flex;
place-items: center;
line-height: 1.2;

span {
&__text {
color: var(--color-grey);
font-weight: var(--font-weight-bold);
padding: rem(12) 0;
Expand Down
11 changes: 5 additions & 6 deletions packages/themes/ecl/src/ecl-ec/components/details.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,19 +2,18 @@
@import '../mixins/indented-text';

@layer kol-theme-component {
:host {
.kol-details {
font-family: var(--font-family);
font-size: rem(16);
}

.details {
&__heading-button {
&:focus-within {
cursor: pointer;
}

button .kol-span__label {
border-bottom-color: #000;
.kol-button {
.kol-span__label {
border-bottom-color: #000;
}
}

.kol-icon {
Expand Down
10 changes: 5 additions & 5 deletions packages/themes/ecl/src/ecl-eu/components/accordion.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@
}

&__heading-button {
button {
.kol-button {
border-radius: rem(8);
outline-offset: rem(-1);
border: 0;
Expand All @@ -39,7 +39,7 @@
width: 100%;
line-height: 1.2;

.button-inner > span {
&__text {
align-items: baseline;
}

Expand Down Expand Up @@ -80,8 +80,8 @@
padding: rem(24);
}

.open &__heading-button {
button {
.collapsible--open &__heading-button {
.kol-button {
border-start-end-radius: rem(8);
border-start-start-radius: rem(8);
}
Expand All @@ -91,7 +91,7 @@
}
}

:not(.open) &__heading-button button .kol-icon::part(icon)::before {
:not(.collapsible--open) &__heading-button .kol-button .kol-icon::part(icon)::before {
content: '\f078';
}
}
Expand Down
11 changes: 5 additions & 6 deletions packages/themes/ecl/src/ecl-eu/components/details.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,19 +2,18 @@
@import '../mixins/indented-text';

@layer kol-theme-component {
:host {
.kol-details {
font-family: var(--font-family);
font-size: rem(16);
}

.details {
&__heading-button {
&:focus-within {
cursor: pointer;
}

button .kol-span__label {
border-bottom-color: #000;
.kol-button {
.kol-span__label {
border-bottom-color: #000;
}
}

.kol-icon {
Expand Down
8 changes: 4 additions & 4 deletions packages/themes/itzbund/src/components/accordion.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@
&__heading-button {
@include kol-typography-accordion;

& button {
.kol-button {
font-weight: inherit;
font-size: inherit;
line-height: inherit;
Expand Down Expand Up @@ -60,8 +60,8 @@
padding: rem(8);
}

.open &__heading-button {
button {
.collapsible--open &__heading-button {
.kol-button {
padding-bottom: 0;
}

Expand All @@ -70,7 +70,7 @@
}
}

.open &__content {
.collapsible--open &__content {
margin: 0;
}
}
Expand Down
11 changes: 5 additions & 6 deletions packages/themes/itzbund/src/components/details.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,21 +2,20 @@
@import '../mixins/indented-text';

@layer kol-theme-component {
:host {
.kol-details {
font-family: var(--font-family);
font-size: rem(16);
}

.details {
&__heading-button {
border-radius: var(--border-radius);

&:focus-within {
cursor: pointer;
}

button .kol-span__label {
border-bottom-color: #000;
.kol-button {
.kol-span__label {
border-bottom-color: #000;
}
}

.kol-icon {
Expand Down
Loading