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 to Span & Heading #7154

Merged
merged 19 commits into from
Dec 9, 2024
Merged

Apply BEM refactoring to Span & Heading #7154

Show file tree
Hide file tree
Changes from 17 commits
Commits
Show all changes
19 commits
Select commit Hold shift + click to select a range
87fe363
changes kol-span-ws to kol-span
AlexanderSchmidtCE Dec 5, 2024
3f083bd
fixed css class
AlexanderSchmidtCE Dec 5, 2024
20b85ff
dev merge
AlexanderSchmidtCE Dec 5, 2024
1aa9301
changed kol-span-wc to kol-span
AlexanderSchmidtCE Dec 5, 2024
ce613b3
fixed missing bem-class
AlexanderSchmidtCE Dec 6, 2024
ee0f127
Merge branch 'develop' into 7035-bem-refactor-span
AlexanderSchmidtCE Dec 6, 2024
eb55520
fixed missing bem-class
AlexanderSchmidtCE Dec 6, 2024
6f2a673
bem refactor heading
AlexanderSchmidtCE Dec 6, 2024
fd2aa4f
fixed missing class
AlexanderSchmidtCE Dec 6, 2024
ddce7bc
fixed missing class
AlexanderSchmidtCE Dec 6, 2024
3455488
fixed test snapshot
AlexanderSchmidtCE Dec 6, 2024
16f2be0
fixed test snapshot
AlexanderSchmidtCE Dec 6, 2024
2ef2720
test update
AlexanderSchmidtCE Dec 6, 2024
0007484
hide-label as modifier in span
AlexanderSchmidtCE Dec 6, 2024
d83978e
hide-label test update
AlexanderSchmidtCE Dec 6, 2024
4a62724
testfix
AlexanderSchmidtCE Dec 6, 2024
0b76490
Merge branch 'develop' into 7035-bem-refactor-span
AlexanderSchmidtCE Dec 6, 2024
08cba7b
pr review changes
AlexanderSchmidtCE Dec 9, 2024
a9ef529
fixed classname change
AlexanderSchmidtCE Dec 9, 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
2 changes: 1 addition & 1 deletion packages/components/src/components/@shared/_kol-link-mixin.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@
text-decoration-line: none;

