feat: add value attribute to gcds-button (#635)

* feat: add value attribute to gcds-button * fix: ensure value is correctly added to submit button
cds-snc · Sep 12, 2024 · 085d964 · 085d964
1 parent 844424e
commit 085d964
Show file tree

Hide file tree

Showing 6 changed files with 37 additions and 3 deletions.
diff --git a/packages/angular/src/lib/stencil-generated/components.ts b/packages/angular/src/lib/stencil-generated/components.ts
@@ -81,15 +81,15 @@ export declare interface GcdsBreadcrumbsItem extends Components.GcdsBreadcrumbsI
 
 
 @ProxyCmp({
-  inputs: ['buttonId', 'buttonRole', 'disabled', 'download', 'href', 'name', 'rel', 'size', 'target', 'type'],
+  inputs: ['buttonId', 'buttonRole', 'disabled', 'download', 'href', 'name', 'rel', 'size', 'target', 'type', 'value'],
   outputs: ['gcdsClick', 'gcdsFocus', 'gcdsBlur']
 })
 @Component({
   selector: 'gcds-button',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['buttonId', 'buttonRole', 'disabled', 'download', 'href', 'name', 'rel', 'size', 'target', 'type'],outputs: ['gcdsClick', 'gcdsFocus', 'gcdsBlur'],
+  inputs: ['buttonId', 'buttonRole', 'disabled', 'download', 'href', 'name', 'rel', 'size', 'target', 'type', 'value'],outputs: ['gcdsClick', 'gcdsFocus', 'gcdsBlur'],
 })
 export class GcdsButton {
   protected el: HTMLElement;

diff --git a/packages/vue/lib/components.ts b/packages/vue/lib/components.ts
@@ -36,6 +36,7 @@ export const GcdsButton = /*@__PURE__*/ defineContainer<JSX.GcdsButton>('gcds-bu
   'buttonId',
   'name',
   'disabled',
+  'value',
   'href',
   'rel',
   'target',

diff --git a/packages/web/src/components.d.ts b/packages/web/src/components.d.ts
@@ -91,6 +91,10 @@ export namespace Components {
           * Set button types
          */
         "type": 'submit' | 'reset' | 'button' | 'link';
+        /**
+          * The value attribute specifies the value for a <button> element.
+         */
+        "value": string;
     }
     interface GcdsCard {
         /**
@@ -1891,6 +1895,10 @@ declare namespace LocalJSX {
           * Set button types
          */
         "type"?: 'submit' | 'reset' | 'button' | 'link';
+        /**
+          * The value attribute specifies the value for a <button> element.
+         */
+        "value"?: string;
     }
     interface GcdsCard {
         /**

diff --git a/packages/web/src/components/gcds-button/gcds-button.tsx b/packages/web/src/components/gcds-button/gcds-button.tsx
@@ -85,6 +85,11 @@ export class GcdsButton {
    */
   @Prop() disabled: boolean;
 
+  /**
+   * The value attribute specifies the value for a <button> element.
+   */
+    @Prop() value: string;
+
   /**
    * Link props
    */
@@ -165,7 +170,9 @@ export class GcdsButton {
   }
 
   private handleClick = (e: Event) => {
-    const event = emitEvent(e, this.gcdsClick);
+    // Check button type, only emit value if type is "submit"
+    const emitValue = this.type === 'submit' ? this.value : undefined;
+    const event = emitEvent(e, this.gcdsClick, emitValue);
 
     if (event) {
       if (!this.disabled && this.type != 'button' && this.type != 'link') {
@@ -180,6 +187,9 @@ export class GcdsButton {
           if (this.name) {
             formButton.name = this.name;
           }
+          if (this.value) {
+            formButton.value = this.value;
+          }
           formButton.style.display = 'none';
           form.appendChild(formButton);
           formButton.click();
@@ -205,6 +215,7 @@ export class GcdsButton {
       rel,
       target,
       download,
+      value,
       inheritedAttributes,
     } = this;
 
@@ -215,6 +226,7 @@ export class GcdsButton {
             type: type,
             ariaDisabled: disabled,
             name,
+            value,
           }
         : {
             href,

diff --git a/packages/web/src/components/gcds-button/readme.md b/packages/web/src/components/gcds-button/readme.md
@@ -17,6 +17,7 @@
 | `size`       | `size`        | Set the button size                                                                                                                                | `"regular" \| "small"`                      | `'regular'` |
 | `target`     | `target`      | The target attribute specifies where to open the linked document                                                                                   | `string`                                    | `undefined` |
 | `type`       | `type`        | Set button types                                                                                                                                   | `"button" \| "link" \| "reset" \| "submit"` | `'button'`  |
+| `value`      | `value`       | The value attribute specifies the value for a <button> element.                                                                                    | `string`                                    | `undefined` |
 
 
 ## Events

diff --git a/packages/web/src/components/gcds-button/stories/gcds-button.stories.js b/packages/web/src/components/gcds-button/stories/gcds-button.stories.js
@@ -58,6 +58,13 @@ export default {
         defaultValue: { summary: 'button' },
       },
     },
+    value: {
+      control: 'text',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: '-' },
+      },
+    },
 
     // Link props
     download: {
@@ -142,6 +149,7 @@ const Template = args =>
     args.size != 'regular' ? `size="${args.size}"` : null
   } ${args.disabled ? `disabled` : null} ${
     args.name ? `name="${args.name}"` : null
+  } ${ args.value ? `value="${args.value}"` : null
   } ${args.type == 'link' && args.href ? `href="${args.href}"` : null} ${
     args.type == 'link' && args.rel ? `rel="${args.rel}"` : null
   } ${args.type == 'link' && args.target ? `target="${args.target}"` : null} ${
@@ -157,6 +165,7 @@ const Template = args =>
     args.size != 'regular' ? `size="${args.size}"` : null
   } ${args.disabled ? `disabled` : null} ${
     args.name ? `name="${args.name}"` : null
+  } ${ args.value ? `value="${args.value}"` : null
   } ${args.type == 'link' && args.href ? `href="${args.href}"` : null} ${
     args.type == 'link' && args.rel ? `rel="${args.rel}"` : null
   } ${args.type == 'link' && args.target ? `target="${args.target}"` : null} ${
@@ -260,6 +269,7 @@ const TemplatePlayground = args => `
   ${args.size != 'regular' ? `size="${args.size}"` : null}
   ${args.disabled ? `disabled` : null}
   ${args.name ? `name="${args.name}"` : null}
+  ${args.value ? `value="${args.value}"` : null}
   ${args.type == 'link' && args.href ? `href="${args.href}"` : null}
   ${args.type == 'link' && args.rel ? `rel="${args.rel}"` : null}
   ${args.type == 'link' && args.target ? `target="${args.target}"` : null}
@@ -365,6 +375,7 @@ Props.args = {
   size: 'regular',
   disabled: false,
   name: '',
+  value: '',
   href: '',
   rel: '',
   target: '',
@@ -382,6 +393,7 @@ Playground.args = {
   size: 'regular',
   disabled: false,
   name: '',
+  value: '',
   href: '',
   rel: '',
   target: '',