diff --git a/.changeset/nine-hounds-raise.md b/.changeset/nine-hounds-raise.md new file mode 100644 index 00000000000..d684ce5a261 --- /dev/null +++ b/.changeset/nine-hounds-raise.md @@ -0,0 +1,5 @@ +--- +"@razorpay/blade": patch +--- + +fix(BaseHeader): Handle word break on single word. Fixes for AccordionItemHeader, DropdownHeader, etc diff --git a/packages/blade/src/components/Accordion/__tests__/__snapshots__/Accordion.ssr.test.tsx.snap b/packages/blade/src/components/Accordion/__tests__/__snapshots__/Accordion.ssr.test.tsx.snap index 882566ffa8d..3abceb264ef 100644 --- a/packages/blade/src/components/Accordion/__tests__/__snapshots__/Accordion.ssr.test.tsx.snap +++ b/packages/blade/src/components/Accordion/__tests__/__snapshots__/Accordion.ssr.test.tsx.snap @@ -1,6 +1,6 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[` should render Accordion on server 1`] = `"
"`; +exports[` should render Accordion on server 1`] = `"
"`; exports[` should render Accordion on server 2`] = ` .c0.c0.c0.c0.c0 { @@ -177,6 +177,7 @@ exports[` should render Accordion on server 2`] = ` letter-spacing: 0px; margin: 0; padding: 0; + word-break: break-word; margin-top: 1px; } diff --git a/packages/blade/src/components/Accordion/__tests__/__snapshots__/Accordion.web.test.tsx.snap b/packages/blade/src/components/Accordion/__tests__/__snapshots__/Accordion.web.test.tsx.snap index 2e909daefd2..e1e01003a97 100644 --- a/packages/blade/src/components/Accordion/__tests__/__snapshots__/Accordion.web.test.tsx.snap +++ b/packages/blade/src/components/Accordion/__tests__/__snapshots__/Accordion.web.test.tsx.snap @@ -175,6 +175,7 @@ exports[` should render 1`] = ` letter-spacing: 0px; margin: 0; padding: 0; + word-break: break-word; margin-top: 1px; } @@ -965,6 +966,7 @@ exports[`Deprecated should render 1`] = ` letter-spacing: 0px; margin: 0; padding: 0; + word-break: break-word; margin-top: 1px; } diff --git a/packages/blade/src/components/BaseHeaderFooter/BaseHeader.tsx b/packages/blade/src/components/BaseHeaderFooter/BaseHeader.tsx index 807d826bd0c..e0e61f78a14 100644 --- a/packages/blade/src/components/BaseHeaderFooter/BaseHeader.tsx +++ b/packages/blade/src/components/BaseHeaderFooter/BaseHeader.tsx @@ -314,6 +314,7 @@ const _BaseHeader = ({ marginTop={makeSize(sizeToken['1'])} weight="semibold" color={isDisabled ? 'surface.text.gray.disabled' : 'surface.text.gray.normal'} + wordBreak="break-word" > {title} diff --git a/packages/blade/src/components/BaseHeaderFooter/BaseHeaderFooter.internal.stories.tsx b/packages/blade/src/components/BaseHeaderFooter/BaseHeaderFooter.internal.stories.tsx index 8ac7376723c..87e65b091da 100644 --- a/packages/blade/src/components/BaseHeaderFooter/BaseHeaderFooter.internal.stories.tsx +++ b/packages/blade/src/components/BaseHeaderFooter/BaseHeaderFooter.internal.stories.tsx @@ -56,6 +56,17 @@ export const BaseHeaderKitchenSink = (): React.ReactElement => { showBackButton={true} /> + + } + title="When_Title_Does_Not_Break_Word_And_Goes_On_Next_Line" + subtitle="When The Subtitle of this BaseHeader is So Largeeeee That It Goes On Next Line" + titleSuffix={New} + trailing={Apply} + showCloseButton={true} + showBackButton={true} + /> + should render a BottomSheet ssr 1`] = `"
"`; +exports[` should render a BottomSheet ssr 1`] = `"
"`; exports[` should render a BottomSheet ssr 2`] = ` .c3.c3.c3.c3.c3 { @@ -311,6 +311,7 @@ exports[` should render a BottomSheet ssr 2`] = ` letter-spacing: 0px; margin: 0; padding: 0; + word-break: break-word; margin-top: 1px; } diff --git a/packages/blade/src/components/BottomSheet/__tests__/__snapshots__/BottomSheet.web.test.tsx.snap b/packages/blade/src/components/BottomSheet/__tests__/__snapshots__/BottomSheet.web.test.tsx.snap index 4fbd9c17986..cea5acd7ce5 100644 --- a/packages/blade/src/components/BottomSheet/__tests__/__snapshots__/BottomSheet.web.test.tsx.snap +++ b/packages/blade/src/components/BottomSheet/__tests__/__snapshots__/BottomSheet.web.test.tsx.snap @@ -1122,6 +1122,7 @@ exports[` should render Header/Footer/Body properly on opened sta letter-spacing: 0px; margin: 0; padding: 0; + word-break: break-word; margin-top: 1px; } diff --git a/packages/blade/src/components/Drawer/__tests__/__snapshots__/Drawer.web.test.tsx.snap b/packages/blade/src/components/Drawer/__tests__/__snapshots__/Drawer.web.test.tsx.snap index cc7774f1c50..33c6728b7a4 100644 --- a/packages/blade/src/components/Drawer/__tests__/__snapshots__/Drawer.web.test.tsx.snap +++ b/packages/blade/src/components/Drawer/__tests__/__snapshots__/Drawer.web.test.tsx.snap @@ -262,6 +262,7 @@ exports[`Drawer renders a Drawer 1`] = ` letter-spacing: 0px; margin: 0; padding: 0; + word-break: break-word; margin-top: 1px; } diff --git a/packages/blade/src/components/Menu/__tests__/__snapshots__/Menu.web.test.tsx.snap b/packages/blade/src/components/Menu/__tests__/__snapshots__/Menu.web.test.tsx.snap index 4dd1951d97b..ce45f231030 100644 --- a/packages/blade/src/components/Menu/__tests__/__snapshots__/Menu.web.test.tsx.snap +++ b/packages/blade/src/components/Menu/__tests__/__snapshots__/Menu.web.test.tsx.snap @@ -339,6 +339,7 @@ exports[`Menu renders a Menu 1`] = ` letter-spacing: 0px; margin: 0; padding: 0; + word-break: break-word; margin-top: 1px; } diff --git a/packages/blade/src/components/Modal/__tests__/__snapshots__/Modal.web.test.tsx.snap b/packages/blade/src/components/Modal/__tests__/__snapshots__/Modal.web.test.tsx.snap index 645eb0c327d..68f5707c4ff 100644 --- a/packages/blade/src/components/Modal/__tests__/__snapshots__/Modal.web.test.tsx.snap +++ b/packages/blade/src/components/Modal/__tests__/__snapshots__/Modal.web.test.tsx.snap @@ -233,6 +233,7 @@ exports[`Modal renders a Modal with Header and Footer 1`] = ` letter-spacing: 0px; margin: 0; padding: 0; + word-break: break-word; margin-top: 1px; }