Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 5 commits into from
Jun 14, 2024
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
9a6defc
refactor(ui5-checkbox): wrap text by default
yanaminkova Jun 10, 2024
5941065
Update CheckBox.html
yanaminkova Jun 10, 2024
710729a
refactor(ui5-checkbox): wrap text by default
yanaminkova Jun 11, 2024
1b2ae24
refactor(ui5-checkbox): wrap text by default
yanaminkova Jun 13, 2024
6e95396
refactor(ui5-checkbox): wrap text by default
yanaminkova Jun 14, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 4 additions & 3 deletions packages/main/src/CheckBox.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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}`;

/**
Expand Down
12 changes: 6 additions & 6 deletions packages/main/src/themes/CheckBox.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}

Expand Down
15 changes: 10 additions & 5 deletions packages/main/test/pages/CheckBox.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand All @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion packages/main/test/pages/Kitchen.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion packages/main/test/pages/Kitchen.openui5.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion packages/website/docs/_components_pages/main/CheckBox.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 />

6 changes: 3 additions & 3 deletions packages/website/docs/_samples/main/CheckBox/TextWrapping/sample.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 -->
Expand Down