fix(styles): add option to wrap long label for checkbox and radio but…

…ton (#4501)

BREAKING CHANGE:
Radio Button: the label text is wrapped in a span element with class "fd-radio__text" to allow truncation options.

packages/styles/src/checkbox.scss

@@ -99,21 +99,35 @@ $block: #{$fd-namespace}-checkbox;
         @include fd-form-radio-checkbox-required-label();
       }
     }
+
+    &--wrap {
+      .#{$block}__label-container {
+        height: auto;
+        white-space: initial;
+      }
+
+      .#{$block}__text {
+        white-space: initial;
+      }
+    }
   }
 
   &__label-container {
     @include fd-reset();
     @include fd-flex-vertical-center();
+    @include fd-ellipsis();
 
-    width: 100%;
     height: 1rem;
     pointer-events: none;
+    max-width: inherit;
   }
 
   &__text {
     @include fd-reset();
     @include fd-ellipsis();
     @include fd-set-margins-x(var(--fdCheckbox_Padding), 0);
+
+    max-width: inherit;
   }
 
   &:checked + .#{$block}__label::before {

packages/styles/src/radio.scss

@@ -32,11 +32,11 @@ $block: #{$fd-namespace}-radio;
   &__label {
     @include fd-form-label();
     @include fd-action-cursor();
+    @include fd-ellipsis();
 
     line-height: 1rem;
     display: flex;
     align-items: center;
-    overflow: hidden;
     padding: var(--fdRadio_Outer_Circle_Padding);
     color: var(--sapField_TextColor);
 
@@ -93,6 +93,23 @@ $block: #{$fd-namespace}-radio;
         margin-left: 0;
       }
     }
+
+    &--wrap {
+      .#{$block}__text {
+        white-space: initial;
+      }
+
+      &::after {
+        top: initial;
+      }
+    }
+  }
+
+  &__text {
+    @include fd-reset();
+    @include fd-ellipsis();
+
+    line-height: 1rem;
   }
 
   &:checked + .#{$block}__label::after {

packages/styles/stories/Components/Forms/checkbox/checkbox.stories.js

@@ -442,3 +442,38 @@ States.parameters = {
         }
     }
 };
+
+export const TextTruncation = () => `
+${localStyles}
+<fieldset class="fd-fieldset">
+    <legend class="fd-fieldset__legend">Truncation Options</legend>
+    <div class="fd-form-group">
+        <div class="fd-form-item">
+            <input type="checkbox" class="fd-checkbox" id="Ai4ez611lw">
+            <label class="fd-checkbox__label" for="Ai4ez611lw" style="max-width: 400px;">
+                <div class="fd-checkbox__label-container">
+                    <span class="fd-checkbox__text">Apple ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </span>
+                </div>
+            </label>
+        </div>
+        <div class="fd-form-item">
+            <input type="checkbox" class="fd-checkbox" id="Ai4ez612lw" checked>
+            <label class="fd-checkbox__label fd-checkbox__label--wrap" for="Ai4ez612lw" style="max-width: 400px;">
+                <div class="fd-checkbox__label-container">
+                    <span class="fd-checkbox__text">Banana ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</span>
+                </div>
+            </label>
+        </div>
+    </div>
+</fieldset>
+`;
+
+TextTruncation.parameters = {
+    docs: {
+        story: { iframeHeight: 330 },
+        description: {
+            story: `By default, long checkbox label truncates with ellipsis. For this behaviour no modifier class is needed. For checkbox label that wraps on a new line to show the entire content, use \`.fd-checkbox__label--wrap\` modifier class applied with \`.fd-checkbox__label\`. Keep in mind that for this to work <b>max-width</b> should be set on the label.
+        `
+        }
+    }
+};

packages/styles/stories/Components/Forms/form-fieldset/form-fieldset.stories.js

@@ -119,19 +119,19 @@ export const RadioButtonGroups = () => `<fieldset class="fd-fieldset" id="radio1
             <div class="fd-form-item">
                 <input type="radio" class="fd-radio" id="pDidh761" name="radio1" checked>
                 <label class="fd-radio__label" for="pDidh761">
-                    Field label
+                    <span class="fd-radio__text">Field label</span>
                 </label>
             </div>
             <div class="fd-form-item">
                 <input type="radio" class="fd-radio" id="pDidh7612" name="radio1">
                 <label class="fd-radio__label" for="pDidh7612">
-                    Field label
+                    <span class="fd-radio__text">Field label</span>
                 </label>
             </div>
             <div class="fd-form-item">
                 <input type="radio" class="fd-radio" id="pDidh7613" name="radio1">
                 <label class="fd-radio__label" for="pDidh7613">
-                    Field label
+                    <span class="fd-radio__text">Field label</span>
                 </label>
             </div>
         </div>