fix(block-section): wraps long text over to a new line when toggle switch is displayed #8101

anveshmekala · 2023-11-01T21:37:30Z

Related Issue: #7698

Summary

Wraps long text to a new line when toggle-display='switch'

…itch is displayed

driskull · 2023-11-02T22:45:06Z

packages/calcite-components/src/components/block-section/block-section.scss

@@ -62,6 +62,7 @@

 .toggle--switch-container {
  @apply flex items-center relative bg-transparent w-full;
+  word-break: break-word;


Is there no tailwind option for this?

nope, currently only break-all , normal & keep-all are supported

driskull

👍 🎉

…pkgs * origin/main: build(deps): update dependency ng-packagr to v16.2.3 (#8116) build(deps): update dependency @types/yargs to v17.0.29 (#8115) fix(block-section): wraps long text over to a new line when toggle switch is displayed (#8101)

* origin/main: build(deps): update dependency tailwindcss to v3.3.5 (#8118) build(deps): update dependency ng-packagr to v16.2.3 (#8116) build(deps): update dependency @types/yargs to v17.0.29 (#8115) fix(block-section): wraps long text over to a new line when toggle switch is displayed (#8101)

🤖 I have created a release *beep* *boop* --- <details><summary>@esri/eslint-plugin-calcite-components: 0.2.3</summary> ## [0.2.3](https://github.com/Esri/calcite-design-system/compare/@esri/eslint-plugin-calcite-components@0.2.2...@esri/eslint-plugin-calcite-components@0.2.3) (2023-11-21) </details> <details><summary>@esri/calcite-components: 1.11.0</summary> ## [1.11.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components@1.10.0...@esri/calcite-components@1.11.0) (2023-11-21) ### Features * **combobox:** Limit display of selected items with new selection-display prop ([#7912](#7912)) ([58317ae](58317ae)) * **date-picker:** Make component responsive ([#7872](#7872)) ([f131218](f131218)) * **input, input-date-picker, input-number, input-text, input-time-picker:** Truncate value and placeholder when input is narrow ([#8160](#8160)) ([533eff3](533eff3)) * **list-item:** Add content-bottom slot for placing content below the label and description of the component ([#8183](#8183)) ([7d400fb](7d400fb)) * **list:** Specify the element types in the `calciteListOrderChange` event detail. ([#8123](#8123)) ([3e81d7e](3e81d7e)) * **pagination:** Introduce responsive design for xxsmall breakpoint ([#8150](#8150)) ([ab20eb0](ab20eb0)) * **stepper-item:** Remove support for previousStep and nextStep in messages ([#8222](#8222)) ([213b31d](213b31d)) * **stepper:** Enable responsive layout ([#7744](#7744)) ([687ca2b](687ca2b)) ### Bug Fixes * **accordion-item:** Update expanded chevron color ([#8087](#8087)) ([d3d7688](d3d7688)) * **action:** Ensure action content is correctly spaced ([#8184](#8184)) ([b18dcc8](b18dcc8)) * **action:** Update transparent action styles ([#8194](#8194)) ([0f12489](0f12489)) * **block-section:** Wraps long text over to a new line when toggle switch is displayed ([#8101](#8101)) ([3f90780](3f90780)) * **checkbox:** Make label property public ([#8181](#8181)) ([d3b9c1f](d3b9c1f)) * **combobox-item:** Hide disabled item icon ([#8095](#8095)) ([36552f3](36552f3)) * **input-date-picker:** Fix date-picker wrapper displaying beyond its bounds ([#8172](#8172)) ([01ec024](01ec024)) * **input-number:** Prevents mutating value on blur ([#8226](#8226)) ([b89a893](b89a893)) * **input-time-zone:** Fix Indian/Christmas time zone translation ([#8096](#8096)) ([d79d591](d79d591)) * **list-item, stack:** Stretch action-menu and handle when placed inside a list-item or stack. ([#8185](#8185)) ([8a16a69](8a16a69)) * **list-item, stack:** Stretch dropdown when placed inside a list-item or stack ([#8204](#8204)) ([05e6b65](05e6b65)) * **list-item:** Adds border between grouped and ungrouped list-items ([#8134](#8134)) ([b3c331c](b3c331c)) * **list-item:** Fix rendering of open icon. ([#8207](#8207)) ([a6e1766](a6e1766)) * **panel, flow-item:** Remove overflow rule ([#8055](#8055)) ([d0c3ed2](d0c3ed2)) * **split-button:** Fix width layout ([#8133](#8133)) ([051f332](051f332)) ### Dependencies * The following workspace dependencies were updated * devDependencies * @esri/eslint-plugin-calcite-components bumped from 0.2.3-next.6 to 0.2.3 </details> <details><summary>@esri/calcite-components-angular: 1.11.0</summary> ## 1.11.0 (2023-11-21) ### Bug Fixes * **angular:** Publish from the dist directory ([#8151](#8151)) ([d813f14](d813f14)) ### Dependencies * The following workspace dependencies were updated * dependencies * @esri/calcite-components bumped from 1.11.0-next.3 to 1.11.0 </details> <details><summary>@esri/calcite-components-react: 1.11.0</summary> ## [1.11.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-react@1.10.0...@esri/calcite-components-react@1.11.0) (2023-11-21) ### Dependencies * The following workspace dependencies were updated * dependencies * @esri/calcite-components bumped from 1.11.0-next.3 to 1.11.0 </details> --- This PR was generated with [Release Please](https://github.com/googleapis/release-please). See [documentation](https://github.com/googleapis/release-please#release-please). --------- Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> Co-authored-by: Ben Elan <no-reply@benelan.dev>

🤖 I have created a release *beep* *boop* --- <details><summary>@esri/eslint-plugin-calcite-components: 0.2.3</summary> [0.2.3](https://github.com/Esri/calcite-design-system/compare/@esri/eslint-plugin-calcite-components@0.2.2...@esri/eslint-plugin-calcite-components@0.2.3) (2023-11-21) </details> <details><summary>@esri/calcite-components: 1.11.0</summary> [1.11.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components@1.10.0...@esri/calcite-components@1.11.0) (2023-11-21) * **combobox:** Limit display of selected items with new selection-display prop ([#7912](#7912)) ([58317ae](58317ae)) * **date-picker:** Make component responsive ([#7872](#7872)) ([f131218](f131218)) * **input, input-date-picker, input-number, input-text, input-time-picker:** Truncate value and placeholder when input is narrow ([#8160](#8160)) ([533eff3](533eff3)) * **list-item:** Add content-bottom slot for placing content below the label and description of the component ([#8183](#8183)) ([7d400fb](7d400fb)) * **list:** Specify the element types in the `calciteListOrderChange` event detail. ([#8123](#8123)) ([3e81d7e](3e81d7e)) * **pagination:** Introduce responsive design for xxsmall breakpoint ([#8150](#8150)) ([ab20eb0](ab20eb0)) * **stepper-item:** Remove support for previousStep and nextStep in messages ([#8222](#8222)) ([213b31d](213b31d)) * **stepper:** Enable responsive layout ([#7744](#7744)) ([687ca2b](687ca2b)) * **accordion-item:** Update expanded chevron color ([#8087](#8087)) ([d3d7688](d3d7688)) * **action:** Ensure action content is correctly spaced ([#8184](#8184)) ([b18dcc8](b18dcc8)) * **action:** Update transparent action styles ([#8194](#8194)) ([0f12489](0f12489)) * **block-section:** Wraps long text over to a new line when toggle switch is displayed ([#8101](#8101)) ([3f90780](3f90780)) * **checkbox:** Make label property public ([#8181](#8181)) ([d3b9c1f](d3b9c1f)) * **combobox-item:** Hide disabled item icon ([#8095](#8095)) ([36552f3](36552f3)) * **input-date-picker:** Fix date-picker wrapper displaying beyond its bounds ([#8172](#8172)) ([01ec024](01ec024)) * **input-number:** Prevents mutating value on blur ([#8226](#8226)) ([b89a893](b89a893)) * **input-time-zone:** Fix Indian/Christmas time zone translation ([#8096](#8096)) ([d79d591](d79d591)) * **list-item, stack:** Stretch action-menu and handle when placed inside a list-item or stack. ([#8185](#8185)) ([8a16a69](8a16a69)) * **list-item, stack:** Stretch dropdown when placed inside a list-item or stack ([#8204](#8204)) ([05e6b65](05e6b65)) * **list-item:** Adds border between grouped and ungrouped list-items ([#8134](#8134)) ([b3c331c](b3c331c)) * **list-item:** Fix rendering of open icon. ([#8207](#8207)) ([a6e1766](a6e1766)) * **panel, flow-item:** Remove overflow rule ([#8055](#8055)) ([d0c3ed2](d0c3ed2)) * **split-button:** Fix width layout ([#8133](#8133)) ([051f332](051f332)) * The following workspace dependencies were updated * devDependencies * @esri/eslint-plugin-calcite-components bumped from 0.2.3-next.6 to 0.2.3 </details> <details><summary>@esri/calcite-components-angular: 1.11.0</summary> * **angular:** Publish from the dist directory ([#8151](#8151)) ([d813f14](d813f14)) * The following workspace dependencies were updated * dependencies * @esri/calcite-components bumped from 1.11.0-next.3 to 1.11.0 </details> <details><summary>@esri/calcite-components-react: 1.11.0</summary> [1.11.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-react@1.10.0...@esri/calcite-components-react@1.11.0) (2023-11-21) * The following workspace dependencies were updated * dependencies * @esri/calcite-components bumped from 1.11.0-next.3 to 1.11.0 </details> --- This PR was generated with [Release Please](https://github.com/googleapis/release-please). See [documentation](https://github.com/googleapis/release-please#release-please). --------- Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> Co-authored-by: Ben Elan <no-reply@benelan.dev>

fix(block-section): wraps long text over to a new line when toggle sw…

f508597

…itch is displayed

github-actions bot assigned anveshmekala Nov 1, 2023

github-actions bot added the bug Bug reports for broken functionality. Issues should include a reproduction of the bug. label Nov 1, 2023

anveshmekala added 2 commits November 1, 2023 17:52

add screenshot test

7290fa5

use css margin and revert tabindex

efc62fe

anveshmekala added the pr ready for visual snapshots Adding this label will run visual snapshot testing. label Nov 2, 2023

anveshmekala marked this pull request as ready for review November 2, 2023 22:26

anveshmekala requested a review from a team as a code owner November 2, 2023 22:26

use tailwind util classes

8cca04e

anveshmekala added pr ready for visual snapshots Adding this label will run visual snapshot testing. and removed pr ready for visual snapshots Adding this label will run visual snapshot testing. labels Nov 2, 2023

driskull reviewed Nov 2, 2023

View reviewed changes

anveshmekala requested a review from driskull November 3, 2023 14:38

driskull approved these changes Nov 3, 2023

View reviewed changes

anveshmekala merged commit 3f90780 into main Nov 3, 2023
16 checks passed

anveshmekala deleted the anveshmekala/7698-fix-block-spacing-issue-with-switch branch November 3, 2023 17:39

github-actions bot added this to the 2023 November Priorities milestone Nov 3, 2023

calcite-admin mentioned this pull request Nov 3, 2023

chore: release main #8092

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix(block-section): wraps long text over to a new line when toggle switch is displayed #8101

fix(block-section): wraps long text over to a new line when toggle switch is displayed #8101

anveshmekala commented Nov 1, 2023 •

edited

Loading

driskull Nov 2, 2023

anveshmekala Nov 2, 2023

driskull left a comment

fix(block-section): wraps long text over to a new line when toggle switch is displayed #8101

fix(block-section): wraps long text over to a new line when toggle switch is displayed #8101

Conversation

anveshmekala commented Nov 1, 2023 • edited Loading

Summary

driskull Nov 2, 2023

Choose a reason for hiding this comment

anveshmekala Nov 2, 2023

Choose a reason for hiding this comment

driskull left a comment

Choose a reason for hiding this comment

anveshmekala commented Nov 1, 2023 •

edited

Loading