Merge branch 'main' into feature/tree

sl-design-system · May 3, 2024 · 868c8a8 · 868c8a8
2 parents cc070d5 + c6c76d5
commit 868c8a8
Show file tree

Hide file tree

Showing 72 changed files with 1,635 additions and 501 deletions.
diff --git a/.changeset/curvy-candles-protect.md b/.changeset/curvy-candles-protect.md
@@ -0,0 +1,20 @@
+---
+"@sl-design-system/sanoma-utbildning": patch
+"@sl-design-system/editorial-suite": patch
+"@sl-design-system/my-digital-book": patch
+"@sl-design-system/sanoma-learning": patch
+"@sl-design-system/itslearning": patch
+"@sl-design-system/bingel-int": patch
+"@sl-design-system/bingel-dc": patch
+"@sl-design-system/clickedu": patch
+"@sl-design-system/magister": patch
+"@sl-design-system/nowa-era": patch
+"@sl-design-system/myvanin": patch
+"@sl-design-system/bingel": patch
+"@sl-design-system/kampus": patch
+"@sl-design-system/neon": patch
+"@sl-design-system/teas": patch
+"@sl-design-system/max": patch
+---
+
+Use circle-exclamation icon for form validation messages instead of triangle.
diff --git a/.changeset/five-mails-worry.md b/.changeset/five-mails-worry.md
@@ -0,0 +1,7 @@
+---
+"@sl-design-system/form": patch
+"@sl-design-system/text-field": patch
+"@sl-design-system/textarea": patch
+---
+
+Remove inline invalid icon and just have the form field display it, like the other form components.
diff --git a/.changeset/light-jeans-flow.md b/.changeset/light-jeans-flow.md
@@ -0,0 +1,5 @@
+---
+"@sl-design-system/form": patch
+---
+
+Move the hint above the form control, so you can have both hint and validation error showing at the same time.
diff --git a/.changeset/shy-worms-build.md b/.changeset/shy-worms-build.md
@@ -0,0 +1,30 @@
+---
+"@sl-design-system/bingel-dc": patch
+"@sl-design-system/bingel-int": patch
+"@sl-design-system/clickedu": patch
+"@sl-design-system/editorial-suite": patch
+"@sl-design-system/itslearning": patch
+"@sl-design-system/kampus": patch
+"@sl-design-system/magister": patch
+"@sl-design-system/max": patch
+"@sl-design-system/my-digital-book": patch
+"@sl-design-system/myvanin": patch
+"@sl-design-system/neon": patch
+"@sl-design-system/nowa-era": patch
+"@sl-design-system/sanoma-learning": patch
+"@sl-design-system/sanoma-utbildning": patch
+"@sl-design-system/teas": patch
+---
+
+Change tokens related to moving the hint above the form-field:
+- Included hint colors tokens
+- Include hint font tokens in all themes
+- Fix token naming for hints
+- Fix label font sizing and spacing
+- Fix helper (validation message) fonts sizing and spacing
+- Fix field label (label & tag) fonts sizing in all themes
+- Fix helper (validation message) font sizes
+- Fix Magister font tokens for label and tags
+- Update MAX field label padding bottom to 4px and padding bottom lg to 8px in CORE
+- Change field label padding bottom to 8px (sm)
+- New gap form token (24px)
diff --git a/packages/components/form/src/error.scss b/packages/components/form/src/error.scss
@@ -2,20 +2,24 @@
   --_color: var(--sl-color-input-helper-text-invalid);
   --_font: var(--sl-text-input-helper-text-md);
   --_gap: var(--sl-space-input-helper-gap-md);
+  --_padding-block-start: var(--sl-space-input-helper-padding-top-md);
 
   align-items: center;
   color: var(--_color);
   display: flex;
   font: var(--_font);
   gap: var(--_gap);
+  padding-block-start: var(--_padding-block-start);
 }
 
 :host([size='sm']) {
   --_font: var(--sl-text-input-helper-text-sm);
   --_gap: var(--sl-space-input-helper-gap-sm);
+  --_padding-block-start: var(--sl-space-input-helper-padding-top-sm);
 }
 
 :host([size='lg']) {
   --_font: var(--sl-text-input-helper-text-lg);
   --_gap: var(--sl-space-input-helper-gap-lg);
+  --_padding-block-start: var(--sl-space-input-helper-padding-top-lg);
 }
