feat(core): add alignment property to radio, checkboxes and toggles (#…

…548) * feat(core): add alignment property to radio, checkboxes and toggles * ci(core): fix ci * feat(core): rename property values --------- Co-authored-by: Tim Sielemann <[email protected]>
haiilo · Aug 22, 2024 · 345bec9 · 345bec9
1 parent 11d6d4f
commit 345bec9
Show file tree

Hide file tree

Showing 14 changed files with 159 additions and 5 deletions.
diff --git a/angular/projects/catalyst-demo/src/app/app.component.html b/angular/projects/catalyst-demo/src/app/app.component.html
@@ -51,4 +51,58 @@ <h1>new datepicker & timepicker</h1>
     hint="Depends on formControl state"
   ></cat-datepicker>
   <formly-form [form]="form" [fields]="fields"></formly-form>
+  <cat-checkbox>
+    <div slot="label">
+      <div>LABEL START</div>
+      <div>Subline</div>
+    </div>
+  </cat-checkbox>
+  <cat-checkbox alignment="center">
+    <div slot="label">
+      <div>LABEL CENTER</div>
+      <div>Subline</div>
+    </div>
+  </cat-checkbox>
+  <cat-checkbox alignment="bottom">
+    <div slot="label">
+      <div>LABEL END</div>
+      <div>Subline</div>
+    </div>
+  </cat-checkbox>
+  <cat-toggle>
+    <div slot="label">
+      <div>LABEL START</div>
+      <div>Subline</div>
+    </div>
+  </cat-toggle>
+  <cat-toggle alignment="center">
+    <div slot="label">
+      <div>LABEL CENTER</div>
+      <div>Subline</div>
+    </div>
+  </cat-toggle>
+  <cat-toggle alignment="bottom">
+    <div slot="label">
+      <div>LABEL END</div>
+      <div>Subline</div>
+    </div>
+  </cat-toggle>
+  <cat-radio>
+    <div slot="label">
+      <div>LABEL START</div>
+      <div>Subline</div>
+    </div>
+  </cat-radio>
+  <cat-radio alignment="center">
+    <div slot="label">
+      <div>LABEL CENTER</div>
+      <div>Subline</div>
+    </div>
+  </cat-radio>
+  <cat-radio alignment="bottom">
+    <div slot="label">
+      <div>LABEL END</div>
+      <div>Subline</div>
+    </div>
+  </cat-radio>
 </form>
diff --git a/angular/projects/catalyst-demo/src/app/app.module.ts b/angular/projects/catalyst-demo/src/app/app.module.ts
@@ -1,14 +1,21 @@
 import { NgModule } from '@angular/core';
 import { ReactiveFormsModule } from '@angular/forms';
 import { BrowserModule } from '@angular/platform-browser';
+import { CatalystModule } from '@haiilo/catalyst-angular';
 import { FormlyModule } from '@ngx-formly/core';
 import { CatalystFormlyModule } from '../../../catalyst-formly/src';
-import { CatalystModule } from '../../../catalyst/src';
 import { AppComponent } from './app.component';
 import { DialogComponent } from './dialog/dialog.component';
 
 @NgModule({
-  imports: [BrowserModule, ReactiveFormsModule, FormlyModule.forRoot(), CatalystModule.forRoot(), CatalystFormlyModule],
+  imports: [
+    BrowserModule,
+    ReactiveFormsModule,
+    FormlyModule.forRoot(),
+    CatalystModule.forRoot(),
+    CatalystFormlyModule,
+    CatalystModule
+  ],
   declarations: [AppComponent, DialogComponent],
   bootstrap: [AppComponent]
 })

