From 3f90780a128f934481085c403a76d12174f6aa83 Mon Sep 17 00:00:00 2001
From: Anveshreddy mekala <anv11827@esri.com>
Date: Fri, 3 Nov 2023 12:39:29 -0500
Subject: [PATCH] fix(block-section): wraps long text over to a new line when
 toggle switch is displayed (#8101)

**Related Issue:** #7698

## Summary

Wraps long text to a new line when `toggle-display='switch'`
---
 .../src/components/block-section/block-section.scss  |  7 +++++++
 .../src/components/block/block.stories.ts            | 12 ++++++++++++
 2 files changed, 19 insertions(+)

diff --git a/packages/calcite-components/src/components/block-section/block-section.scss b/packages/calcite-components/src/components/block-section/block-section.scss
index 3d90065ae6d..0761e534cb6 100644
--- a/packages/calcite-components/src/components/block-section/block-section.scss
+++ b/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;
 
   .focus-guard {
     --calcite-label-margin-bottom: 0;
@@ -89,4 +90,10 @@
   color: theme("colors.danger");
 }
 
+:host([toggle-display="switch"]) .toggle {
+  .toggle--switch__content {
+    @apply me-7;
+  }
+}
+
 @include base-component();
diff --git a/packages/calcite-components/src/components/block/block.stories.ts b/packages/calcite-components/src/components/block/block.stories.ts
index 4894cac830b..e238a92727c 100644
--- a/packages/calcite-components/src/components/block/block.stories.ts
+++ b/packages/calcite-components/src/components/block/block.stories.ts
@@ -312,3 +312,15 @@ export const scrollingContainerSetup_TestOnly = (): string => html`<style>
   </script>`;
 
 scrollingContainerSetup_TestOnly.parameters = { chromatic: { delay: 500 } };
+
+export const toggleDisplayWithLongText_TestOnly = (): string => html`<calcite-block
+  open
+  heading="Calcite block"
+  style="width:150px"
+>
+  <calcite-block-section id="block-section" open text="Calcite block superlongggggtext" toggle-display="switch">
+    <calcite-notice open>
+      <div slot="message">Some more complex options.</div>
+    </calcite-notice>
+  </calcite-block-section>
+</calcite-block>`;