refactor(ui5-checkbox): wrap text by default (#9165)

The text of `ui5-checkbox` now wraps by default.

BREAKING CHANGE: `wrapping-type` property default value has changed from `None` to `Normal`.
Before: 
```html
<ui5-checkbox text=Some very very very very long text"></ui5-checkbox><!-- would truncate the text if there is not enough space -->
```

Now:
```html
<ui5-checkbox text=Some very very very very long text"></ui5-checkbox> <!-- would let the text wrap if there is not enough space -->
```

Related to #8461, #7887

Author: yanaminkova

packages/main/src/CheckBox.ts

@@ -51,7 +51,7 @@ let activeCb: CheckBox;
  * ### Usage
  *
  * You can define the checkbox text with via the `text` property. If the text exceeds the available width, it is truncated by default.
- * In case you prefer text to wrap, set the `wrappingType` property to "Normal".
+ * In case you prefer text to truncate, set the `wrappingType` property to "None".
  * The touchable area for toggling the `ui5-checkbox` ends where the text ends.
  *
  * You can disable the `ui5-checkbox` by setting the `disabled` property to
@@ -208,10 +208,11 @@ class CheckBox extends UI5Element implements IFormInputElement {
 	 * Defines whether the component text wraps when there is not enough space.
 	 *
 	 * **Note:** for option "Normal" the text will wrap and the words will not be broken based on hyphenation.
-	 * @default "None"
+	 * **Note:** for option "None" the text will be truncated with an ellipsis.
+	 * @default "Normal"
 	 * @public
 	 */
-	@property({ type: WrappingType, defaultValue: WrappingType.None })
+	@property({ type: WrappingType, defaultValue: WrappingType.Normal })
 	wrappingType!: `${WrappingType}`;
 
 	/**

packages/main/src/themes/CheckBox.css

@@ -43,26 +43,26 @@
 }
 
 /* wrap */
-:host([wrapping-type="Normal"][text]) .ui5-checkbox-root {
+:host(:not([wrapping-type="None"])[text]) .ui5-checkbox-root {
 	min-height: auto;
 	box-sizing: border-box;
 	align-items: flex-start;
 	padding-top: var(--_ui5_checkbox_root_side_padding);
 	padding-bottom: var(--_ui5_checkbox_root_side_padding);
 }
 
-:host([wrapping-type="Normal"][text]) .ui5-checkbox-root .ui5-checkbox-inner,
-:host([wrapping-type="Normal"][text]) .ui5-checkbox-root .ui5-checkbox-label {
+:host(:not([wrapping-type="None"])[text]) .ui5-checkbox-root .ui5-checkbox-inner,
+:host(:not([wrapping-type="None"])[text]) .ui5-checkbox-root .ui5-checkbox-label {
 	margin-top: var(--_ui5_checkbox_wrapped_content_margin_top);
 }
 
-:host([wrapping-type="Normal"][text]) .ui5-checkbox-root .ui5-checkbox-label {
+:host(:not([wrapping-type="None"])[text]) .ui5-checkbox-root .ui5-checkbox-label {
 	overflow-wrap: break-word;
 	align-self: center;
 }
 
-:host([desktop][wrapping-type="Normal"]) .ui5-checkbox-root:focus::before,
-:host([wrapping-type="Normal"]) .ui5-checkbox-root:focus-visible::before {
+:host([desktop]:not([wrapping-type="None"])) .ui5-checkbox-root:focus::before,
+.ui5-checkbox-root:focus-visible::before {
 	bottom: var(--_ui5_checkbox_wrapped_focus_left_top_bottom_position);
 }
 

packages/main/test/pages/CheckBox.html

@@ -20,8 +20,8 @@
 	<ui5-checkbox id="cbReadonly" readonly text="Option"></ui5-checkbox>
 	<ui5-checkbox id="cbDisabled" disabled text="Option"></ui5-checkbox>
 	<ui5-checkbox id="cbError" value-state="Negative" text="Option"></ui5-checkbox>
-	<ui5-checkbox id="truncatingCb" text="Long long long text that should truncate at some point" class="checkbox2auto"></ui5-checkbox>
-	<ui5-checkbox text="Long long long text that should truncate at some point"></ui5-checkbox>
+	<ui5-checkbox id="wrappingCb" text="Long long long text that should wrap at some point" class="checkbox2auto"></ui5-checkbox>
+	<ui5-checkbox wrapping-type="None" text="Long long long text that should truncate at some point"></ui5-checkbox>
 
 	<ui5-title>In Container - stretches to the container</ui5-title>
 	<div class="checkbox3auto">
@@ -35,9 +35,14 @@
 	</div>
 
 	<br><br>
-	<ui5-title>Text Wrapping</ui5-title>
-	<ui5-checkbox id="wrappingCb" wrapping-type="Normal" class="ui5-cb-testing-wrap checkbox2auto" text="Longest ever text written in English that have to wraps because it is so long of course!" ></ui5-checkbox>
-	<ui5-checkbox wrapping-type="Normal" text="Longest ever text written in English that wraps because it's too long of course!" class="checkbox2auto"></ui5-checkbox>
+	<ui5-title>wrappingType="Normal" (default value)</ui5-title>
+	<ui5-checkbox class="ui5-cb-testing-wrap checkbox2auto" text="Longest ever text written in English that have to wrap because it is so long of course!" ></ui5-checkbox>
+	<ui5-checkbox text="Longest ever text written in English that wraps because it's too long of course!" class="checkbox2auto"></ui5-checkbox>
+
+	<br><br>
+	<ui5-title>wrappingType="None"</ui5-title>
+	<ui5-checkbox id="truncatingCb" wrapping-type="None" class="ui5-cb-testing-wrap checkbox2auto" text="Longest ever text written in English that have to truncate because it is so long of course!" ></ui5-checkbox>
+	<ui5-checkbox wrapping-type="None" text="Longest ever text written in English that truncates because it's too long of course!" class="checkbox2auto"></ui5-checkbox>
 
 	<br><br>
 	<ui5-title>Change Event Test</ui5-title>

packages/main/test/pages/Kitchen.html

@@ -242,7 +242,7 @@
 		<section class="row row-centered">
 			<ui5-checkbox id="myCb1" checked text="Default"></ui5-checkbox>
 			<ui5-checkbox id="myCb2" read-only text="read only"></ui5-checkbox>
-			<ui5-checkbox id="myCb3" disabled wrapping-type="Normal" text="disabled long text might also wrap"></ui5-checkbox>
+			<ui5-checkbox id="myCb3" disabled text="disabled long text might also wrap"></ui5-checkbox>
 			<ui5-checkbox id="myCb4" read-only text="read only" checked></ui5-checkbox>
 			<ui5-checkbox id="myCb5" disabled text="disabled" checked></ui5-checkbox>
 			<ui5-checkbox id="myCb6" value-state="Critical" checked text="warning"></ui5-checkbox>

packages/main/test/pages/Kitchen.openui5.html

@@ -224,7 +224,7 @@
 		<section class="row row-centered">
 			<ui5-checkbox id="myCb1" checked text="Default"></ui5-checkbox>
 			<ui5-checkbox id="myCb2" read-only text="read only"></ui5-checkbox>
-			<ui5-checkbox id="myCb3" disabled wrapping-type="Normal" text="disabled long text might also wrap"></ui5-checkbox>
+			<ui5-checkbox id="myCb3" disabled text="disabled long text might also wrap"></ui5-checkbox>
 			<ui5-checkbox id="myCb4" read-only text="read only" checked></ui5-checkbox>
 			<ui5-checkbox id="myCb5" disabled text="disabled" checked></ui5-checkbox>
 			<ui5-checkbox id="myCb6" value-state="Critical" checked text="warning"></ui5-checkbox>

packages/website/docs/_components_pages/main/CheckBox.mdx

@@ -28,7 +28,7 @@ CheckBox supports several semantic value states, readonly, disabled, etc.
 <States />
 
 ### Text Truncation and Wrapping
-The CheckBox text truncates by default. To make it wrap - set <b>wrapping-type="Normal"</b>.
+The CheckBox text wraps by default. To make it truncate - set <b>wrapping-type="None"</b>.
 
 <TextWrapping />
 

packages/website/docs/_samples/main/CheckBox/TextWrapping/sample.html

@@ -12,16 +12,16 @@
     <!-- playground-fold-end -->
 
     <ui5-checkbox
-        text="Truncating text when 'wrapping-type=Normal' set and some long text."
+        text="Truncating text when 'wrapping-type=None' set and some long text."
         style="width:200px;"
+        wrapping-type="None"
     ></ui5-checkbox>
 
     <br>
 
     <ui5-checkbox
         checked
-        wrapping-type="Normal"
-        text="Wrapping text when 'wrapping-type=Normal' set and some long text."
+        text="Wrapping text when the components is with its default 'wrapping-type=Normal' and some long text."
         style="width:200px;"
     ></ui5-checkbox>
     <!-- playground-fold -->