Merge pull request #1641 from Infineon/1621-single-select-does-not-tr…

…uncate-longer-text-in-option Single-select: truncating selected option
Infineon · Dec 11, 2024 · 5de4fb4 · 5de4fb4
2 parents be1ffef + d72f0e8
commit 5de4fb4
Show file tree

Hide file tree

Showing 11 changed files with 58 additions and 75 deletions.
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": "30.0.1--canary.1600.132296aefcef8cc51db60ef119d15e86b7549a02.0",
+    "@infineon/infineon-design-system-react": "30.2.0--canary.1641.2fa3dc92b1652a9ad0c0488d80e396bc04aab9d2.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": "30.0.1--canary.1600.132296aefcef8cc51db60ef119d15e86b7549a02.0",
+    "@infineon/infineon-design-system-vue": "30.2.0--canary.1641.2fa3dc92b1652a9ad0c0488d80e396bc04aab9d2.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": "30.0.1--canary.1600.132296aefcef8cc51db60ef119d15e86b7549a02.0",
+  "version": "30.2.0--canary.1641.2fa3dc92b1652a9ad0c0488d80e396bc04aab9d2.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": "30.0.1--canary.1600.132296aefcef8cc51db60ef119d15e86b7549a02.0",
+  "version": "30.2.0--canary.1641.2fa3dc92b1652a9ad0c0488d80e396bc04aab9d2.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": "^30.0.1--canary.1600.132296aefcef8cc51db60ef119d15e86b7549a02.0",
+    "@infineon/infineon-design-system-angular": "^30.2.0--canary.1641.2fa3dc92b1652a9ad0c0488d80e396bc04aab9d2.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": "30.0.1--canary.1600.132296aefcef8cc51db60ef119d15e86b7549a02.0",
+  "version": "30.2.0--canary.1641.2fa3dc92b1652a9ad0c0488d80e396bc04aab9d2.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": "3.3.4",
-    "@infineon/infineon-design-system-stencil": "30.0.1--canary.1600.132296aefcef8cc51db60ef119d15e86b7549a02.0"
+    "@infineon/infineon-design-system-stencil": "30.2.0--canary.1641.2fa3dc92b1652a9ad0c0488d80e396bc04aab9d2.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": "30.0.1--canary.1600.132296aefcef8cc51db60ef119d15e86b7549a02.0",
+  "version": "30.2.0--canary.1641.2fa3dc92b1652a9ad0c0488d80e396bc04aab9d2.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": "3.3.4",
-    "@infineon/infineon-design-system-stencil": "^30.0.1--canary.1600.132296aefcef8cc51db60ef119d15e86b7549a02.0",
+    "@infineon/infineon-design-system-stencil": "^30.2.0--canary.1641.2fa3dc92b1652a9ad0c0488d80e396bc04aab9d2.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": "30.0.1--canary.1600.132296aefcef8cc51db60ef119d15e86b7549a02.0",
+  "version": "30.2.0--canary.1641.2fa3dc92b1652a9ad0c0488d80e396bc04aab9d2.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": "3.3.4",
-    "@infineon/infineon-design-system-stencil": "^30.0.1--canary.1600.132296aefcef8cc51db60ef119d15e86b7549a02.0"
+    "@infineon/infineon-design-system-stencil": "^30.2.0--canary.1641.2fa3dc92b1652a9ad0c0488d80e396bc04aab9d2.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": "30.0.1--canary.1600.132296aefcef8cc51db60ef119d15e86b7549a02.0",
+  "version": "30.2.0--canary.1641.2fa3dc92b1652a9ad0c0488d80e396bc04aab9d2.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/select/single-select/select.scss b/packages/components/src/components/select/single-select/select.scss
@@ -54,6 +54,18 @@
     border-radius: tokens.$ifxBorderRadius12;
     font-weight: 400;
     font-style: normal;
+    width: 100%;
+
+    & .choices { 
+      flex-grow: 1;
+      overflow: hidden;
+    }
+
+    & .single__select-icon-container { 
+      display: flex;
+      align-items: center;
+      margin-left: auto;
+    }
 
     &.small-select {
       height: 36px;
@@ -230,10 +242,6 @@ END Select options: item alignment
     cursor: pointer;
   }
 
-  .choices[data-type*='select-one'] .choices__inner {
-    // padding-bottom: 7.5px;
-  }
-
   .choices[data-type*='select-one'] .choices__input {
     display: block;
     width: 100%;
@@ -284,20 +292,6 @@ END Select options: item alignment
     display: none;
   }
 
