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.

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 icon #7176

Merged
merged 11 commits into from
Dec 16, 2024
3 changes: 2 additions & 1 deletion packages/components/src/components/icon/shadow.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import { validateLabel, watchString } from '../../schema';
import { Component, h, Host, Prop, State, Watch } from '@stencil/core';

import type { JSX } from '@stencil/core';
import clsx from 'clsx';
/**
* @part icon - Ermöglicht das Styling des inneren Icons.
*/
Expand All @@ -27,7 +28,7 @@ export class KolIcon implements IconAPI {
* Referenz: https://www.w3.org/TR/wai-aria/states_and_properties#aria-hidden
*/
aria-label={ariaShow ? this.state._label : undefined}
class={this.state._icons}
class={clsx('kol-icon__icon', this.state._icons)}
part="icon"
role="img"
></i>
Expand Down
22 changes: 14 additions & 8 deletions packages/components/src/components/icon/style.scss
Original file line number Diff line number Diff line change
Expand Up @@ -2,19 +2,25 @@
@import '../../assets/codicons/codicon';

@layer kol-component {
/* :host implicitly inherits font-size, see below */
/*
* Necessary to center icon
*/
:host {
font-size: rem(16);
color: inherit;
display: contents;
line-height: inherit;
}

/*
.kol-icon {
&__icon {
font-size: rem(16);
sdvg marked this conversation as resolved.
Show resolved Hide resolved
color: inherit;
line-height: inherit;
}
/*
* The <code>:important</code> is important, because we should always override the font icon style.
*/
:host > i,
:host > i:before {
font-size: inherit !important;
&__icon,
&__icon:before {
font-size: inherit !important;
}
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
exports[`kol-icon should render with _label="Aria-Label" _icons="codicon codicon-home" 1`] = `
<kol-icon class="kol-icon" exportparts="icon">
<template shadowrootmode="open">
<i aria-label="Aria-Label" class="codicon codicon-home" part="icon" role="img"></i>
<i aria-label="Aria-Label" class="codicon codicon-home kol-icon__icon" part="icon" role="img"></i>
</template>
</kol-icon>
`;
Loading