Merge pull request smeup#2003 from smeup/feat/ExtraLargeSizing

apuliasoft · Jul 30, 2024 · 47f64e0 · 47f64e0
2 parents c61223a + 1c7b771
commit 47f64e0
Show file tree

Hide file tree

Showing 10 changed files with 86 additions and 22 deletions.
diff --git a/packages/ketchup-showcase/src/views/components/basic/textfield/examples/TextfieldSizing.vue b/packages/ketchup-showcase/src/views/components/basic/textfield/examples/TextfieldSizing.vue
@@ -9,6 +9,11 @@
       <br />
       <div class="demo-container">
         <div class="kup-container">
+          <kup-text-field
+            label="Size: Extra Small"
+            initial-value="Extra Small"
+            sizing="extra-small"
+          ></kup-text-field>
           <kup-text-field
             label="Size: Small"
             initial-value="Small"
@@ -26,9 +31,9 @@
             sizing="large"
           ></kup-text-field>
           <kup-text-field
-            label="Size: Max Large"
-            initial-value="Max Large"
-            sizing="max-large"
+            label="Size: Extra Large"
+            initial-value="Extra Large"
+            sizing="extra-large"
           ></kup-text-field>
         </div>
         <p class="centered">Sample markup with 'small' sizing</p>

diff --git a/packages/ketchup/src/button.html b/packages/ketchup/src/button.html
@@ -73,10 +73,11 @@ <h3>Material Buttons (widget)</h3>
         </div>
         <!-- -->
         <h4>Size:</h4>
+        <kup-button label="Extra Small" sizing="extra-small"></kup-button>
         <kup-button label="Small" sizing="small"></kup-button>
         <kup-button label="Medium" sizing="medium"></kup-button>
         <kup-button label="Large" sizing="large"></kup-button>
-        <kup-button label="Max Large" sizing="max-large"></kup-button>
+        <kup-button label="Extra Large" sizing="extra-large"></kup-button>
 
         <h4>Neutral:</h4>
         <kup-button label="Raised" class="kup-neutral"></kup-button>