diff --git a/angular/projects/catalyst/src/lib/directives/proxies.ts b/angular/projects/catalyst/src/lib/directives/proxies.ts
@@ -217,6 +217,7 @@ export declare interface CatCard extends Components.CatCard {
 
 @ProxyCmp({
   inputs: [
+    'alignment',
     'checked',
     'disabled',
     'hint',
@@ -240,6 +241,7 @@ export declare interface CatCard extends Components.CatCard {
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
   inputs: [
+    'alignment',
     'checked',
     'disabled',
     'hint',
@@ -795,6 +797,7 @@ export declare interface CatPagination extends Components.CatPagination {
 
 @ProxyCmp({
   inputs: [
+    'alignment',
     'checked',
     'disabled',
     'hint',
@@ -815,6 +818,7 @@ export declare interface CatPagination extends Components.CatPagination {
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
   inputs: [
+    'alignment',
     'checked',
     'disabled',
     'hint',
@@ -1324,6 +1328,7 @@ export declare interface CatTime extends Components.CatTime {
 
 @ProxyCmp({
   inputs: [
+    'alignment',
     'checked',
     'disabled',
     'hint',
@@ -1346,6 +1351,7 @@ export declare interface CatTime extends Components.CatTime {
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
   inputs: [
+    'alignment',
     'checked',
     'disabled',
     'hint',

diff --git a/core/src/components.d.ts b/core/src/components.d.ts
@@ -233,6 +233,10 @@ export namespace Components {
      * number of options.
      */
     interface CatCheckbox {
+        /**
+          * The alignment of the checkbox.
+         */
+        "alignment": 'center' | 'top' | 'bottom';
         /**
           * Checked state of the checkbox
          */
@@ -926,6 +930,10 @@ export namespace Components {
      * only one of a predefined set of mutually exclusive options.
      */
     interface CatRadio {
+        /**
+          * The alignment of the checkbox.
+         */
+        "alignment": 'center' | 'top' | 'bottom';
         /**
           * Whether this radio is checked.
          */
@@ -1468,6 +1476,10 @@ export namespace Components {
      * feature or option that can be turned on or off.
      */
     interface CatToggle {
+        /**
+          * The alignment of the checkbox.
+         */
+        "alignment": 'center' | 'top' | 'bottom';
         /**
           * Checked state of the toggle.
          */
@@ -2403,6 +2415,10 @@ declare namespace LocalJSX {
      * number of options.
      */
     interface CatCheckbox {
+        /**
+          * The alignment of the checkbox.
+         */
+        "alignment"?: 'center' | 'top' | 'bottom';
         /**
           * Checked state of the checkbox
          */
@@ -3085,6 +3101,10 @@ declare namespace LocalJSX {
      * only one of a predefined set of mutually exclusive options.
      */
     interface CatRadio {
+        /**
+          * The alignment of the checkbox.
+         */
+        "alignment"?: 'center' | 'top' | 'bottom';
         /**
           * Whether this radio is checked.
          */
@@ -3647,6 +3667,10 @@ declare namespace LocalJSX {
      * feature or option that can be turned on or off.
      */
     interface CatToggle {
+        /**
+          * The alignment of the checkbox.
+         */
+        "alignment"?: 'center' | 'top' | 'bottom';
         /**
           * Checked state of the toggle.
          */

diff --git a/core/src/components/cat-checkbox/cat-checkbox.scss b/core/src/components/cat-checkbox/cat-checkbox.scss
@@ -142,3 +142,11 @@ input {
   cursor: not-allowed;
   color: cat-token('color.ui.font.muted');
 }
+
+.align-center {
+  align-items: center;
+}
+
+.align-end {
+  align-items: flex-end;
+}
diff --git a/core/src/components/cat-checkbox/cat-checkbox.tsx b/core/src/components/cat-checkbox/cat-checkbox.tsx
@@ -99,6 +99,11 @@ export class CatCheckbox {
    */
   @Prop() labelLeft = false;
 
+  /**
+   * The alignment of the checkbox.
+   */
+  @Prop() alignment: 'center' | 'top' | 'bottom' = 'top';
+
   /**
    * Attributes that will be added to the native HTML input element.
    */
@@ -155,7 +160,13 @@ export class CatCheckbox {
       <Host>
         <label
           htmlFor={this.id}
-          class={{ 'is-hidden': this.labelHidden, 'is-disabled': this.disabled, 'label-left': this.labelLeft }}
+          class={{
+            'is-hidden': this.labelHidden,
+            'is-disabled': this.disabled,
+            'label-left': this.labelLeft,
+            'align-center': this.alignment === 'center',
+            'align-end': this.alignment === 'bottom'
+          }}
         >
           <input
             {...this.nativeAttributes}

diff --git a/core/src/components/cat-checkbox/readme.md b/core/src/components/cat-checkbox/readme.md
@@ -14,6 +14,7 @@ number of options.
 
 | Property           | Attribute        | Description                                                                               | Type                                      | Default     |
 | ------------------ | ---------------- | ----------------------------------------------------------------------------------------- | ----------------------------------------- | ----------- |
+| `alignment`        | `alignment`      | The alignment of the checkbox.                                                            | `"bottom" \| "center" \| "top"`           | `'top'`     |
 | `checked`          | `checked`        | Checked state of the checkbox                                                             | `boolean`                                 | `false`     |
 | `disabled`         | `disabled`       | Disabled state of the checkbox                                                            | `boolean`                                 | `false`     |
 | `hint`             | `hint`           | Optional hint text(s) to be displayed with the checkbox.                                  | `string \| string[] \| undefined`         | `undefined` |

diff --git a/core/src/components/cat-radio/cat-radio.scss b/core/src/components/cat-radio/cat-radio.scss
@@ -107,3 +107,11 @@ input {
     background-color: cat-token('color.ui.border.dark');
   }
 }
+
+.align-center .radio {
+  align-self: center;
+}
+
+.align-end .radio {
+  align-self: flex-end;
+}
diff --git a/core/src/components/cat-radio/cat-radio.tsx b/core/src/components/cat-radio/cat-radio.tsx
@@ -82,6 +82,11 @@ export class CatRadio {
    */
   @Prop() labelLeft = false;
 
+  /**
+   * The alignment of the checkbox.
+   */
+  @Prop() alignment: 'center' | 'top' | 'bottom' = 'top';
+
   /**
    * Attributes that will be added to the native HTML input element.
    */
@@ -133,7 +138,13 @@ export class CatRadio {
       <Host>
         <label
           htmlFor={this.id}
-          class={{ 'is-hidden': this.labelHidden, 'is-disabled': this.disabled, 'label-left': this.labelLeft }}
+          class={{
+            'is-hidden': this.labelHidden,
+            'is-disabled': this.disabled,
+            'label-left': this.labelLeft,
+            'align-center': this.alignment === 'center',
+            'align-end': this.alignment === 'bottom'
+          }}
           role="radio"
           aria-checked={this.checked ? 'true' : 'false'}
         >

diff --git a/core/src/components/cat-radio/readme.md b/core/src/components/cat-radio/readme.md
@@ -12,6 +12,7 @@ only one of a predefined set of mutually exclusive options.
 
 | Property           | Attribute      | Description                                                                               | Type                                      | Default     |
 | ------------------ | -------------- | ----------------------------------------------------------------------------------------- | ----------------------------------------- | ----------- |
+| `alignment`        | `alignment`    | The alignment of the checkbox.                                                            | `"bottom" \| "center" \| "top"`           | `'top'`     |
 | `checked`          | `checked`      | Whether this radio is checked.                                                            | `boolean`                                 | `false`     |
 | `disabled`         | `disabled`     | Whether this radio is disabled.                                                           | `boolean`                                 | `false`     |
 | `hint`             | `hint`         | Optional hint text(s) to be displayed with the radio.                                     | `string \| string[] \| undefined`         | `undefined` |

diff --git a/core/src/components/cat-toggle/cat-toggle.scss b/core/src/components/cat-toggle/cat-toggle.scss
@@ -112,3 +112,11 @@ input {
   cursor: not-allowed;
   color: cat-token('color.ui.font.muted');
 }
+
+.align-center {
+  align-items: center;
+}
+
+.align-end {
+  align-items: flex-end;
+}
diff --git a/core/src/components/cat-toggle/cat-toggle.tsx b/core/src/components/cat-toggle/cat-toggle.tsx
@@ -94,6 +94,11 @@ export class CatToggle {
    */
   @Prop() labelLeft = false;
 
+  /**
+   * The alignment of the checkbox.
+   */
+  @Prop() alignment: 'center' | 'top' | 'bottom' = 'top';
+
   /**
    * Attributes that will be added to the native HTML input element.
    */
@@ -150,7 +155,13 @@ export class CatToggle {
       <Host>
         <label
           htmlFor={this.id}
-          class={{ 'is-hidden': this.labelHidden, 'is-disabled': this.disabled, 'label-left': this.labelLeft }}
+          class={{
+            'is-hidden': this.labelHidden,
+            'is-disabled': this.disabled,
+            'label-left': this.labelLeft,
+            'align-center': this.alignment === 'center',
+            'align-end': this.alignment === 'bottom'
+          }}
         >
           <input
             {...this.nativeAttributes}

diff --git a/core/src/components/cat-toggle/readme.md b/core/src/components/cat-toggle/readme.md
@@ -14,6 +14,7 @@ feature or option that can be turned on or off.
 
 | Property           | Attribute        | Description                                                                               | Type                                      | Default     |
 | ------------------ | ---------------- | ----------------------------------------------------------------------------------------- | ----------------------------------------- | ----------- |
+| `alignment`        | `alignment`      | The alignment of the checkbox.                                                            | `"bottom" \| "center" \| "top"`           | `'top'`     |
 | `checked`          | `checked`        | Checked state of the toggle.                                                              | `boolean`                                 | `false`     |
 | `disabled`         | `disabled`       | Disabled state of the toggle.                                                             | `boolean`                                 | `false`     |
 | `hint`             | `hint`           | Optional hint text(s) to be displayed with the toggle.                                    | `string \| string[] \| undefined`         | `undefined` |

diff --git a/vue/src/components.ts b/vue/src/components.ts
@@ -89,6 +89,7 @@ export const CatCheckbox = /*@__PURE__*/ defineContainer<JSX.CatCheckbox>('cat-c
   'resolvedValue',
   'hint',
   'labelLeft',
+  'alignment',
   'nativeAttributes',
   'catChange',
   'catFocus',
@@ -283,6 +284,7 @@ export const CatRadio = /*@__PURE__*/ defineContainer<JSX.CatRadio>('cat-radio',
   'value',
   'hint',
   'labelLeft',
+  'alignment',
   'nativeAttributes',
   'catChange',
   'catFocus',
@@ -454,6 +456,7 @@ export const CatToggle = /*@__PURE__*/ defineContainer<JSX.CatToggle>('cat-toggl
   'resolvedValue',
   'hint',
   'labelLeft',
+  'alignment',
   'nativeAttributes',
   'catChange',
   'catFocus',