Merge pull request #1855 from Infineon/1854-date-picker-update-documentation

tishoyanchev · web-flow · commit 91cd31ceb3b9 · 2025-05-21T09:59:52.000+02:00
Date Picker: Updates documentation, and adds asterisk on label when required
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": "33.4.0--canary.1824.371712eabb15e775ee062245b943e02178231c5f.0",
+    "@infineon/infineon-design-system-react": "33.4.1--canary.1855.4ecc2334895a5f7093529884743b44972a5ab85b.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": "33.4.0--canary.1824.371712eabb15e775ee062245b943e02178231c5f.0",
+    "@infineon/infineon-design-system-vue": "33.4.1--canary.1855.4ecc2334895a5f7093529884743b44972a5ab85b.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": "33.4.0--canary.1824.371712eabb15e775ee062245b943e02178231c5f.0",
+  "version": "33.4.1--canary.1855.4ecc2334895a5f7093529884743b44972a5ab85b.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": "33.4.0--canary.1824.371712eabb15e775ee062245b943e02178231c5f.0",
+  "version": "33.4.1--canary.1855.4ecc2334895a5f7093529884743b44972a5ab85b.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": "33.4.0--canary.1824.371712eabb15e775ee062245b943e02178231c5f.0",
+    "@infineon/infineon-design-system-angular": "33.4.1--canary.1855.4ecc2334895a5f7093529884743b44972a5ab85b.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": "33.4.0--canary.1824.371712eabb15e775ee062245b943e02178231c5f.0",
+  "version": "33.4.1--canary.1855.4ecc2334895a5f7093529884743b44972a5ab85b.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": "5.0.0",
-    "@infineon/infineon-design-system-stencil": "33.4.0--canary.1824.371712eabb15e775ee062245b943e02178231c5f.0"
+    "@infineon/infineon-design-system-stencil": "33.4.1--canary.1855.4ecc2334895a5f7093529884743b44972a5ab85b.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": "33.4.0--canary.1824.371712eabb15e775ee062245b943e02178231c5f.0",
+  "version": "33.4.1--canary.1855.4ecc2334895a5f7093529884743b44972a5ab85b.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": "5.0.0",
-    "@infineon/infineon-design-system-stencil": "33.4.0--canary.1824.371712eabb15e775ee062245b943e02178231c5f.0",
+    "@infineon/infineon-design-system-stencil": "33.4.1--canary.1855.4ecc2334895a5f7093529884743b44972a5ab85b.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": "33.4.0--canary.1824.371712eabb15e775ee062245b943e02178231c5f.0",
+  "version": "33.4.1--canary.1855.4ecc2334895a5f7093529884743b44972a5ab85b.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": "5.0.0",
-    "@infineon/infineon-design-system-stencil": "33.4.0--canary.1824.371712eabb15e775ee062245b943e02178231c5f.0"
+    "@infineon/infineon-design-system-stencil": "33.4.1--canary.1855.4ecc2334895a5f7093529884743b44972a5ab85b.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": "33.4.0--canary.1824.371712eabb15e775ee062245b943e02178231c5f.0",
+  "version": "33.4.1--canary.1855.4ecc2334895a5f7093529884743b44972a5ab85b.0",
   "private": false,
   "description": "Infineon design system Stencil web components",
   "homepage": "https://infineon.github.io/infineon-design-system-stencil",
diff --git a/packages/components/public-storybook/images/date-picker/date-picker-anatomy.png b/packages/components/public-storybook/images/date-picker/date-picker-anatomy.png
diff --git a/packages/components/public-storybook/images/date-picker/date-picker-mouse-interaction.png b/packages/components/public-storybook/images/date-picker/date-picker-mouse-interaction.png
diff --git a/packages/components/public-storybook/images/date-picker/date-picker-sizes.png b/packages/components/public-storybook/images/date-picker/date-picker-sizes.png
diff --git a/packages/components/public-storybook/images/date-picker/date-picker-states.png b/packages/components/public-storybook/images/date-picker/date-picker-states.png
diff --git a/packages/components/src/components/checkbox/checkbox.scss b/packages/components/src/components/checkbox/checkbox.scss
@@ -13,6 +13,7 @@
     padding: 0px;
     gap: tokens.$ifxSpace100;
     font-family: tokens.$ifxFontFamilyBody;