diff --git a/packages/ketchup/src/components.d.ts b/packages/ketchup/src/components.d.ts
@@ -1742,6 +1742,11 @@ export namespace Components {
           * @param value - Value to be set.
          */
         "setValue": (value: string) => Promise<void>;
+        /**
+          * Sets the sizing of the textfield of the datepicker
+          * @default KupComponentSizing.MEDIUM
+         */
+        "sizing": KupComponentSizing;
     }
     interface KupDialog {
         /**
@@ -3974,7 +3979,7 @@ export namespace Components {
          */
         "size": number;
         /**
-          * Sets the type of the button
+          * Sets the sizing of the textfield
           * @default KupComponentSizing.MEDIUM
          */
         "sizing": KupComponentSizing;
@@ -6909,6 +6914,11 @@ declare namespace LocalJSX {
         "onKup-datepicker-input"?: (event: KupDatePickerCustomEvent<KupDatePickerEventPayload>) => void;
         "onKup-datepicker-itemclick"?: (event: KupDatePickerCustomEvent<KupDatePickerEventPayload>) => void;
         "onKup-datepicker-textfieldsubmit"?: (event: KupDatePickerCustomEvent<KupDatePickerEventPayload>) => void;
+        /**
+          * Sets the sizing of the textfield of the datepicker
+          * @default KupComponentSizing.MEDIUM
+         */
+        "sizing"?: KupComponentSizing;
     }
     interface KupDialog {
         /**
@@ -8763,7 +8773,7 @@ declare namespace LocalJSX {
          */
         "size"?: number;
         /**
-          * Sets the type of the button
+          * Sets the sizing of the textfield
           * @default KupComponentSizing.MEDIUM
          */
         "sizing"?: KupComponentSizing;

diff --git a/packages/ketchup/src/components/kup-date-picker/kup-date-picker.tsx b/packages/ketchup/src/components/kup-date-picker/kup-date-picker.tsx
@@ -13,9 +13,10 @@ import {
     VNode,
     Watch,
 } from '@stencil/core';
-import type {
+import {
     GenericObject,
     KupComponent,
+    KupComponentSizing,
     KupEventPayload,
 } from '../../types/GenericTypes';
 import {
@@ -89,6 +90,11 @@ export class KupDatePicker {
      * @default ""
      */
     @Prop() initialValue: string = '';
+    /**
+     * Sets the sizing of the textfield of the datepicker
+     * @default KupComponentSizing.MEDIUM
+     */
+    @Prop() sizing: KupComponentSizing = KupComponentSizing.MEDIUM;
 
     /*-------------------------------------------------*/
     /*       I n t e r n a l   V a r i a b l e s       */
@@ -508,6 +514,7 @@ export class KupDatePicker {
         const fullWidth = this.rootElement.classList.contains('kup-full-width');
         const textfieldData: FTextFieldProps = {
             ...this.data['kup-text-field'],
+            sizing: this.sizing,
         };
         if (!textfieldData.icon) {
             textfieldData.icon = 'calendar';

diff --git a/packages/ketchup/src/components/kup-text-field/kup-text-field.tsx b/packages/ketchup/src/components/kup-text-field/kup-text-field.tsx
@@ -210,7 +210,7 @@ export class KupTextField {
      */
     @Prop() size: number = null;
     /**
-     * Sets the type of the button
+     * Sets the sizing of the textfield
      * @default KupComponentSizing.MEDIUM
      */
     @Prop() sizing: KupComponentSizing = KupComponentSizing.MEDIUM;

diff --git a/packages/ketchup/src/date-picker.html b/packages/ketchup/src/date-picker.html
@@ -50,10 +50,31 @@ <h4>init on Sunday</h4>
             id="date-picker2"
             first-day-index="0"
         ></kup-date-picker>
-        <h4>init on Tuesday</h4>
+        <h4>Sizing</h4>
+
         <kup-date-picker
             id="date-picker3"
             first-day-index="2"
+            sizing="extra-small"
+        ></kup-date-picker>
+        <kup-date-picker
+            id="date-picker4"
+            first-day-index="2"
+            sizing="small"
+        ></kup-date-picker>
+        <kup-date-picker
+            id="date-picker5"
+            first-day-index="2"
+        ></kup-date-picker>
+        <kup-date-picker
+            id="date-picker6"
+            first-day-index="2"
+            sizing="large"
+        ></kup-date-picker>
+        <kup-date-picker
+            id="date-picker7"
+            first-day-index="2"
+            sizing="extra-large"
         ></kup-date-picker>
 
         <script>

diff --git a/packages/ketchup/src/f-components/f-button/f-button.scss b/packages/ketchup/src/f-components/f-button/f-button.scss
@@ -74,10 +74,11 @@
   --kup_button_font_size: var(--kup-button-font-size, var(--kup-font-size));
   --kup_button_font_weight: var(--kup-button-font-weight, 400);
   --kup_button_height: var(--kup-button-height, 3em);
+  --kup_button_extra_small_height: var(--kup-button-extra-small-height, 20px);
   --kup_button_small_height: var(--kup-button-small-height, 32px);
   --kup_button_medium_height: var(--kup-button-medium-height, 40px);
   --kup_button_large_height: var(--kup-button-large-height, 48px);
-  --kup_button_max_large_height: var(--kup-button-max-large-height, 64px);
+  --kup_button_extra_large_height: var(--kup-button-extra-large-height, 64px);
   --kup_button_padding: var(--kup-button-padding, 0 1.25em);
   --kup_button_gap: var(--kup-button-gap, --kup-space-03);
   --kup_button_text_transform: var(--kup-button-text-transform, capitalize);
@@ -151,6 +152,10 @@
       margin-right: -0.25em;
     }
 
+    &.button--extra-small {
+      height: var(--kup_button_extra_small_height);
+    }
+
     &.button--small {
       height: var(--kup_button_small_height);
     }
@@ -163,8 +168,8 @@
       height: var(--kup_button_large_height);
     }
 
-    &.button--max-large {
-      height: var(--kup_button_max_large_height);
+    &.button--extra-large {
+      height: var(--kup_button_extra_large_height);
     }
 
     &.button--left {

diff --git a/packages/ketchup/src/f-components/f-text-field/f-text-field.scss b/packages/ketchup/src/f-components/f-text-field/f-text-field.scss
@@ -35,11 +35,15 @@
       --kup-textfield-fullwidth-height,
       40px
     );
+    --kup_textfield_extra_small_height: var(
+      --kup-textfield-extra-small-height,
+      20px
+    );
     --kup_textfield_small_height: var(--kup-textfield-small-height, 32px);
     --kup_textfield_medium_height: var(--kup-textfield-medium-height, 40px);
     --kup_textfield_large_height: var(--kup-textfield-large-height, 48px);
-    --kup_textfield_max_large_height: var(
-      --kup-textfield-max-large-height,
+    --kup_textfield_extra_large_height: var(
+      --kup-textfield-extra-large-height,
       64px
     );
     --kup_textfield_fullwidth_padding: var(
@@ -190,6 +194,10 @@
         }
       }
 
+      &.mdc-text-field--extra-small {
+        height: var(--kup_textfield_extra_small_height) !important;
+      }
+
       &.mdc-text-field--small {
         height: var(--kup_textfield_small_height) !important;
       }
@@ -202,8 +210,8 @@
         height: var(--kup_textfield_large_height) !important;
       }
 
-      &.mdc-text-field--max-large {
-        height: var(--kup_textfield_max_large_height) !important;
+      &.mdc-text-field--extra-large {
+        height: var(--kup_textfield_extra_large_height) !important;
       }
 
       &.mdc-text-field--focused:not(.mdc-text-field--disabled) {

diff --git a/packages/ketchup/src/text-field.html b/packages/ketchup/src/text-field.html
@@ -144,6 +144,11 @@ <h3>Material Text Field (widget)</h3>
         ></kup-text-field>
 
         <h3>Size:</h3>
+        <kup-text-field
+            label="Size: Extra Small"
+            initial-value="Extra Small"
+            sizing="extra-small"
+        ></kup-text-field>
         <kup-text-field
             label="Size: Small"
             initial-value="Small"
@@ -160,9 +165,9 @@ <h3>Size:</h3>
             sizing="large"
         ></kup-text-field>
         <kup-text-field
-            label="Size: Max Large"
-            initial-value="Max Large"
-            sizing="max-large"
+            label="Size: Extra Large"
+            initial-value="Extra Large"
+            sizing="extra-large"
         ></kup-text-field>
 
         <h3>Variants:</h3>

diff --git a/packages/ketchup/src/types/GenericTypes.ts b/packages/ketchup/src/types/GenericTypes.ts
@@ -112,14 +112,16 @@ export enum KupTagNames {
 /**
  * Sizing options for the button/text-field components.
  * @enum {string}
+ * @property {string} EXTRA_SMALL - Small size: height = 20px
  * @property {string} SMALL - Small size: height = 32px
  * @property {string} MEDIUM - Medium size: height = 40px (default)
  * @property {string} LARGE - Large size: height = 48px
- * @property {string} MAX - Max large size: height = 64px
+ * @property {string} EXTRA_LARGE - Max large size: height = 64px
  */
 export enum KupComponentSizing {
+    EXTRA_SMALL = 'extra-small',
     SMALL = 'small',
     MEDIUM = 'medium',
     LARGE = 'large',
-    MAX = 'max-large',
-}
+    EXTRA_LARGE = 'extra-large',
+}