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