Merge pull request #1430 from Infineon/1429-checkbox-label-does-not-wrap

Checkbox: removed fixed height
Infineon · Aug 27, 2024 · b0da4b2 · b0da4b2
2 parents 7637c94 + 8f3e5d9
commit b0da4b2
Show file tree

Hide file tree

Showing 8 changed files with 25 additions and 24 deletions.
diff --git a/lerna.json b/lerna.json
@@ -1,6 +1,6 @@
 {
   "$schema": "node_modules/lerna/schemas/lerna-schema.json",
-  "version": "24.6.1",
+  "version": "24.6.2--canary.1430.3cee98db635579771123bb6588b48ebc57291e76.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": "24.6.1",
+  "version": "24.6.2--canary.1430.3cee98db635579771123bb6588b48ebc57291e76.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": "^24.6.1",
+    "@infineon/infineon-design-system-angular": "^24.6.2--canary.1430.3cee98db635579771123bb6588b48ebc57291e76.0",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.14.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": "24.6.1",
+  "version": "24.6.2--canary.1430.3cee98db635579771123bb6588b48ebc57291e76.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.2",
-    "@infineon/infineon-design-system-stencil": "^24.6.1"
+    "@infineon/infineon-design-system-stencil": "^24.6.2--canary.1430.3cee98db635579771123bb6588b48ebc57291e76.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": "24.6.1",
+  "version": "24.6.2--canary.1430.3cee98db635579771123bb6588b48ebc57291e76.0",
   "description": "Infineon design system Stencil web components for React",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -28,7 +28,7 @@
   },
   "dependencies": {
     "@infineon/design-system-tokens": "3.3.2",
-    "@infineon/infineon-design-system-stencil": "24.6.1"
+    "@infineon/infineon-design-system-stencil": "24.6.2--canary.1430.3cee98db635579771123bb6588b48ebc57291e76.0"
   },
   "auto": {
     "plugins": [

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": "24.6.1",
+  "version": "24.6.2--canary.1430.3cee98db635579771123bb6588b48ebc57291e76.0",
   "description": "Infineon design system Stencil web components for Vue",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -31,7 +31,7 @@
   },
   "dependencies": {
     "@infineon/design-system-tokens": "3.3.2",
-    "@infineon/infineon-design-system-stencil": "24.6.1"
+    "@infineon/infineon-design-system-stencil": "24.6.2--canary.1430.3cee98db635579771123bb6588b48ebc57291e76.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": "24.6.1",
+  "version": "24.6.2--canary.1430.3cee98db635579771123bb6588b48ebc57291e76.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/checkbox/checkbox.scss b/packages/components/src/components/checkbox/checkbox.scss
@@ -16,6 +16,7 @@
     font-family: var(--ifx-font-family);
 
     & .checkbox__wrapper {
+        box-sizing: border-box;
         display: flex;
         position: relative; //needs to be added for the indeterminate state of the checkbox
         justify-content: center;
@@ -28,6 +29,7 @@
         flex: none;
         order: 0;
         flex-grow: 0;
+        align-self: flex-start;
 
         &.checkbox-m {
             height: tokens.$ifxSize300;
@@ -116,18 +118,17 @@
     }
 
     & .label {
-        height: tokens.$ifxSize250;
         font-style: normal;
         font-weight: 400;
         font-size: tokens.$ifxFontSizeS;
         line-height: tokens.$ifxLineHeightS;
         color: tokens.$ifxColorBaseBlack;
-        flex: none;
-        order: 1;
-        flex-grow: 0;
+        overflow-wrap: break-word;
+        word-wrap: break-word;
+        word-break: break-all;
+        max-width: 100%;
 
         &.label-m {
-            height: tokens.$ifxSize300;
             font-size: tokens.$ifxFontSizeM;
             line-height: tokens.$ifxLineHeightM;
         }