-  // .choices[data-type*='select-one']:after {
-  //   content: '';
-  //   height: 0;
-  //   width: 0;
-  //   border-style: solid;
-  //   border-color: #333333 transparent transparent transparent;
-  //   border-width: 5px;
-  //   position: absolute;
-  //   right: 11.5px;
-  //   top: 50%;
-  //   margin-top: -2.5px;
-  //   pointer-events: none;
-  // }
-
   .choices[data-type*='select-one'].is-open:after {
     // border-color: transparent transparent #333333 transparent;
     margin-top: -7.5px;
@@ -358,6 +352,17 @@ END Select options: item alignment
   .choices__inner {
     overflow: hidden;
 
+    & .choices__list { 
+      & .choices__item { 
+        & span { 
+          flex-grow: 1;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
+      }
+    }
+
   }
 
   .is-focused .choices__inner,
@@ -380,34 +385,18 @@ END Select options: item alignment
     list-style: none;
   }
 
-  .choices__list--single {
-    // display: inline-block;
-    // padding: 4px 16px 4px 4px;
-    // width: 100%;
-  }
-
-  [dir='rtl'] .choices__list--single {
-    // padding-right: 4px;
-    // padding-left: 16px;
-  }
-
   .choices__list--single .choices__item {
     width: 100%;
     display: flex;
     justify-content: space-between;
   }
 
-
   .disabled>.choices__list--single .choices__item[data-value=''] {
     color: #8D8786;
     /* Placeholder font color */
 
   }
 
-  .choices__list--multiple {
-    // display: inline;
-  }
-
   .choices__list--multiple .choices__item {
     display: inline-block;
     vertical-align: middle;
@@ -440,7 +429,6 @@ END Select options: item alignment
     border: 1px solid tokens.$ifxColorOcean500;
   }
 
-
   .choices__list--dropdown {
     visibility: hidden;
     box-sizing: border-box;
@@ -516,10 +504,7 @@ END Select options: item alignment
 
 
   @media (min-width: 640px) {
-    .choices__list--dropdown .choices__item--selectable {
-      // padding-right: 100px; remove padding so the checkmark can be aligned at the very right
-    }
-
+
     .choices__list--dropdown .choices__item--selectable:after {
       // content: attr(data-select-text); #press to select text next to select option
       font-size: tokens.$ifxFontSizeXs;
@@ -580,10 +565,6 @@ END Select options: item alignment
     opacity: 0.5;
   }
 
-  // .choices[data-type*='select-one'] .choices__item .choices__item--choice {
-
-  // }
-
   .choices__heading {
     font-weight: 600;
     font-size: tokens.$ifxFontSizeXs;

diff --git a/packages/components/src/components/select/single-select/select.tsx b/packages/components/src/components/select/single-select/select.tsx
@@ -347,20 +347,22 @@ export class Choices implements IChoicesProps, IChoicesMethods {
           onClick={this.disabled ? undefined : () => this.toggleDropdown()}
           onKeyDown={event => this.handleKeyDown(event)}
         >
-          <select disabled = {this.disabled} {...attributes} data-trigger onChange={() => this.handleChange()}>
+          <select class='single__select-input-field' disabled = {this.disabled} {...attributes} data-trigger onChange={() => this.handleChange()}>
             {this.createSelectOptions(this.options)}
           </select>
 
-          { this.optionIsSelected && (
-            <div class="ifx-choices__icon-wrapper-delete">
-              <ifx-icon icon="cremove16" onClick={() => this.handleDeleteSelection()}></ifx-icon>
-            </div>
-          )}
-          <div class="ifx-choices__icon-wrapper-up">
-            <ifx-icon key="icon-up" icon="chevronup-16"></ifx-icon>
-          </div>
-          <div class="ifx-choices__icon-wrapper-down">
-            <ifx-icon key="icon-down" icon="chevron-down-16"></ifx-icon>
+          <div class="single__select-icon-container">
+            { this.optionIsSelected && (
+                <div class="ifx-choices__icon-wrapper-delete">
+                  <ifx-icon icon="cremove16" onClick={() => this.handleDeleteSelection()}></ifx-icon>
+                </div>
+              )}
+              <div class="ifx-choices__icon-wrapper-up">
+                <ifx-icon key="icon-up" icon="chevronup-16"></ifx-icon>
+              </div>
+              <div class="ifx-choices__icon-wrapper-down">
+                <ifx-icon key="icon-down" icon="chevron-down-16"></ifx-icon>
+              </div>
           </div>
         </div>
         {this.error ? (