+    vertical-align: bottom;
 
     & .checkbox__wrapper {
         box-sizing: border-box;
diff --git a/packages/components/src/components/date-picker/Usage.mdx b/packages/components/src/components/date-picker/Usage.mdx
@@ -3,10 +3,11 @@ import * as DatePickerStories from './date-picker.stories';
 import DatePickerAnatomy from '../../../public-storybook/images/date-picker/date-picker-anatomy.png';
 import DatePickerSizes from '../../../public-storybook/images/date-picker/date-picker-sizes.png';
 import DatePickerStates from '../../../public-storybook/images/date-picker/date-picker-states.png';
+import DatePickerMouseInteraction from '../../../public-storybook/images/date-picker/date-picker-mouse-interaction.png';
 
 <Meta of={DatePickerStories} />
 
-# Date picker
+# Date Picker
 The date picker allows users to select a date from a combination of an input field and a calendar view. It is essential for our applications where date input is required.
 
 | Resources                                                                                                                      |
@@ -48,7 +49,11 @@ Each date element (e.g. DD, MM, YYYY) is clickable and editable via keyboard.
 If required, use caption text to provide additional context or information about the date field.
 
 
-**Calendar view (7)**\
+**Time element (7)**\
+Each time element (e.g. --:--) is clickable and editable via keyboard.
+
+
+**Calendar view (8)**\
 The calendar view provides a visual representation of a calendar, enabling users to navigate through months and years to select a specific date.
 
 ## States
@@ -57,4 +62,7 @@ The calendar view provides a visual representation of a calendar, enabling users
 ## Size
 There are two date field sizes: 36px and 40px. This will give you more flexibility in structuring layouts due to e.g. different button heights. It's important to maintain uniform field height while combining form elements on a single page.
 
-<img src={DatePickerSizes} alt="Date Picker Sizes" />
+<img src={DatePickerSizes} alt="Date Picker Sizes" />
+
+## Mouse interaction
+<img src={DatePickerMouseInteraction} alt="Date Picker Mouse Interaction" />
diff --git a/packages/components/src/components/date-picker/date-picker.scss b/packages/components/src/components/date-picker/date-picker.scss
@@ -7,6 +7,19 @@
   & .label__wrapper {
     color: tokens.$ifxColorBaseBlack;
     font: tokens.$ifxBodyBody03;
+
+    & .asterisk { 
+      display: none;
+      &.required {
+        display: inline;
+        margin-left: 4px;
+        
+        &.error {
+          color: #CD002F;
+        }
+      }
+    }
+
   }
 
   &.disabled {
diff --git a/packages/components/src/components/date-picker/date-picker.tsx b/packages/components/src/components/date-picker/date-picker.tsx
@@ -117,7 +117,8 @@ export class DatePicker {
       <div class={`date__picker-container ${this.error ? 'error' : ''} ${this.disabled ? 'disabled': ''}`}>
 
         <label class='label__wrapper' htmlFor={ this.inputId }>
-        { this.label?.trim() }
+          { this.label?.trim() }
+          <span class={`asterisk ${this.required ? 'required' : ""} ${this.error ? 'error' : ""}`}>*</span>
         </label>
 
         <div class={`input__wrapper ${this.size === 'l' ? 'large' : 'small'} ${this.disabled ? 'disabled' : ''}`}>

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": "33.4.0--canary.1824.371712eabb15e775ee062245b943e02178231c5f.0",`
	`3`	`+ "version": "33.4.1--canary.1855.4ecc2334895a5f7093529884743b44972a5ab85b.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": "33.4.0--canary.1824.371712eabb15e775ee062245b943e02178231c5f.0",`
	`3`	`+ "version": "33.4.1--canary.1855.4ecc2334895a5f7093529884743b44972a5ab85b.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",`