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

fix(components): remove scss module import #3358

Merged
merged 3 commits into from
Aug 13, 2024
Merged

fix(components): remove scss module import #3358

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
55f3a60
fix(components): remove scss module import
alizedebray Jul 30, 2024
58a4006
fix code smells
alizedebray Jul 30, 2024
37f7c97
add changeset
alizedebray Aug 13, 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
16 changes: 8 additions & 8 deletions packages/components/src/components.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -80,23 +80,23 @@ export namespace Components {
*/
interface PostCardControl {
/**
* Defines the `checked` attribute of the control. If `true`, the control is selected at its value will be included in the forms data.
* Defines the `checked` attribute of the control. If `true`, the control is selected at its value will be included in the forms' data.
*/
"checked": boolean;
/**
* Defines the description in the control-label.
*/
"description": string;
/**
* Defines the `disabled` attribute of the control. If `true`, the user can not interact with the control and the controls value will not be included in the forms data.
* Defines the `disabled` attribute of the control. If `true`, the user can not interact with the control and the controls value will not be included in the forms' data.
*/
"disabled": boolean;
/**
* A hidden public method to reset the group controls `checked` state to `false`.
*/
"groupReset": () => Promise<void>;
/**
* Defines the icon `name` inside of the card. <span className="alert alert-sm alert-info">If not set the icon will not show up.</span>
* Defines the icon `name` inside the card. <span className="alert alert-sm alert-info">If not set the icon will not show up.</span>
*/
"icon": string;
/**
Expand All @@ -116,7 +116,7 @@ export namespace Components {
*/
"type": 'checkbox' | 'radio';
/**
* Defines the validation `validity` of the control. To reset validity to an undefiend state, simply remove the attribute from the control.
* Defines the validation `validity` of the control. To reset validity to an undefined state, simply remove the attribute from the control.
*/
"validity": null | 'true' | 'false';
/**
Expand Down Expand Up @@ -575,19 +575,19 @@ declare namespace LocalJSX {
*/
interface PostCardControl {
/**
* Defines the `checked` attribute of the control. If `true`, the control is selected at its value will be included in the forms data.
* Defines the `checked` attribute of the control. If `true`, the control is selected at its value will be included in the forms' data.
*/
"checked"?: boolean;
/**
* Defines the description in the control-label.
*/
"description"?: string;
/**
* Defines the `disabled` attribute of the control. If `true`, the user can not interact with the control and the controls value will not be included in the forms data.
* Defines the `disabled` attribute of the control. If `true`, the user can not interact with the control and the controls value will not be included in the forms' data.
*/
"disabled"?: boolean;
/**
* Defines the icon `name` inside of the card. <span className="alert alert-sm alert-info">If not set the icon will not show up.</span>
* Defines the icon `name` inside the card. <span className="alert alert-sm alert-info">If not set the icon will not show up.</span>
*/
"icon"?: string;
/**
Expand All @@ -611,7 +611,7 @@ declare namespace LocalJSX {
*/
"type": 'checkbox' | 'radio';
/**
* Defines the validation `validity` of the control. To reset validity to an undefiend state, simply remove the attribute from the control.
* Defines the validation `validity` of the control. To reset validity to an undefined state, simply remove the attribute from the control.
*/
"validity"?: null | 'true' | 'false';
/**
Expand Down
5 changes: 0 additions & 5 deletions packages/components/src/components/post-card-control/post-card-control.module.scss
View file
Open in desktop

This file was deleted.

22 changes: 18 additions & 4 deletions packages/components/src/components/post-card-control/post-card-control.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,19 @@
@use 'sass:list';
@use 'sass:math';
@use '@swisspost/design-system-styles/core' as post;
@use '@swisspost/design-system-styles/components/form-check';

/*
* There are a whole bunch of !important statments in this file.
* There are a whole bunch of !important statements in this file.
* They are necessary and should not be removed, because we need to override the .form-check styles here.
*/

:host {

// remove as soon as all browser support :host-context()
// https://caniuse.com/?search=%3Ahost-context()
--post-card-control-bg-context: #{post.$backgrounds};

display: flex;
width: 100%;
}
Expand Down Expand Up @@ -416,14 +422,22 @@

// remove as soon as all browser support :host-context()
// https://caniuse.com/?search=%3Ahost-context()
:host(:not(:last-child)) {
.card-control[data-host-context*='fieldset'] {
:host(:not([data-context])) {
display: none;
}

:host([data-context*='fieldset']:not(:last-child)) {
.card-control {
margin-bottom: post.$size-regular;
}
}

$dark-bg-context: ();
@each $bg in post.$dark-backgrounds {
.card-control[data-host-context*='#{$bg}'] {
$dark-bg-context: list.append($dark-bg-context, "[data-context*='#{$bg}']", $separator: comma);
}
:host(:is(#{$dark-bg-context})) {
.card-control {
--post-card-control-border-color: #{post.$white};
--post-card-control-bg: transparent;
--post-card-control-color: #{post.$white};
Expand Down
55 changes: 22 additions & 33 deletions packages/components/src/components/post-card-control/post-card-control.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,14 +14,6 @@ import {
import { checkNonEmpty, checkOneOf } from '@/utils';
import { version } from '@root/package.json';

// remove as soon as all browser support :host-context()
// https://caniuse.com/?search=%3Ahost-context()
import scss from './post-card-control.module.scss';
import { parse } from '@/utils/sass-export';

/* eslint-disable-next-line @typescript-eslint/no-explicit-any */
const SCSS_VARIABLES: any = parse(scss);

let cardControlIds = 0;

/**
Expand Down Expand Up @@ -98,23 +90,23 @@ export class PostCardControl {
@Prop() readonly value: string = null;

/**
* Defines the `checked` attribute of the control. If `true`, the control is selected at its value will be included in the forms data.
* Defines the `checked` attribute of the control. If `true`, the control is selected at its value will be included in the forms' data.
*/
@Prop({ mutable: true }) checked = false;

/**
* Defines the `disabled` attribute of the control. If `true`, the user can not interact with the control and the controls value will not be included in the forms data.
* Defines the `disabled` attribute of the control. If `true`, the user can not interact with the control and the controls value will not be included in the forms' data.
*/
@Prop({ mutable: true }) disabled = false;

/**
* Defines the validation `validity` of the control.
* To reset validity to an undefiend state, simply remove the attribute from the control.
* To reset validity to an undefined state, simply remove the attribute from the control.
*/
@Prop({ mutable: true }) validity: null | 'true' | 'false' = null;

/**
* Defines the icon `name` inside of the card.
* Defines the icon `name` inside the card.
* <span className="alert alert-sm alert-info">If not set the icon will not show up.</span>
*/
@Prop() readonly icon: string = null;
Expand Down Expand Up @@ -174,7 +166,7 @@ export class PostCardControl {
}

@Watch('disabled')
updateControlDisbled() {
updateControlDisabled() {
this.controlSetChecked(this.checked);
}

Expand Down Expand Up @@ -322,33 +314,31 @@ export class PostCardControl {
}
}

// remove as soon as all browser support the :host-context() selector
private readonly HOST_CONTEXT_FILTERS = ['fieldset', ...SCSS_VARIABLES['dark-bg-selectors']];
private hostContext: string[];

// remove as soon as all browser support :host-context()
// https://caniuse.com/?search=%3Ahost-context()
private setHostContext() {
this.hostContext = [];
let element = this.host as HTMLElement;
let bgContext: string;
const possibleBgContexts = window
.getComputedStyle(this.host)
.getPropertyValue('--post-card-control-bg-context')
.split(', ');

let formContext: string;
const possibleFromContexts = ['fieldset'];

while (element) {
const localName = element.localName;
const id = element.id ? `#${element.id}` : '';
const classes =
element.classList.length > 0 ? `.${Array.from(element.classList).join('.')}` : '';
let element = this.host as HTMLElement;
while (element && (!bgContext || !formContext)) {
bgContext = bgContext ?? possibleBgContexts.find(selector => element.matches(selector));
formContext = formContext ?? possibleFromContexts.find(selector => element.matches(selector));

this.hostContext.push(`${localName}${id}${classes}`);
element = element.parentElement;
}

this.hostContext = this.hostContext.filter(ctx =>
this.HOST_CONTEXT_FILTERS.find(f => ctx.includes(f)),
);
const hostContext = [bgContext, formContext].filter(context => !!context).join(' ');
this.host.setAttribute('data-context', hostContext);
}

connectedCallback() {
// remove as soon as all browser support :host-context()
this.setHostContext();

this.initialChecked = this.checked;
}

Expand All @@ -368,8 +358,6 @@ export class PostCardControl {
'is-valid': this.validity !== null && this.validity !== 'false',
'is-invalid': this.validity === 'false',
}}
// remove as soon as all browser support :host-context()
data-host-context={this.hostContext.join(' ')}
>
<input
ref={el => (this.control = el)}
Expand Down Expand Up @@ -416,6 +404,7 @@ export class PostCardControl {
}

componentDidRender() {
this.setHostContext();
this.groupCollectMembers();
}

Expand Down
8 changes: 4 additions & 4 deletions packages/components/src/components/post-card-control/readme.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,14 +9,14 @@

| Property | Attribute | Description | Type | Default |
| -------------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------------------- | ----------- |
| `checked` | `checked` | Defines the `checked` attribute of the control. If `true`, the control is selected at its value will be included in the forms data. | `boolean` | `false` |
| `checked` | `checked` | Defines the `checked` attribute of the control. If `true`, the control is selected at its value will be included in the forms' data. | `boolean` | `false` |
| `description` | `description` | Defines the description in the control-label. | `string` | `null` |
| `disabled` | `disabled` | Defines the `disabled` attribute of the control. If `true`, the user can not interact with the control and the controls value will not be included in the forms data. | `boolean` | `false` |
| `icon` | `icon` | Defines the icon `name` inside of the card. <span className="alert alert-sm alert-info">If not set the icon will not show up.</span> | `string` | `null` |
| `disabled` | `disabled` | Defines the `disabled` attribute of the control. If `true`, the user can not interact with the control and the controls value will not be included in the forms' data. | `boolean` | `false` |
| `icon` | `icon` | Defines the icon `name` inside the card. <span className="alert alert-sm alert-info">If not set the icon will not show up.</span> | `string` | `null` |
| `label` _(required)_ | `label` | Defines the text in the control-label. | `string` | `undefined` |
| `name` | `name` | Defines the `name` attribute of the control. <span className="alert alert-sm alert-info">This is a required property, when the control should participate in a native `form`. If not specified, a native `form` will never contain this controls value.</span> <span className="alert alert-sm alert-info">This is a required property, when the control is used with type `radio`.</span> | `string` | `null` |
| `type` _(required)_ | `type` | Defines the `type` attribute of the control. | `"checkbox" \| "radio"` | `undefined` |
| `validity` | `validity` | Defines the validation `validity` of the control. To reset validity to an undefiend state, simply remove the attribute from the control. | `"false" \| "true"` | `null` |
| `validity` | `validity` | Defines the validation `validity` of the control. To reset validity to an undefined state, simply remove the attribute from the control. | `"false" \| "true"` | `null` |
| `value` | `value` | Defines the `value` attribute of the control. <span className="alert alert-sm alert-info">This is a required property, when the control is used with type `radio`.</span> | `string` | `null` |


Expand Down
1 change: 0 additions & 1 deletion packages/components/stencil.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,6 @@ export const config: Config = {
rollupPlugins: {
before: [
postcss({
modules: true,
use: {
sass: {
includePaths: ['node_modules'],
Expand Down
38 changes: 25 additions & 13 deletions packages/styles/src/variables/_color.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -184,20 +184,32 @@ $background-colors: map.merge($background-colors, $signal-colors);
$background-colors: map.merge($background-colors, $signal-background-colors);
$background-colors: map.merge($background-colors, $accent-colors);

// Compile a list of dark backgrounds, used in the :is selector mixin at mixins/color
$dark-backgrounds: () !default;
// Compile a list of light and dark backgrounds, used in the :is selector mixin at mixins/color
$_backgrounds: (
light: (),
dark: (),
) !default;

@each $color-name, $color in $background-colors {
@if (contrast-fn.light-or-dark($color) == 'dark') {
$dark-backgrounds: list.append($dark-backgrounds, '.bg-#{$color-name}', $separator: comma);
}
$key: contrast-fn.light-or-dark($color);
$values: list.append(map.get($_backgrounds, $key), '.bg-#{$color-name}', $separator: comma);
$_backgrounds: map.set($_backgrounds, $key, $values);
}

@each $color-name, $color in $notification-colors {
@if (contrast-fn.light-or-dark($color) == 'dark') {
$dark-backgrounds: list.append($dark-backgrounds, '.alert-#{$color-name}', $separator: comma);
$dark-backgrounds: list.append(
$dark-backgrounds,
'post-alert[type=#{$color-name}]',
$separator: comma
);
}
$key: contrast-fn.light-or-dark($color);
$values: list.join(
map.get($_backgrounds, $key),
'.alert-#{$color-name}' 'post-alert[type=#{$color-name}]',
$separator: comma
);
$_backgrounds: map.set($_backgrounds, $key, $values);
}

$backgrounds: list.join(
map.get($_backgrounds, light),
map.get($_backgrounds, dark),
$separator: comma
);
$dark-backgrounds: map.get($_backgrounds, dark) !default;
$light-backgrounds: map.get($_backgrounds, light) !default;