&__text {
.span-label {
.kol-span__label {
text-decoration-line: underline;

@at-root #{$root}:is(:focus, :hover):not([aria-disabled], [disabled]) & {
Expand Down
88 changes: 55 additions & 33 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 @@ -4,9 +4,11 @@ exports[`kol-accordion should render with _label="Überschrift" _level=1 _open=f
<kol-accordion>
<template shadowrootmode="open">
<div class="collapsible kol-accordion" id="nonce">
<h1 class="collapsible__heading headline headline-h1 kol-accordion__heading kol-heading-wc">
<kol-button-wc _ariacontrols="nonce-control" _icons="codicon codicon-add" _label="Überschrift" class="collapsible__heading-button kol-accordion__heading-button" slot="expert"></kol-button-wc>
</h1>
<div class="kol-heading">
AlexanderSchmidtCE marked this conversation as resolved.
Show resolved Hide resolved
<h1 class="collapsible__heading kol-accordion__heading kol-heading--h1 kol-heading__headline">
<kol-button-wc _ariacontrols="nonce-control" _icons="codicon codicon-add" _label="Überschrift" class="collapsible__heading-button kol-accordion__heading-button" slot="expert"></kol-button-wc>
</h1>
</div>
<div class="collapsible__wrapper kol-accordion__wrapper">
<div class="collapsible__wrapper-animation kol-accordion__wrapper-animation">
<div aria-hidden="true" class="collapsible__content kol-accordion__content" id="nonce-control">
Expand All @@ -23,9 +25,11 @@ exports[`kol-accordion should render with _label="Überschrift" _level=1 _open=f
<kol-accordion>
<template shadowrootmode="open">
<div class="collapsible disabled kol-accordion" id="nonce">
<h1 class="collapsible__heading headline headline-h1 kol-accordion__heading kol-heading-wc">
<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>
<div class="kol-heading">
<h1 class="collapsible__heading kol-accordion__heading kol-heading--h1 kol-heading__headline">
AlexanderSchmidtCE marked this conversation as resolved.
Show resolved Hide resolved
<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>
</div>
<div class="collapsible__wrapper kol-accordion__wrapper">
<div class="collapsible__wrapper-animation kol-accordion__wrapper-animation">
<div aria-hidden="true" class="collapsible__content kol-accordion__content" id="nonce-control">
Expand All @@ -42,9 +46,11 @@ exports[`kol-accordion should render with _label="Überschrift" _level=1 _open=t
<kol-accordion _open="">
<template shadowrootmode="open">
<div class="collapsible kol-accordion open" id="nonce">
<h1 class="collapsible__heading headline headline-h1 kol-accordion__heading kol-heading-wc">
<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>
<div class="kol-heading">
<h1 class="collapsible__heading kol-accordion__heading kol-heading--h1 kol-heading__headline">
<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>
</div>
<div class="collapsible__wrapper kol-accordion__wrapper">
<div class="collapsible__wrapper-animation kol-accordion__wrapper-animation">
<div class="collapsible__content kol-accordion__content" id="nonce-control">
Expand All @@ -61,9 +67,11 @@ exports[`kol-accordion should render with _label="Überschrift" _level=1 _open=t
<kol-accordion _open="">
<template shadowrootmode="open">
<div class="collapsible disabled kol-accordion open" id="nonce">
<h1 class="collapsible__heading headline headline-h1 kol-accordion__heading kol-heading-wc">
<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>
<div class="kol-heading">
<h1 class="collapsible__heading kol-accordion__heading kol-heading--h1 kol-heading__headline">
<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>
</div>
<div class="collapsible__wrapper kol-accordion__wrapper">
<div class="collapsible__wrapper-animation kol-accordion__wrapper-animation">
<div class="collapsible__content kol-accordion__content" id="nonce-control">
Expand All @@ -80,9 +88,11 @@ exports[`kol-accordion should render with _label="Überschrift" _level=1 1`] = `
<kol-accordion>
<template shadowrootmode="open">
<div class="collapsible kol-accordion" id="nonce">
<h1 class="collapsible__heading headline headline-h1 kol-accordion__heading kol-heading-wc">
<kol-button-wc _ariacontrols="nonce-control" _icons="codicon codicon-add" _label="Überschrift" class="collapsible__heading-button kol-accordion__heading-button" slot="expert"></kol-button-wc>
</h1>
<div class="kol-heading">
<h1 class="collapsible__heading kol-accordion__heading kol-heading--h1 kol-heading__headline">
<kol-button-wc _ariacontrols="nonce-control" _icons="codicon codicon-add" _label="Überschrift" class="collapsible__heading-button kol-accordion__heading-button" slot="expert"></kol-button-wc>
</h1>
</div>
<div class="collapsible__wrapper kol-accordion__wrapper">
<div class="collapsible__wrapper-animation kol-accordion__wrapper-animation">
<div aria-hidden="true" class="collapsible__content kol-accordion__content" id="nonce-control">
Expand All @@ -99,9 +109,11 @@ exports[`kol-accordion should render with _label="Überschrift" _level=2 1`] = `
<kol-accordion>
<template shadowrootmode="open">
<div class="collapsible kol-accordion" id="nonce">
<h2 class="collapsible__heading headline headline-h2 kol-accordion__heading kol-heading-wc">
<kol-button-wc _ariacontrols="nonce-control" _icons="codicon codicon-add" _label="Überschrift" class="collapsible__heading-button kol-accordion__heading-button" slot="expert"></kol-button-wc>
</h2>
<div class="kol-heading">
<h2 class="collapsible__heading kol-accordion__heading kol-heading--h2 kol-heading__headline">
<kol-button-wc _ariacontrols="nonce-control" _icons="codicon codicon-add" _label="Überschrift" class="collapsible__heading-button kol-accordion__heading-button" slot="expert"></kol-button-wc>
</h2>
</div>
<div class="collapsible__wrapper kol-accordion__wrapper">
<div class="collapsible__wrapper-animation kol-accordion__wrapper-animation">
<div aria-hidden="true" class="collapsible__content kol-accordion__content" id="nonce-control">
Expand All @@ -118,9 +130,11 @@ exports[`kol-accordion should render with _label="Überschrift" _level=3 1`] = `
<kol-accordion>
<template shadowrootmode="open">
<div class="collapsible kol-accordion" id="nonce">
<h3 class="collapsible__heading headline headline-h3 kol-accordion__heading kol-heading-wc">
<kol-button-wc _ariacontrols="nonce-control" _icons="codicon codicon-add" _label="Überschrift" class="collapsible__heading-button kol-accordion__heading-button" slot="expert"></kol-button-wc>
</h3>
<div class="kol-heading">
<h3 class="collapsible__heading kol-accordion__heading kol-heading--h3 kol-heading__headline">
<kol-button-wc _ariacontrols="nonce-control" _icons="codicon codicon-add" _label="Überschrift" class="collapsible__heading-button kol-accordion__heading-button" slot="expert"></kol-button-wc>
</h3>
</div>
<div class="collapsible__wrapper kol-accordion__wrapper">
<div class="collapsible__wrapper-animation kol-accordion__wrapper-animation">
<div aria-hidden="true" class="collapsible__content kol-accordion__content" id="nonce-control">
Expand All @@ -137,9 +151,11 @@ exports[`kol-accordion should render with _label="Überschrift" _level=4 1`] = `
<kol-accordion>
<template shadowrootmode="open">
<div class="collapsible kol-accordion" id="nonce">
<h4 class="collapsible__heading headline headline-h4 kol-accordion__heading kol-heading-wc">
<kol-button-wc _ariacontrols="nonce-control" _icons="codicon codicon-add" _label="Überschrift" class="collapsible__heading-button kol-accordion__heading-button" slot="expert"></kol-button-wc>
</h4>
<div class="kol-heading">
<h4 class="collapsible__heading kol-accordion__heading kol-heading--h4 kol-heading__headline">
<kol-button-wc _ariacontrols="nonce-control" _icons="codicon codicon-add" _label="Überschrift" class="collapsible__heading-button kol-accordion__heading-button" slot="expert"></kol-button-wc>
</h4>
</div>
<div class="collapsible__wrapper kol-accordion__wrapper">
<div class="collapsible__wrapper-animation kol-accordion__wrapper-animation">
<div aria-hidden="true" class="collapsible__content kol-accordion__content" id="nonce-control">
Expand All @@ -156,9 +172,11 @@ exports[`kol-accordion should render with _label="Überschrift" _level=5 1`] = `
<kol-accordion>
<template shadowrootmode="open">
<div class="collapsible kol-accordion" id="nonce">
<h5 class="collapsible__heading headline headline-h5 kol-accordion__heading kol-heading-wc">
<kol-button-wc _ariacontrols="nonce-control" _icons="codicon codicon-add" _label="Überschrift" class="collapsible__heading-button kol-accordion__heading-button" slot="expert"></kol-button-wc>
</h5>
<div class="kol-heading">
<h5 class="collapsible__heading kol-accordion__heading kol-heading--h5 kol-heading__headline">
<kol-button-wc _ariacontrols="nonce-control" _icons="codicon codicon-add" _label="Überschrift" class="collapsible__heading-button kol-accordion__heading-button" slot="expert"></kol-button-wc>
</h5>
</div>
<div class="collapsible__wrapper kol-accordion__wrapper">
<div class="collapsible__wrapper-animation kol-accordion__wrapper-animation">
<div aria-hidden="true" class="collapsible__content kol-accordion__content" id="nonce-control">
Expand All @@ -175,9 +193,11 @@ exports[`kol-accordion should render with _label="Überschrift" _level=6 1`] = `
<kol-accordion>
<template shadowrootmode="open">
<div class="collapsible kol-accordion" id="nonce">
<h6 class="collapsible__heading headline headline-h6 kol-accordion__heading kol-heading-wc">
<kol-button-wc _ariacontrols="nonce-control" _icons="codicon codicon-add" _label="Überschrift" class="collapsible__heading-button kol-accordion__heading-button" slot="expert"></kol-button-wc>
</h6>
<div class="kol-heading">
<h6 class="collapsible__heading kol-accordion__heading kol-heading--h6 kol-heading__headline">
<kol-button-wc _ariacontrols="nonce-control" _icons="codicon codicon-add" _label="Überschrift" class="collapsible__heading-button kol-accordion__heading-button" slot="expert"></kol-button-wc>
</h6>
</div>
<div class="collapsible__wrapper kol-accordion__wrapper">
<div class="collapsible__wrapper-animation kol-accordion__wrapper-animation">
<div aria-hidden="true" class="collapsible__content kol-accordion__content" id="nonce-control">
Expand All @@ -194,9 +214,11 @@ exports[`kol-accordion should render with _label="Überschrift" 1`] = `
<kol-accordion>
<template shadowrootmode="open">
<div class="collapsible kol-accordion" id="nonce">
<h1 class="collapsible__heading headline headline-h1 kol-accordion__heading kol-heading-wc">
<kol-button-wc _ariacontrols="nonce-control" _icons="codicon codicon-add" _label="Überschrift" class="collapsible__heading-button kol-accordion__heading-button" slot="expert"></kol-button-wc>
</h1>
<div class="kol-heading">
<h1 class="collapsible__heading kol-accordion__heading kol-heading--h1 kol-heading__headline">
<kol-button-wc _ariacontrols="nonce-control" _icons="codicon codicon-add" _label="Überschrift" class="collapsible__heading-button kol-accordion__heading-button" slot="expert"></kol-button-wc>
</h1>
</div>
<div class="collapsible__wrapper kol-accordion__wrapper">
<div class="collapsible__wrapper-animation kol-accordion__wrapper-animation">
<div aria-hidden="true" class="collapsible__content kol-accordion__content" id="nonce-control">
Expand Down
Loading
Loading