From 924c0fc64ddc15d74315ed16ade93a2b72fd81f8 Mon Sep 17 00:00:00 2001 From: Tobias Heim Galindo <81302108+TobiasHeimGalindo@users.noreply.github.com> Date: Mon, 13 Nov 2023 16:06:04 +0100 Subject: [PATCH] feat(elements|ino-segment-button): add type property (#1095) --- .../src/generated/components.ts | 4 ++-- packages/elements-vue/src/proxies.ts | 1 + packages/elements/src/components.d.ts | 8 +++++++ .../ino-segment-button/ino-segment-button.tsx | 21 +++++++++++++++++-- .../components/ino-segment-button/readme.md | 15 ++++++------- packages/storybook/elements-stencil-docs.json | 21 +++++++++++++++++++ .../ino-segment-button.stories.ts | 2 ++ 7 files changed, 61 insertions(+), 11 deletions(-) diff --git a/packages/elements-angular/src/generated/components.ts b/packages/elements-angular/src/generated/components.ts index 11b3045eb1..cad49ebf86 100644 --- a/packages/elements-angular/src/generated/components.ts +++ b/packages/elements-angular/src/generated/components.ts @@ -991,14 +991,14 @@ export declare interface InoRange extends Components.InoRange { @ProxyCmp({ - inputs: ['checked', 'dense', 'disabled', 'name', 'value'] + inputs: ['checked', 'dense', 'disabled', 'name', 'type', 'value'] }) @Component({ selector: 'ino-segment-button', changeDetection: ChangeDetectionStrategy.OnPush, template: '', // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property - inputs: ['checked', 'dense', 'disabled', 'name', 'value'], + inputs: ['checked', 'dense', 'disabled', 'name', 'type', 'value'], }) export class InoSegmentButton { protected el: HTMLElement; diff --git a/packages/elements-vue/src/proxies.ts b/packages/elements-vue/src/proxies.ts index 16aaf472fd..0a59ac7f39 100644 --- a/packages/elements-vue/src/proxies.ts +++ b/packages/elements-vue/src/proxies.ts @@ -433,6 +433,7 @@ export const InoSegmentButton = /*@__PURE__*/ defineContainer) => void; + /** + * The type of the internal button in the element. This can be 'submit', 'reset', or 'button'. If not specified, the default type is 'submit'. + */ + "type"?: string; /** * Value of the element */ diff --git a/packages/elements/src/components/ino-segment-button/ino-segment-button.tsx b/packages/elements/src/components/ino-segment-button/ino-segment-button.tsx index 01d18067a8..22c4787bca 100644 --- a/packages/elements/src/components/ino-segment-button/ino-segment-button.tsx +++ b/packages/elements/src/components/ino-segment-button/ino-segment-button.tsx @@ -1,7 +1,16 @@ -import {Component, ComponentInterface, Element, Event, EventEmitter, h, Host, Prop,} from '@stencil/core'; +import { + Component, + ComponentInterface, + Element, + Event, + EventEmitter, + h, + Host, + Prop, +} from '@stencil/core'; import classNames from 'classnames'; -import {generateUniqueId} from '../../util/component-utils'; +import { generateUniqueId } from '../../util/component-utils'; /** * @slot default - Label of the button @@ -41,6 +50,13 @@ export class InoSegmentButton implements ComponentInterface { */ @Prop() value?: string; + /** + * The type of the internal button in the element. + * This can be 'submit', 'reset', or 'button'. + * If not specified, the default type is 'submit'. + */ + @Prop() type?: string; + /** * Emits if the user interacts with the button. * If the button is disabled or checked, the event will not be emitted. @@ -77,6 +93,7 @@ export class InoSegmentButton implements ComponentInterface { disabled={this.disabled} id={this.buttonId} name={this.name} + type={this.type} > diff --git a/packages/elements/src/components/ino-segment-button/readme.md b/packages/elements/src/components/ino-segment-button/readme.md index 3e087ab2d1..0a1eab46ac 100644 --- a/packages/elements/src/components/ino-segment-button/readme.md +++ b/packages/elements/src/components/ino-segment-button/readme.md @@ -42,13 +42,14 @@ class MyComponent extends Component { ## Properties -| Property | Attribute | Description | Type | Default | -| ---------- | ---------- | ----------------------------------------- | --------- | ----------- | -| `checked` | `checked` | Activates the button | `boolean` | `false` | -| `dense` | `dense` | Slightly decreases the size of the button | `boolean` | `false` | -| `disabled` | `disabled` | Disables the button | `boolean` | `false` | -| `name` | `name` | Name of the element | `string` | `undefined` | -| `value` | `value` | Value of the element | `string` | `undefined` | +| Property | Attribute | Description | Type | Default | +| ---------- | ---------- | ------------------------------------------------------------------------------------------------------------------------------------------- | --------- | ----------- | +| `checked` | `checked` | Activates the button | `boolean` | `false` | +| `dense` | `dense` | Slightly decreases the size of the button | `boolean` | `false` | +| `disabled` | `disabled` | Disables the button | `boolean` | `false` | +| `name` | `name` | Name of the element | `string` | `undefined` | +| `type` | `type` | The type of the internal button in the element. This can be 'submit', 'reset', or 'button'. If not specified, the default type is 'submit'. | `string` | `undefined` | +| `value` | `value` | Value of the element | `string` | `undefined` | ## Events diff --git a/packages/storybook/elements-stencil-docs.json b/packages/storybook/elements-stencil-docs.json index d3df928919..13d8d5ce2b 100644 --- a/packages/storybook/elements-stencil-docs.json +++ b/packages/storybook/elements-stencil-docs.json @@ -8547,6 +8547,27 @@ "optional": true, "required": false }, + { + "name": "type", + "type": "string", + "complexType": { + "original": "string", + "resolved": "string", + "references": {} + }, + "mutable": false, + "attr": "type", + "reflectToAttr": false, + "docs": "The type of the internal button in the element.\nThis can be 'submit', 'reset', or 'button'.\nIf not specified, the default type is 'submit'.", + "docsTags": [], + "values": [ + { + "type": "string" + } + ], + "optional": true, + "required": false + }, { "name": "value", "type": "string", diff --git a/packages/storybook/src/stories/ino-segment-button/ino-segment-button.stories.ts b/packages/storybook/src/stories/ino-segment-button/ino-segment-button.stories.ts index c50a83bc11..8917c6e4a3 100644 --- a/packages/storybook/src/stories/ino-segment-button/ino-segment-button.stories.ts +++ b/packages/storybook/src/stories/ino-segment-button/ino-segment-button.stories.ts @@ -23,6 +23,7 @@ export default { disabled: false, name: '', value: '', + type: '', }, } as Meta; @@ -39,6 +40,7 @@ const template = new TemplateGenerator( disabled="${args.disabled}" name="${args.name}" value="${args.value}" + type="${args.type}" @checkedChange="${checkedChangeHandler}" > Segment Button Label