Merge pull request #1791 from Infineon/1728-text-field-implement-type-password

tishoyanchev · web-flow · commit 8769b2cb8d34 · 2025-03-19T08:55:56.000+01:00
Text-field: adds type "password"
diff --git a/examples/wrapper-components/react-vite-js/package.json b/examples/wrapper-components/react-vite-js/package.json
@@ -18,7 +18,7 @@
     "test:local": "run-p preview:link watch:library"
   },
   "dependencies": {
-    "@infineon/infineon-design-system-react": "32.6.0--canary.1790.47a03e7a4a274c06c059935d12af0cc56fb8f6df.0",
+    "@infineon/infineon-design-system-react": "32.7.0--canary.1791.e7f9b303cbc5f3efbe8b9986951ed48b067187ac.0",
     "path": "^0.12.7",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"
diff --git a/examples/wrapper-components/vue-javascript/package.json b/examples/wrapper-components/vue-javascript/package.json
@@ -15,7 +15,7 @@
     "test:local": "run-p preview:link watch:library"
   },
   "dependencies": {
-    "@infineon/infineon-design-system-vue": "32.6.0--canary.1790.47a03e7a4a274c06c059935d12af0cc56fb8f6df.0",
+    "@infineon/infineon-design-system-vue": "32.7.0--canary.1791.e7f9b303cbc5f3efbe8b9986951ed48b067187ac.0",
     "@vitejs/plugin-vue": "^4.0.0",
     "@vitejs/plugin-vue-jsx": "^4.0.0",
     "vite": "^5.0.12",
diff --git a/lerna.json b/lerna.json
@@ -1,6 +1,6 @@
 {
   "$schema": "node_modules/lerna/schemas/lerna-schema.json",
-  "version": "32.6.0--canary.1790.47a03e7a4a274c06c059935d12af0cc56fb8f6df.0",
+  "version": "32.7.0--canary.1791.e7f9b303cbc5f3efbe8b9986951ed48b067187ac.0",
   "command": {
     "publish": {
       "verifyAccess": false
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/components-angular/package.json b/packages/components-angular/package.json
@@ -1,6 +1,6 @@
 {
   "name": "components-angular",
-  "version": "32.6.0--canary.1790.47a03e7a4a274c06c059935d12af0cc56fb8f6df.0",
+  "version": "32.7.0--canary.1791.e7f9b303cbc5f3efbe8b9986951ed48b067187ac.0",
   "scripts": {
     "ng": "ng",
     "start": "ng serve",
@@ -26,7 +26,7 @@
     "@angular/platform-browser": "^18.0.0",
     "@angular/platform-browser-dynamic": "^18.0.0",
     "@angular/router": "^18.0.0",
-    "@infineon/infineon-design-system-angular": "^32.6.0--canary.1790.47a03e7a4a274c06c059935d12af0cc56fb8f6df.0",
+    "@infineon/infineon-design-system-angular": "^32.7.0--canary.1791.e7f9b303cbc5f3efbe8b9986951ed48b067187ac.0",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
     "typescript": "~5.4.4",
diff --git a/packages/components-angular/projects/component-library/package.json b/packages/components-angular/projects/component-library/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@infineon/infineon-design-system-angular",
-  "version": "32.6.0--canary.1790.47a03e7a4a274c06c059935d12af0cc56fb8f6df.0",
+  "version": "32.7.0--canary.1791.e7f9b303cbc5f3efbe8b9986951ed48b067187ac.0",
   "description": "Infineon design system Stencil web components for Angular",
   "author": "Verena Lechner",
   "license": "MIT",
@@ -11,7 +11,7 @@
     "@angular/common": "^18.0.0",
     "@angular/core": "^18.0.0",
     "@infineon/design-system-tokens": "4.0.0",
-    "@infineon/infineon-design-system-stencil": "32.6.0--canary.1790.47a03e7a4a274c06c059935d12af0cc56fb8f6df.0"
+    "@infineon/infineon-design-system-stencil": "32.7.0--canary.1791.e7f9b303cbc5f3efbe8b9986951ed48b067187ac.0"
   },
   "dependencies": {
     "tslib": "^2.3.0"
diff --git a/packages/components-react/package.json b/packages/components-react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@infineon/infineon-design-system-react",
-  "version": "32.6.0--canary.1790.47a03e7a4a274c06c059935d12af0cc56fb8f6df.0",
+  "version": "32.7.0--canary.1791.e7f9b303cbc5f3efbe8b9986951ed48b067187ac.0",
   "description": "Infineon design system Stencil web components for React",
   "main": "./dist/index.js",
   "types": "./dist/types/index.d.ts",
@@ -28,7 +28,7 @@
   },
   "dependencies": {
     "@infineon/design-system-tokens": "4.0.0",
-    "@infineon/infineon-design-system-stencil": "^32.6.0--canary.1790.47a03e7a4a274c06c059935d12af0cc56fb8f6df.0",
+    "@infineon/infineon-design-system-stencil": "^32.7.0--canary.1791.e7f9b303cbc5f3efbe8b9986951ed48b067187ac.0",
     "@stencil/react-output-target": "^0.7.1"
   },
   "auto": {
diff --git a/packages/components-vue/package.json b/packages/components-vue/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@infineon/infineon-design-system-vue",
-  "version": "32.6.0--canary.1790.47a03e7a4a274c06c059935d12af0cc56fb8f6df.0",
+  "version": "32.7.0--canary.1791.e7f9b303cbc5f3efbe8b9986951ed48b067187ac.0",
   "description": "Infineon design system Stencil web components for Vue",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -30,7 +30,7 @@
   },
   "dependencies": {
     "@infineon/design-system-tokens": "4.0.0",
-    "@infineon/infineon-design-system-stencil": "^32.6.0--canary.1790.47a03e7a4a274c06c059935d12af0cc56fb8f6df.0"
+    "@infineon/infineon-design-system-stencil": "^32.7.0--canary.1791.e7f9b303cbc5f3efbe8b9986951ed48b067187ac.0"
   },
   "auto": {
     "plugins": [
diff --git a/packages/components/package.json b/packages/components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@infineon/infineon-design-system-stencil",
-  "version": "32.6.0--canary.1790.47a03e7a4a274c06c059935d12af0cc56fb8f6df.0",
+  "version": "32.7.0--canary.1791.e7f9b303cbc5f3efbe8b9986951ed48b067187ac.0",
   "private": false,
   "description": "Infineon design system Stencil web components",
   "homepage": "https://infineon.github.io/infineon-design-system-stencil",
diff --git a/packages/components/src/components/text-field/readme.md b/packages/components/src/components/text-field/readme.md
@@ -7,22 +7,23 @@
 
 ## Properties
 
-| Property         | Attribute          | Description | Type      | Default         |
-| ---------------- | ------------------ | ----------- | --------- | --------------- |
-| `autocomplete`   | `autocomplete`     |             | `string`  | `'on'`          |
-| `caption`        | `caption`          |             | `string`  | `""`            |
-| `disabled`       | `disabled`         |             | `boolean` | `false`         |
-| `error`          | `error`            |             | `boolean` | `false`         |
-| `icon`           | `icon`             |             | `string`  | `""`            |
-| `label`          | `label`            |             | `string`  | `""`            |
-| `maxlength`      | `maxlength`        |             | `number`  | `undefined`     |
-| `optional`       | `optional`         |             | `boolean` | `false`         |
-| `placeholder`    | `placeholder`      |             | `string`  | `"Placeholder"` |
-| `required`       | `required`         |             | `boolean` | `false`         |
-| `showDeleteIcon` | `show-delete-icon` |             | `boolean` | `false`         |
-| `size`           | `size`             |             | `string`  | `'m'`           |
-| `success`        | `success`          |             | `boolean` | `false`         |
-| `value`          | `value`            |             | `string`  | `''`            |
+| Property         | Attribute          | Description | Type                   | Default         |
+| ---------------- | ------------------ | ----------- | ---------------------- | --------------- |
+| `autocomplete`   | `autocomplete`     |             | `string`               | `'on'`          |
+| `caption`        | `caption`          |             | `string`               | `""`            |
+| `disabled`       | `disabled`         |             | `boolean`              | `false`         |
+| `error`          | `error`            |             | `boolean`              | `false`         |
+| `icon`           | `icon`             |             | `string`               | `""`            |
+| `label`          | `label`            |             | `string`               | `""`            |
+| `maxlength`      | `maxlength`        |             | `number`               | `undefined`     |
+| `optional`       | `optional`         |             | `boolean`              | `false`         |
+| `placeholder`    | `placeholder`      |             | `string`               | `"Placeholder"` |
+| `required`       | `required`         |             | `boolean`              | `false`         |
+| `showDeleteIcon` | `show-delete-icon` |             | `boolean`              | `false`         |
+| `size`           | `size`             |             | `string`               | `'m'`           |
+| `success`        | `success`          |             | `boolean`              | `false`         |
+| `type`           | `type`             |             | `"password" \| "text"` | `'text'`        |
+| `value`          | `value`            |             | `string`               | `''`            |
 
 
 ## Events
diff --git a/packages/components/src/components/text-field/text-field.stories.ts b/packages/components/src/components/text-field/text-field.stories.ts
@@ -20,7 +20,8 @@ export default {
     showDeleteIcon: false,
     maxlength: '',
     value: '',
-    autocomplete: 'on'
+    autocomplete: 'on',
+    type: 'text'
   },
 
   argTypes: {
@@ -152,6 +153,20 @@ export default {
         }
       }
     },
+    type: {
+      description: 'Sets the type attribute. "Text" by default.',
+      options: ['text', 'password'],
+      control: 'radio',
+      table: {
+        category: 'ifx-text-field props',
+        type: {
+          summary: 'string'
+        },
+        defaultValue: {
+          summary: 'text'
+        }
+      }
+    },
     ifxInput: {
       action: 'ifxInput',
       description: 'Custom event emitted on input change.',
@@ -167,7 +182,7 @@ export default {
   },
 };
 
-const DefaultTemplate = ({ error, disabled, success, size, placeholder, label, caption, icon, required, optional, name, maxlength, showDeleteIcon, value, autocomplete }) => {
+const DefaultTemplate = ({ error, disabled, success, size, placeholder, label, caption, icon, required, optional, name, maxlength, showDeleteIcon, value, autocomplete, type }) => {
   const element = document.createElement('ifx-text-field');
   element.setAttribute('error', error);
   element.setAttribute('disabled', disabled);
@@ -182,6 +197,7 @@ const DefaultTemplate = ({ error, disabled, success, size, placeholder, label, c
   element.setAttribute('show-delete-icon', showDeleteIcon);
   element.setAttribute('value', value);
   element.setAttribute('autocomplete', autocomplete);
+  element.setAttribute('type', type);
   if (maxlength) element.setAttribute('maxlength', maxlength);
 
   element.addEventListener('ifxInput', action('ifxInput'));
diff --git a/packages/components/src/components/text-field/text-field.tsx b/packages/components/src/components/text-field/text-field.tsx
@@ -1,4 +1,4 @@
-import { Component, h, Event, Element, Prop, EventEmitter, Watch, Method, AttachInternals } from '@stencil/core';
+import { Component, h, Event, Element, Prop, EventEmitter, Watch, Method, AttachInternals, State } from '@stencil/core';
  
 
 @Component({
@@ -25,6 +25,8 @@ export class TextField {
   @Prop() maxlength?: number;
   @Prop() showDeleteIcon: boolean = false;
   @Prop() autocomplete: string = 'on'
+  @Prop() type: 'text' | 'password' = 'text';
+  @State() internalType: string;
   @Event() ifxInput: EventEmitter<String>;
   // @Prop({ reflect: true })
   // resetOnSubmit: boolean = false;
@@ -57,11 +59,19 @@ export class TextField {
     this.ifxInput.emit(this.value);
   }
 
+  handleTypeProp() { 
+   this.internalType = this.type === 'text' || this.type === 'password' ? this.type : 'text'
+  }
+
   formResetCallback() {
     this.internals.setValidity({});
     this.internals.setFormValue("");
   }
 
+  componentWillLoad() { 
+    this.handleTypeProp()
+  }
+
   render() {
     return (
       <div aria-label="a text field for user input" aria-value={this.value} aria-disabled={this.disabled} class={`textInput__container ${this.disabled ? 'disabled' : ""}`}>
@@ -87,7 +97,7 @@ export class TextField {
               ref={(el) => (this.inputElement = el)}
               disabled={this.disabled}
               autocomplete={this.autocomplete}
-              type="text"
+              type={this.internalType}
               id='text-field'
               value={this.value}
               onInput={() => this.handleInput()}
diff --git a/packages/components/src/stories/foundations/Tokens.mdx b/packages/components/src/stories/foundations/Tokens.mdx
@@ -313,7 +313,7 @@ import { Meta } from '@storybook/addon-docs';
 ### Breakpoints
 | CSS Variable | SCSS Variable | Value |
 |--------------|---------------|-------|
-| `--ifx-breakpoint-xs` | `$ifxBreakpointXs` | 576px |
+| `--ifx-breakpoint-xs` | `$ifxBreakpointXs` | 360px |
 | `--ifx-breakpoint-s` | `$ifxBreakpointS` | 576px |
 | `--ifx-breakpoint-m` | `$ifxBreakpointM` | 768px |
 | `--ifx-breakpoint-l` | `$ifxBreakpointL` | 992px |

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"$schema": "node_modules/lerna/schemas/lerna-schema.json",`
`3`		`- "version": "32.6.0--canary.1790.47a03e7a4a274c06c059935d12af0cc56fb8f6df.0",`
	`3`	`+ "version": "32.7.0--canary.1791.e7f9b303cbc5f3efbe8b9986951ed48b067187ac.0",`
`4`	`4`	`"command": {`
`5`	`5`	`"publish": {`
`6`	`6`	`"verifyAccess": false`
Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "@infineon/infineon-design-system-stencil",`
`3`		`- "version": "32.6.0--canary.1790.47a03e7a4a274c06c059935d12af0cc56fb8f6df.0",`
	`3`	`+ "version": "32.7.0--canary.1791.e7f9b303cbc5f3efbe8b9986951ed48b067187ac.0",`
`4`	`4`	`"private": false,`
`5`	`5`	`"description": "Infineon design system Stencil web components",`
`6`	`6`	`"homepage": "https://infineon.github.io/infineon-design-system-stencil",`