fix(core): refine datepicker sizing

haiilo · Apr 25, 2024 · 79076a9 · 79076a9
1 parent c67bcb2
commit 79076a9
Show file tree

Hide file tree

Showing 8 changed files with 38 additions and 58 deletions.
diff --git a/angular/projects/catalyst/src/lib/directives/proxies.ts b/angular/projects/catalyst/src/lib/directives/proxies.ts
@@ -368,15 +368,15 @@ export declare interface CatDate extends Components.CatDate {
 }
 
 @ProxyCmp({
-  inputs: ['hint', 'max', 'min', 'noClear', 'noToday', 'range', 'size', 'value', 'weeks'],
+  inputs: ['hint', 'max', 'min', 'noClear', 'noToday', 'range', 'value', 'weeks'],
   methods: ['select', 'clear', 'resetView']
 })
 @Component({
   selector: 'cat-date-inline',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['hint', 'max', 'min', 'noClear', 'noToday', 'range', 'size', 'value', 'weeks']
+  inputs: ['hint', 'max', 'min', 'noClear', 'noToday', 'range', 'value', 'weeks']
 })
 export class CatDateInline {
   protected el: HTMLElement;

diff --git a/core/src/components.d.ts b/core/src/components.d.ts
@@ -454,10 +454,6 @@ export namespace Components {
           * @param date The date to select.
          */
         "select": (date: Date | null) => Promise<void>;
-        /**
-          * The size of the date picker.
-         */
-        "size": 's' | 'm';
         /**
           * The value of the control, given in local ISO 8601 date format YYYY-MM-DD.
          */
@@ -2569,10 +2565,6 @@ declare namespace LocalJSX {
           * Allow the selection of a range of dates, i.e. start and end date.
          */
         "range"?: boolean;
-        /**
-          * The size of the date picker.
-         */
-        "size"?: 's' | 'm';
         /**
           * The value of the control, given in local ISO 8601 date format YYYY-MM-DD.
          */

diff --git a/core/src/components/cat-button/cat-button.scss b/core/src/components/cat-button/cat-button.scss
@@ -400,6 +400,8 @@ $button-sizes: (
 :host(.cat-date-item) {
   .cat-button {
     padding: 0;
+    min-width: 2rem;
+    max-height: 3rem;
     aspect-ratio: 1;
   }
 }

diff --git a/core/src/components/cat-date-inline/cat-date-inline.scss b/core/src/components/cat-date-inline/cat-date-inline.scss
@@ -2,7 +2,7 @@
 @use 'mixins' as *;
 
 :host {
-  display: inline-block;
+  display: block;
 }
 
 :host([hidden]) {
@@ -12,42 +12,33 @@
 .picker {
   display: flex;
   flex-direction: column;
-  min-width: calc(2rem + 7 * 2.5rem);
-  max-width: calc(2rem + 7 * 4rem);
-
-  &.picker-weeks {
-    min-width: calc(7 * 2.5rem);
-    max-width: calc(7 * 4rem);
-  }
-
-  &.picker-small {
-    min-width: calc(2rem + 7 * 2rem);
-    max-width: calc(2rem + 7 * 3rem);
-
-    &.picker-weeks {
-      min-width: calc(7 * 2rem);
-      max-width: calc(7 * 3rem);
-    }
-  }
+  gap: 0.5rem;
 }
 
 .picker-head {
   display: flex;
-  gap: 0.5rem;
   align-items: center;
+  container-type: inline-size;
+
+  > :not(:last-child) {
+    // we use margin here instead of gap to be able to properly adjust by container query
+    margin-right: 0.25rem;
+  }
 
   h3 {
-    @include cat-head(4);
+    @include cat-head(5);
     flex: 1;
     text-align: center;
-    margin: 0;
+    margin-block: 0;
   }
 
-  .picker-small & {
-    gap: 0.25rem;
-
+  @container (min-width: 20rem) {
     h3 {
-      @include cat-head(5);
+      @include cat-head(4);
+    }
+
+    > :not(:last-child) {
+      margin-right: 0.5rem;
     }
   }
 }
@@ -66,7 +57,6 @@
     'd d d d d d d'
     'd d d d d d d';
   /* stylelint-enable declaration-block-no-redundant-longhand-properties */
-  margin: 1rem 0 0.5rem;
 
   .picker-weeks & {
     /* stylelint-disable declaration-block-no-redundant-longhand-properties */
@@ -81,10 +71,6 @@
       'w d d d d d d d';
     /* stylelint-enable declaration-block-no-redundant-longhand-properties */
   }
-
-  .picker-small & {
-    margin: 0.5rem 0;
-  }
 }
 
 .picker-grid-head {
@@ -127,20 +113,31 @@
 
 .picker-foot {
   display: flex;
-  gap: 1rem;
   align-items: center;
   width: min-content;
   min-width: 100%;
   justify-content: space-between;
+  container-type: inline-size;
 
-  .picker-small & {
-    gap: 0.5rem;
+  > :not(:last-child) {
+    // we use margin here instead of gap to be able to properly adjust by container query
+    margin-right: 0.25rem;
+  }
+
+  @container (min-width: 20rem) {
+    > :not(:last-child) {
+      margin-right: 0.5rem;
+    }
+
+    .cursor-help {
+      @include cat-body('s');
+    }
   }
 }
 
 .cursor-help {
-  margin: 0;
-  @include cat-body('s');
+  margin-block: 0;
+  @include cat-body('xs');
   color: cat-token('color.ui.font.muted') !important;
   text-align: center;
   flex: 1;
@@ -156,10 +153,6 @@
   &:only-child {
     text-align: center;
   }
-
-  .picker-small & {
-    @include cat-body('xs');
-  }
 }
 
 .cursor-aria {

diff --git a/core/src/components/cat-date-inline/cat-date-inline.tsx b/core/src/components/cat-date-inline/cat-date-inline.tsx
@@ -41,11 +41,6 @@ export class CatDateInline {
    */
   @Prop() weeks = false;
 
-  /**
-   * The size of the date picker.
-   */
-  @Prop() size: 's' | 'm' = 'm';
-
   /**
    * A minimum value for the date, given in local ISO 8601 date format YYYY-MM-DD.
    */
@@ -182,7 +177,7 @@ export class CatDateInline {
     const [dateStart, dateEnd] = this.getValue();
     return (
       <Host>
-        <div class={{ picker: true, 'picker-small': this.size === 's', 'picker-weeks': this.weeks }}>
+        <div class={{ picker: true, 'picker-weeks': this.weeks }}>
           <div class="picker-head">
             <cat-button
               icon="$cat:datepicker-year-prev"
@@ -259,7 +254,6 @@ export class CatDateInline {
                       'date-focusable': this.canFocus(day),
                       'date-disabled': !this.canClick(day)
                     }}
-                    size={this.size}
                     nativeAttributes={!this.canFocus(day) ? { tabindex: '-1' } : {}}
                     variant={isStartDate || isEndDate ? 'filled' : isToday ? 'outlined' : 'text'}
                     a11yLabel={this.locale.toLocalStr(day)}

diff --git a/core/src/components/cat-date-inline/readme.md b/core/src/components/cat-date-inline/readme.md
@@ -19,7 +19,6 @@ An inline date picker component to select a date.
 | `noClear` | `no-clear` | Hides the clear button.                                                       | `boolean`             | `false`     |
 | `noToday` | `no-today` | Hides the today button.                                                       | `boolean`             | `false`     |
 | `range`   | `range`    | Allow the selection of a range of dates, i.e. start and end date.             | `boolean`             | `false`     |
-| `size`    | `size`     | The size of the date picker.                                                  | `"m" \| "s"`          | `'m'`       |
 | `value`   | `value`    | The value of the control, given in local ISO 8601 date format YYYY-MM-DD.     | `string \| undefined` | `undefined` |
 | `weeks`   | `weeks`    | Show week numbers.                                                            | `boolean`             | `false`     |
 

diff --git a/core/src/components/cat-date/cat-date.scss b/core/src/components/cat-date/cat-date.scss
@@ -15,4 +15,5 @@
 
 cat-date-inline {
   margin: 1rem;
+  width: 20rem;
 }
diff --git a/vue/src/components.ts b/vue/src/components.ts
@@ -130,7 +130,6 @@ export const CatDateInline = /*@__PURE__*/ defineContainer<JSX.CatDateInline>('c
   'hint',
   'noToday',
   'weeks',
-  'size',
   'min',
   'max',
   'range',