diff --git a/packages/components/form/src/error.ts b/packages/components/form/src/error.ts
@@ -1,6 +1,6 @@
 import { type ScopedElementsMap, ScopedElementsMixin } from '@open-wc/scoped-elements/lit-element.js';
 import { Icon } from '@sl-design-system/icon';
-import { type CSSResultGroup, LitElement, type TemplateResult, html, nothing } from 'lit';
+import { type CSSResultGroup, LitElement, type TemplateResult, html } from 'lit';
 import { property } from 'lit/decorators.js';
 import styles from './error.scss.js';
 
@@ -31,12 +31,6 @@ export class Error extends ScopedElementsMixin(LitElement) {
   /** The light DOM slot. */
   #slot?: HTMLSlotElement;
 
-  /**
-   * Whether the icon should be hidden. This can be useful when the form control
-   * already shows an icon inside the component itself.
-   */
-  @property({ type: Boolean, reflect: true, attribute: 'no-icon' }) noIcon?: boolean;
-
   /** The size at which the error is displayed. */
   @property({ reflect: true }) size: ErrorSize = 'md';
 
@@ -55,7 +49,7 @@ export class Error extends ScopedElementsMixin(LitElement) {
 
   override render(): TemplateResult {
     return html`
-      ${this.noIcon ? nothing : html`<sl-icon name="triangle-exclamation-solid" size="lg"></sl-icon>`}
+      <sl-icon name="circle-exclamation-solid"></sl-icon>
       <slot></slot>
     `;
   }

diff --git a/packages/components/form/src/form-control-mixin.ts b/packages/components/form/src/form-control-mixin.ts
@@ -48,7 +48,6 @@ export interface FormControl {
   readonly labels: NodeListOf<HTMLLabelElement> | null;
   readonly nativeFormValue: FormValue;
   readonly required?: boolean;
-  readonly showExternalValidityIcon: boolean;
   readonly showValidity: FormControlShowValidity;
   readonly valid: boolean;
   readonly validationMessage: string;
@@ -112,9 +111,6 @@ export function FormControlMixin<T extends Constructor<ReactiveElement>>(constru
     /** @ignore Whether the form control should report the validity of the control. */
     report?: boolean;
 
-    /** @ignore This determines whether the `<sl-error>` component displays an icon or not. */
-    showExternalValidityIcon = true;
-
     /** Optional property to indicate the valid state should be shown. */
     showValid = false;
 

diff --git a/packages/components/form/src/form-field.scss b/packages/components/form/src/form-field.scss
@@ -1,14 +1,15 @@
 :host {
-  --_control-gap: var(--sl-space-input-helper-gap-md);
   --_label-gap: var(--sl-space-input-field-label-padding-bottom-md);
 
   display: flex;
   flex-direction: column;
-  gap: var(--_label-gap);
+}
+
+slot:not([name])::slotted(*) {
+  margin-block-start: var(--_label-gap);
 }
 
 .wrapper {
   display: flex;
   flex-direction: column;
-  gap: var(--_control-gap);
 }
diff --git a/packages/components/form/src/form-field.ts b/packages/components/form/src/form-field.ts
@@ -1,6 +1,6 @@
 import { type ScopedElementsMap, ScopedElementsMixin } from '@open-wc/scoped-elements/lit-element.js';
 import { type EventEmitter, event } from '@sl-design-system/shared';
-import { type CSSResultGroup, LitElement, type PropertyValues, type TemplateResult, html, nothing } from 'lit';
+import { type CSSResultGroup, LitElement, type PropertyValues, type TemplateResult, html } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { Error } from './error.js';
 import { type FormControl, type SlUpdateValidityEvent } from './form-control-mixin.js';
@@ -92,7 +92,6 @@ export class FormField extends ScopedElementsMixin(LitElement) {
         if (this.error) {
           this.#error ??= this.shadowRoot?.createElement('sl-error') as Error;
           this.#error.innerText = this.error;
-          this.#error.noIcon = !this.control?.showExternalValidityIcon;
 
           if (!this.#error.parentElement) {
             this.append(this.#error);
@@ -143,11 +142,9 @@ export class FormField extends ScopedElementsMixin(LitElement) {
     return html`
       <slot name="label" @slotchange=${this.#onLabelSlotchange}></slot>
       <div class="wrapper" part="wrapper">
+        <slot @slotchange=${this.#onHintSlotchange} name="hint"></slot>
         <slot @slotchange=${this.#onSlotchange} @sl-update-validity=${this.#onUpdateValidity}></slot>
         <slot @slotchange=${this.#onErrorSlotchange} name="error"></slot>
-        ${this.#customError || this.#error
-          ? nothing
-          : html`<slot name="hint" @slotchange=${this.#onHintSlotchange}></slot>`}
       </div>
     `;
   }
@@ -161,7 +158,6 @@ export class FormField extends ScopedElementsMixin(LitElement) {
     } else if (error) {
       this.#error = error;
       this.#error.id ||= `sl-form-field-error-${nextUniqueId++}`;
-      this.#error.noIcon = !this.control?.showExternalValidityIcon;
 
       if (this.control) {
         this.control.formControlElement.setAttribute('aria-describedby', this.#error.id);

diff --git a/packages/components/form/src/form.scss b/packages/components/form/src/form.scss
@@ -1,5 +1,5 @@
 :host {
-  --_gap: var(--sl-form-gap, 1rem);
+  --_gap: var(--sl-space-form-gap, 1.5rem);
 
   display: flex;
   flex-direction: column;

diff --git a/...s/components/form/src/examples.stories.ts → packages/components/form/src/form.stories.ts b/...s/components/form/src/examples.stories.ts → packages/components/form/src/form.stories.ts
@@ -15,7 +15,7 @@ import { type Form } from './form.js';
 type Story = StoryObj;
 
 export default {
-  title: 'Form/Examples'
+  title: 'Form/Form'
 };
 
 export const Basic: Story = {
@@ -138,39 +138,39 @@ export const All: Story = {
 
     return html`
       <sl-form>
-        <sl-form-field label="Text field">
+        <sl-form-field hint="Hint text" label="Text field">
           <sl-text-field name="input" placeholder="Placeholder" required></sl-text-field>
         </sl-form-field>
 
-        <sl-form-field label="Textarea">
+        <sl-form-field hint="Hint text" label="Textarea">
           <sl-textarea name="textarea" placeholder="Placeholder" required></sl-textarea>
         </sl-form-field>
 
-        <sl-form-field label="Checkbox">
+        <sl-form-field hint="Hint text" label="Checkbox">
           <sl-checkbox name="checkbox" required value="checked">Checkbox</sl-checkbox>
         </sl-form-field>
 
-        <sl-form-field label="Select">
+        <sl-form-field hint="Hint text" label="Select">
           <sl-select name="select" required>
             <sl-select-option value="1">Option 1</sl-select-option>
             <sl-select-option value="2">Option 2</sl-select-option>
             <sl-select-option value="3">Option 3</sl-select-option>
           </sl-select>
         </sl-form-field>
 
-        <sl-form-field label="Switch">
+        <sl-form-field hint="Hint text" label="Switch">
           <sl-switch name="switch" reverse value="toggled">Toggle me</sl-switch>
         </sl-form-field>
 
-        <sl-form-field label="Checkbox group">
+        <sl-form-field hint="Hint text" label="Checkbox group">
           <sl-checkbox-group name="checkboxGroup" required>
             <sl-checkbox value="0">Check me</sl-checkbox>
             <sl-checkbox value="1">No me</sl-checkbox>
             <sl-checkbox value="2">I was here first</sl-checkbox>
           </sl-checkbox-group>
         </sl-form-field>
 
-        <sl-form-field label="Radio group">
+        <sl-form-field hint="Hint text" label="Radio group">
           <sl-radio-group name="radioGroup" required>
             <sl-radio value="1">One</sl-radio>
             <sl-radio value="2">Two</sl-radio>
@@ -195,39 +195,39 @@ export const AllInvalid: Story = {
 
     return html`
       <sl-form>
-        <sl-form-field label="Text field">
+        <sl-form-field hint="Hint text" label="Text field">
           <sl-text-field name="input" placeholder="Placeholder" required></sl-text-field>
         </sl-form-field>
 
-        <sl-form-field label="Textarea">
+        <sl-form-field hint="Hint text" label="Textarea">
           <sl-textarea name="textarea" placeholder="Placeholder" required></sl-textarea>
         </sl-form-field>
 
-        <sl-form-field label="Checkbox">
+        <sl-form-field hint="Hint text" label="Checkbox">
           <sl-checkbox name="checkbox" required value="checked">Checkbox</sl-checkbox>
         </sl-form-field>
 
-        <sl-form-field label="Select">
+        <sl-form-field hint="Hint text" label="Select">
           <sl-select name="select" required>
             <sl-select-option value="1">Option 1</sl-select-option>
             <sl-select-option value="2">Option 2</sl-select-option>
             <sl-select-option value="3">Option 3</sl-select-option>
           </sl-select>
         </sl-form-field>
 
-        <sl-form-field label="Switch">
+        <sl-form-field hint="Hint text" label="Switch">
           <sl-switch name="switch" reverse value="toggled">Toggle me</sl-switch>
         </sl-form-field>
 
-        <sl-form-field label="Checkbox group">
+        <sl-form-field hint="Hint text" label="Checkbox group">
           <sl-checkbox-group name="checkboxGroup" required>
             <sl-checkbox value="0">Check me</sl-checkbox>
             <sl-checkbox value="1">No me</sl-checkbox>
             <sl-checkbox value="2">I was here first</sl-checkbox>
           </sl-checkbox-group>
         </sl-form-field>
 
-        <sl-form-field label="Radio group">
+        <sl-form-field hint="Hint text" label="Radio group">
           <sl-radio-group name="radioGroup" required>
             <sl-radio value="1">One</sl-radio>
             <sl-radio value="2">Two</sl-radio>

diff --git a/packages/components/form/src/hint.scss b/packages/components/form/src/hint.scss
@@ -1,6 +1,8 @@
 :host {
+  --_color: var(--sl-color-input-field-label-hint-default);
   --_font: var(--sl-text-input-helper-text-md);
 
+  color: var(--_color);
   display: block;
   font: var(--_font);
 }

diff --git a/packages/components/text-field/src/text-field.spec.ts b/packages/components/text-field/src/text-field.spec.ts
@@ -249,15 +249,6 @@ describe('sl-text-field', () => {
 
       expect(onUpdateValidity).to.have.been.calledOnce;
     });
-
-    it('should show a warning icon when reported', async () => {
-      el.reportValidity();
-      await el.updateComplete;
-
-      const icon = el.renderRoot.querySelector('sl-icon');
-      expect(icon).to.exist;
-      expect(icon).to.have.attribute('name', 'triangle-exclamation-solid');
-    });
   });
 
   describe('valid', () => {

diff --git a/packages/components/text-field/src/text-field.ts b/packages/components/text-field/src/text-field.ts
@@ -41,9 +41,6 @@ export class TextField extends FormControlMixin(ScopedElementsMixin(LitElement))
   /** @private */
   static override styles: CSSResultGroup = styles;
 
-  /** @private Hides the external validity icon. */
-  override showExternalValidityIcon = false;
-
   /** @internal Emits when the focus leaves the component. */
   @event({ name: 'sl-blur' }) blurEvent!: EventEmitter<SlBlurEvent>;
 
@@ -145,9 +142,6 @@ export class TextField extends FormControlMixin(ScopedElementsMixin(LitElement))
       <slot name="prefix"></slot>
       <slot @keydown=${this.#onKeydown} @input=${this.#onInput} @slotchange=${this.#onSlotchange} name="input"></slot>
       <slot name="suffix">
-        ${this.showValidity === 'invalid'
-          ? html`<sl-icon .size=${this.size} class="invalid-icon" name="triangle-exclamation-solid"></sl-icon>`
-          : nothing}
         ${this.showValidity === 'valid'
           ? html`<sl-icon .size=${this.size} class="valid-icon" name="circle-check-solid"></sl-icon>`
           : nothing}

diff --git a/packages/components/textarea/src/textarea.spec.ts b/packages/components/textarea/src/textarea.spec.ts
@@ -270,16 +270,6 @@ describe('sl-textarea', () => {
       expect(onUpdateValidity).to.have.been.calledOnce;
     });
 
-    it('should have an invalid icon after reporting', async () => {
-      el.reportValidity();
-      await el.updateComplete;
-
-      const icon = el.renderRoot.querySelector('sl-icon');
-
-      expect(icon).to.exist;
-      expect(icon).to.have.class('invalid-icon');
-    });
-
     it('should be valid after typing', async () => {
       el.focus();
       await sendKeys({ type: 'asdf ' });
@@ -325,16 +315,6 @@ describe('sl-textarea', () => {
       );
     });
 
-    it('should have an invalid icon after reporting', async () => {
-      el.reportValidity();
-      await el.updateComplete;
-
-      const icon = el.renderRoot.querySelector('sl-icon');
-
-      expect(icon).to.exist;
-      expect(icon).to.have.class('invalid-icon');
-    });
-
     it('should be valid after typing', async () => {
       el.focus();
       await sendKeys({ type: 'dsf' });