Skip to content

Commit

Permalink
Merge branch 'main' into 2016-remove-deprecated-form-checks-variables
Browse files Browse the repository at this point in the history
  • Loading branch information
@gfellerph
gfellerph authored Aug 15, 2024
2 parents 1c69e6c + e8460d8 commit fdc9030
Show file tree
Hide file tree
Showing 10 changed files with 88 additions and 69 deletions.
5 changes: 5 additions & 0 deletions .changeset/fair-suns-agree.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@swisspost/design-system-components': patch
---

Fixed the `post-card-control` component to use the correct color scheme when placed on nested colored backgrounds.
5 changes: 5 additions & 0 deletions .changeset/some-people-say.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@swisspost/design-system-styles': patch
---

Set the `max-width` constraint of the tag component to 100% for improved accessibility. Try to keep tag text as short as possible though.
16 changes: 8 additions & 8 deletions packages/components/src/components.d.ts
View file
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 @@ -588,19 +588,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 @@ -624,7 +624,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

This file was deleted.

22 changes: 18 additions & 4 deletions packages/components/src/components/post-card-control/post-card-control.scss
View file
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
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
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
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
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;
2 changes: 1 addition & 1 deletion packages/styles/src/variables/components/_tag.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
$tag-gap: spacing.$size-micro;
$tag-padding-y: 0;
$tag-padding-x: spacing.$size-mini;
$tag-max-width: sizing.px-to-rem(296);
$tag-max-width: 100%;
$tag-border-width: spacing.$size-hair;
$tag-border-radius: spacing.$size-micro;
$tag-font-size: type.$font-size-16;
Expand Down

0 comments on commit fdc9030

Please sign in to comment.