Merge pull request smeup#1988 from smeup/feat/buttonfixes

apuliasoft · Jul 12, 2024 · c67c5ec · c67c5ec
2 parents c82d3c2 + 851937a
commit c67c5ec
Show file tree

Hide file tree

Showing 9 changed files with 42 additions and 31 deletions.
diff --git a/packages/ketchup/src/button.html b/packages/ketchup/src/button.html
@@ -197,7 +197,15 @@ <h4>ALIGN</h4>
             class="shaped"
             styling="outlined"
             label="Shaped & outlined"
-            aligncontent="left"
+            content-align="left"
+            icon="favorite"
+            style="width: 250px"
+        ></kup-button>
+        <kup-button
+            class="shaped"
+            styling="outlined "
+            label="Shaped & outlined"
+            content-align="left"
             icon="favorite"
             style="width: 250px"
         ></kup-button>

diff --git a/packages/ketchup/src/components.d.ts b/packages/ketchup/src/components.d.ts
@@ -497,11 +497,6 @@ export namespace Components {
         "swipeDisabled": boolean;
     }
     interface KupButton {
-        /**
-          * Sets the type of the button.
-          * @default null
-         */
-        "aligncontent": FButtonAlign;
         /**
           * Sets the type of the button.
           * @default null
@@ -512,6 +507,11 @@ export namespace Components {
           * @default false
          */
         "checked": boolean;
+        /**
+          * Sets the type of the button.
+          * @default null
+         */
+        "contentAlign": FButtonAlign;
         /**
           * Custom style of the component.
           * @default ""
@@ -585,16 +585,16 @@ export namespace Components {
         "trailingIcon": boolean;
     }
     interface KupButtonList {
-        /**
-          * Sets the type of the button.
-          * @default null
-         */
-        "aligncontent": FButtonAlign;
         /**
           * Number of columns.
           * @default 0
          */
         "columns": number;
+        /**
+          * Sets the type of the button.
+          * @default null
+         */
+        "contentAlign": FButtonAlign;
         /**
           * Custom style of the component.
           * @default ""
@@ -5848,11 +5848,6 @@ declare namespace LocalJSX {
         "swipeDisabled"?: boolean;
     }
     interface KupButton {
-        /**
-          * Sets the type of the button.
-          * @default null
-         */
-        "aligncontent"?: FButtonAlign;
         /**
           * Sets the type of the button.
           * @default null
@@ -5863,6 +5858,11 @@ declare namespace LocalJSX {
           * @default false
          */
         "checked"?: boolean;
+        /**
+          * Sets the type of the button.
+          * @default null
+         */
+        "contentAlign"?: FButtonAlign;
         /**
           * Custom style of the component.
           * @default ""
@@ -5933,16 +5933,16 @@ declare namespace LocalJSX {
         "trailingIcon"?: boolean;
     }
     interface KupButtonList {
-        /**
-          * Sets the type of the button.
-          * @default null
-         */
-        "aligncontent"?: FButtonAlign;
         /**
           * Number of columns.
           * @default 0
          */
         "columns"?: number;
+        /**
+          * Sets the type of the button.
+          * @default null
+         */
+        "contentAlign"?: FButtonAlign;
         /**
           * Custom style of the component.
           * @default ""

diff --git a/packages/ketchup/src/components/kup-button-list/kup-button-list-declarations.ts b/packages/ketchup/src/components/kup-button-list/kup-button-list-declarations.ts
@@ -11,6 +11,7 @@ import {
  * Used to export every prop in an object.
  */
 export enum KupButtonListProps {
+    contentAlign = 'Manage the align contents of the button. It could be right, left, center, around, evenly, between. Center is the default',
     columns = 'Number of columns.',
     customStyle = 'Custom style of the component.',
     data = 'Props of the sub-components.',

diff --git a/packages/ketchup/src/components/kup-button-list/kup-button-list.tsx b/packages/ketchup/src/components/kup-button-list/kup-button-list.tsx
@@ -64,7 +64,7 @@ export class KupButtonList {
      * Sets the type of the button.
      * @default null
      */
-    @Prop() aligncontent: FButtonAlign = FButtonAlign.CENTER;
+    @Prop() contentAlign: FButtonAlign = FButtonAlign.CENTER;
     /**
      * Number of columns.
      * @default 0
@@ -222,7 +222,7 @@ export class KupButtonList {
         }
 
         const props: FButtonProps = {
-            aligncontent: data.aligncontent,
+            contentAlign: data.contentAlign,
             checked: data.checked,
             disabled: data.disabled,
             fullHeight: data.fullHeight,
@@ -306,8 +306,8 @@ export class KupButtonList {
         if (this.styling != null && this.styling.trim() != '') {
             data.styling = this.styling;
         }
-        if (this.aligncontent != null && this.aligncontent.trim() != '') {
-            data.aligncontent = this.aligncontent;
+        if (this.contentAlign) {
+            data.contentAlign = this.contentAlign;
         }
         if (data.icon == null) {
             data.icon = node.icon;

diff --git a/packages/ketchup/src/components/kup-button/kup-button-declarations.ts b/packages/ketchup/src/components/kup-button/kup-button-declarations.ts
@@ -8,7 +8,7 @@ export enum KupButtonProps {
     buttonType = 'Sets the type of the button.',
     checked = 'When set to true, the icon button state will be on.',
     customStyle = 'Custom style of the component.',
-    contentAlign = 'Define the content\'s align of the button. Aligns available : "left", "right". The default is "center"',
+    contentAlign = 'Manage the align contents of the button. It could be right, left, center, around, evenly, between. Center is the default',
     disabled = 'Defaults at false. When set to true, the component is disabled.',
     icon = 'When set, the button will show this icon.',
     iconOff = 'When set, the icon button off state will show this icon. Otherwise, an outlined version of the icon prop will be displayed.',

diff --git a/packages/ketchup/src/components/kup-button/kup-button.tsx b/packages/ketchup/src/components/kup-button/kup-button.tsx
@@ -71,7 +71,7 @@ export class KupButton {
      * Sets the type of the button.
      * @default null
      */
-    @Prop() aligncontent: FButtonAlign = FButtonAlign.CENTER;
+    @Prop() contentAlign: FButtonAlign = FButtonAlign.CENTER;
     /**
      * Custom style of the component.
      * @default ""
@@ -271,7 +271,7 @@ export class KupButton {
         const props: FButtonProps = {
             buttonType: this.buttonType,
             checked: this.checked,
-            aligncontent: this.aligncontent,
+            contentAlign: this.contentAlign,
             danger: this.rootElement.classList.contains('kup-danger')
                 ? true
                 : false,

diff --git a/packages/ketchup/src/f-components/f-button/f-button-declarations.ts b/packages/ketchup/src/f-components/f-button/f-button-declarations.ts
@@ -5,7 +5,7 @@ import type { FComponent, KupComponentSizing } from '../../types/GenericTypes';
 export interface FButtonProps extends FComponent {
     buttonType?: string;
     checked?: boolean;
-    aligncontent?: FButtonAlign;
+    contentAlign?: FButtonAlign;
     disabled?: boolean;
     fullHeight?: boolean;
     fullWidth?: boolean;

diff --git a/packages/ketchup/src/f-components/f-button/f-button.scss b/packages/ketchup/src/f-components/f-button/f-button.scss
@@ -99,7 +99,7 @@
     cursor: pointer;
     display: inline-flex;
     height: var(--kup_button_height);
-    justify-content: space-between;
+    justify-content: center;
     gap: var(--kup_button_gap);
     min-width: 64px;
     outline: none;
@@ -272,6 +272,7 @@
       &:hover {
         --kup_button_background_color_hover: var(--kup-primary-color-60);
         --kup_button_text_color_hover: var(--kup-primary-color-0);
+        --kup_button_text_color: var(--kup-primary-color-0);
         color: var(--kup_button_text_color_hover);
         background-color: var(--kup_button_background_color_hover);
         border-color: transparent;
@@ -285,6 +286,7 @@
       &:focus {
         --kup_button_background_color_focus: var(--kup-primary-color-70);
         --kup_button_text_color_focus: var(--kup-primary-color-0);
+        --kup_button_text_color: var(--kup-primary-color-0);
         color: var(--kup_button_text_color_focus);
         background-color: var(--kup_button_background_color_focus);
       }

diff --git a/packages/ketchup/src/f-components/f-button/f-button.tsx b/packages/ketchup/src/f-components/f-button/f-button.tsx
@@ -92,7 +92,7 @@ function renderButton(props: FButtonProps): VNode {
         'button--with-spinner':
             props.showSpinner && !props.disabled ? true : false,
         [`button--${props.sizing}`]: props.sizing ? true : false,
-        [`button--${props.aligncontent}`]: props.aligncontent ? true : false,
+        [`button--${props.contentAlign}`]: props.contentAlign ? true : false,
     };
 
     const classLabelObj: Record<string, boolean> = {