feat: text white space

scaleway · Dec 11, 2024 · 5d90af4 · 5d90af4
1 parent ffb2c06
commit 5d90af4
Show file tree

Hide file tree

Showing 14 changed files with 164 additions and 94 deletions.
diff --git a/.changeset/gorgeous-falcons-peel.md b/.changeset/gorgeous-falcons-peel.md
@@ -0,0 +1,4 @@
+---
+"@ultraviolet/ui": patch
+---
+`<Text />`: new prop `whiteSpace`
diff --git a/packages/plus/src/components/Navigation/components/Item.tsx b/packages/plus/src/components/Navigation/components/Item.tsx
@@ -133,7 +133,6 @@ const WrapText = styled(Text, {
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 2;
-  white-space: pre-wrap;
 `
 
 const StyledStack = styled(Stack)`
@@ -602,6 +601,7 @@ export const Item = memo(
                     animation={animation}
                     disabled={disabled}
                     subLabel
+                    whiteSpace="pre-wrap"
                   >
                     {subLabel}
                   </WrapText>

diff --git a/packages/ui/src/__stories__/Properties/Properties.tsx b/packages/ui/src/__stories__/Properties/Properties.tsx
@@ -5,10 +5,6 @@ import { Stack } from '../../components/Stack'
 import { Table } from '../../components/Table'
 import { Text } from '../../components/Text'
 
-const StyledText = styled(Text)`
-  white-space: break-spaces;
-`
-
 const StyledTableRow = styled(Table.Row)`
   vertical-align: top;
 `
@@ -253,21 +249,21 @@ const Properties = () => {
                     </Text>
                   </Table.Cell>
                   <Table.Cell>
-                    <StyledText as="span" variant="body">
+                    <Text as="span" variant="body" whiteSpace="break-spaces">
                       {propertyValues.join(', ')}
-                    </StyledText>
+                    </Text>
                   </Table.Cell>
                   <Table.Cell>
-                    <StyledText as="span" variant="body">
+                    <Text as="span" variant="body" whiteSpace="break-spaces">
                       {findSimilarProperty.join(', ')}
-                    </StyledText>
+                    </Text>
                   </Table.Cell>
                   <Table.Cell>
-                    <StyledText as="span" variant="body">
+                    <Text as="span" variant="body" whiteSpace="break-spaces">
                       {sortedPropertiesUsagesCountAndComponentsName[
                         property
                       ].components.join(', ')}
-                    </StyledText>
+                    </Text>
                   </Table.Cell>
                 </StyledTableRow>
               )

diff --git a/packages/ui/src/components/Badge/__tests__/__snapshots__/index.test.tsx.snap b/packages/ui/src/components/Badge/__tests__/__snapshots__/index.test.tsx.snap
@@ -11,6 +11,7 @@ exports[`Badge > renders correctly prominence default 1`] = `
   text-transform: none;
   -webkit-text-decoration: none;
   text-decoration: none;
+  white-space: nowrap;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -23,7 +24,6 @@ exports[`Badge > renders correctly prominence default 1`] = `
   -ms-flex-pack: center;
   -webkit-justify-content: center;
   justify-content: center;
-  white-space: nowrap;
   border-radius: 1rem;
   padding: 0 0.75rem;
   gap: 0.5rem;
@@ -60,6 +60,7 @@ exports[`Badge > renders correctly prominence strong 1`] = `
   text-transform: none;
   -webkit-text-decoration: none;
   text-decoration: none;
+  white-space: nowrap;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -72,7 +73,6 @@ exports[`Badge > renders correctly prominence strong 1`] = `
   -ms-flex-pack: center;
   -webkit-justify-content: center;
   justify-content: center;
-  white-space: nowrap;
   border-radius: 1rem;
   padding: 0 0.75rem;
   gap: 0.5rem;
@@ -109,6 +109,7 @@ exports[`Badge > renders correctly sentiment danger 1`] = `
   text-transform: none;
   -webkit-text-decoration: none;
   text-decoration: none;
+  white-space: nowrap;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -121,7 +122,6 @@ exports[`Badge > renders correctly sentiment danger 1`] = `
   -ms-flex-pack: center;
   -webkit-justify-content: center;
   justify-content: center;
-  white-space: nowrap;
   border-radius: 1rem;
   padding: 0 0.75rem;
   gap: 0.5rem;
@@ -158,6 +158,7 @@ exports[`Badge > renders correctly sentiment info 1`] = `
   text-transform: none;
   -webkit-text-decoration: none;
   text-decoration: none;
+  white-space: nowrap;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -170,7 +171,6 @@ exports[`Badge > renders correctly sentiment info 1`] = `
   -ms-flex-pack: center;
   -webkit-justify-content: center;
   justify-content: center;
-  white-space: nowrap;
   border-radius: 1rem;
   padding: 0 0.75rem;
   gap: 0.5rem;
@@ -207,6 +207,7 @@ exports[`Badge > renders correctly sentiment neutral 1`] = `
   text-transform: none;
   -webkit-text-decoration: none;
   text-decoration: none;
+  white-space: nowrap;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -219,7 +220,6 @@ exports[`Badge > renders correctly sentiment neutral 1`] = `
   -ms-flex-pack: center;
   -webkit-justify-content: center;
   justify-content: center;
-  white-space: nowrap;
   border-radius: 1rem;
   padding: 0 0.75rem;
   gap: 0.5rem;
@@ -256,6 +256,7 @@ exports[`Badge > renders correctly sentiment primary 1`] = `
   text-transform: none;
   -webkit-text-decoration: none;
   text-decoration: none;
+  white-space: nowrap;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -268,7 +269,6 @@ exports[`Badge > renders correctly sentiment primary 1`] = `
   -ms-flex-pack: center;
   -webkit-justify-content: center;
   justify-content: center;
-  white-space: nowrap;
   border-radius: 1rem;
   padding: 0 0.75rem;
   gap: 0.5rem;
@@ -305,6 +305,7 @@ exports[`Badge > renders correctly sentiment secondary 1`] = `
   text-transform: none;
   -webkit-text-decoration: none;
   text-decoration: none;
+  white-space: nowrap;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -317,7 +318,6 @@ exports[`Badge > renders correctly sentiment secondary 1`] = `
   -ms-flex-pack: center;
   -webkit-justify-content: center;
   justify-content: center;
-  white-space: nowrap;
   border-radius: 1rem;
   padding: 0 0.75rem;
   gap: 0.5rem;
@@ -354,6 +354,7 @@ exports[`Badge > renders correctly sentiment success 1`] = `
   text-transform: none;
   -webkit-text-decoration: none;
   text-decoration: none;
+  white-space: nowrap;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -366,7 +367,6 @@ exports[`Badge > renders correctly sentiment success 1`] = `
   -ms-flex-pack: center;
   -webkit-justify-content: center;
   justify-content: center;
-  white-space: nowrap;
   border-radius: 1rem;
   padding: 0 0.75rem;
   gap: 0.5rem;
@@ -403,6 +403,7 @@ exports[`Badge > renders correctly sentiment warning 1`] = `
   text-transform: none;
   -webkit-text-decoration: none;
   text-decoration: none;
+  white-space: nowrap;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -415,7 +416,6 @@ exports[`Badge > renders correctly sentiment warning 1`] = `
   -ms-flex-pack: center;
   -webkit-justify-content: center;
   justify-content: center;
-  white-space: nowrap;
   border-radius: 1rem;
   padding: 0 0.75rem;
   gap: 0.5rem;
@@ -452,6 +452,7 @@ exports[`Badge > renders correctly size large 1`] = `
   text-transform: none;
   -webkit-text-decoration: none;
   text-decoration: none;
+  white-space: nowrap;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -464,7 +465,6 @@ exports[`Badge > renders correctly size large 1`] = `
   -ms-flex-pack: center;
   -webkit-justify-content: center;
   justify-content: center;
-  white-space: nowrap;
   border-radius: 1rem;
   padding: 0 1rem;
   gap: 0.5rem;
@@ -501,6 +501,7 @@ exports[`Badge > renders correctly size medium 1`] = `
   text-transform: none;
   -webkit-text-decoration: none;
   text-decoration: none;
+  white-space: nowrap;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -513,7 +514,6 @@ exports[`Badge > renders correctly size medium 1`] = `
   -ms-flex-pack: center;
   -webkit-justify-content: center;
   justify-content: center;
-  white-space: nowrap;
   border-radius: 1rem;
   padding: 0 0.75rem;
   gap: 0.5rem;
@@ -550,6 +550,7 @@ exports[`Badge > renders correctly size small 1`] = `
   text-transform: none;
   -webkit-text-decoration: none;
   text-decoration: none;
+  white-space: nowrap;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -562,7 +563,6 @@ exports[`Badge > renders correctly size small 1`] = `
   -ms-flex-pack: center;
   -webkit-justify-content: center;
   justify-content: center;
-  white-space: nowrap;
   border-radius: 1rem;
   padding: 0 0.5rem;
   gap: 0.25rem;
@@ -599,6 +599,7 @@ exports[`Badge > renders correctly when disabled 1`] = `
   text-transform: none;
   -webkit-text-decoration: none;
   text-decoration: none;
+  white-space: nowrap;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -611,7 +612,6 @@ exports[`Badge > renders correctly when disabled 1`] = `
   -ms-flex-pack: center;
   -webkit-justify-content: center;
   justify-content: center;
-  white-space: nowrap;
   border-radius: 1rem;
   padding: 0 0.75rem;
   gap: 0.5rem;
@@ -648,6 +648,7 @@ exports[`Badge > renders correctly with default values 1`] = `
   text-transform: none;
   -webkit-text-decoration: none;
   text-decoration: none;
+  white-space: nowrap;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -660,7 +661,6 @@ exports[`Badge > renders correctly with default values 1`] = `
   -ms-flex-pack: center;
   -webkit-justify-content: center;
   justify-content: center;
-  white-space: nowrap;
   border-radius: 1rem;
   padding: 0 0.75rem;
   gap: 0.5rem;
@@ -697,6 +697,7 @@ exports[`Badge > renders correctly with icon 1`] = `
   text-transform: none;
   -webkit-text-decoration: none;
   text-decoration: none;
+  white-space: nowrap;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -709,7 +710,6 @@ exports[`Badge > renders correctly with icon 1`] = `
   -ms-flex-pack: center;
   -webkit-justify-content: center;
   justify-content: center;
-  white-space: nowrap;
   border-radius: 1rem;
   padding: 0 0.75rem;
   gap: 0.5rem;

diff --git a/packages/ui/src/components/Badge/index.tsx b/packages/ui/src/components/Badge/index.tsx
@@ -97,7 +97,6 @@ const StyledSpan = styled(Text, {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  white-space: nowrap;
   border-radius: ${({ theme }) => theme.radii.xlarge};
   padding: 0
     ${({ theme, size }) => {
@@ -171,6 +170,7 @@ export const Badge = ({
       prominence={disabled ? 'weak' : 'default'}
       className={className}
       data-testid={dataTestId}
+      whiteSpace="nowrap"
     >
       {icon && size !== 'small' ? <Icon name={icon} size={16} /> : null}
       {children}

diff --git a/packages/ui/src/components/Snippet/__tests__/__snapshots__/index.test.tsx.snap b/packages/ui/src/components/Snippet/__tests__/__snapshots__/index.test.tsx.snap
@@ -50,11 +50,11 @@ exports[`Snippet > renders correctly 1`] = `
   text-transform: none;
   -webkit-text-decoration: none;
   text-decoration: none;
+  white-space: nowrap;
   margin: 0;
   padding: 1rem;
   padding-right: 4.5rem;
   overflow-x: auto;
-  white-space: nowrap;
   height: auto;
   counter-reset: section;
   overflow-y: hidden;
@@ -1312,11 +1312,11 @@ exports[`Snippet > renders correctly with copiedText 1`] = `
   text-transform: none;
   -webkit-text-decoration: none;
   text-decoration: none;
+  white-space: nowrap;
   margin: 0;
   padding: 1rem;
   padding-right: 4.5rem;
   overflow-x: auto;
-  white-space: nowrap;
   height: auto;
   counter-reset: section;
   overflow-y: hidden;
@@ -1526,11 +1526,11 @@ exports[`Snippet > renders correctly with copyText 1`] = `
   text-transform: none;
   -webkit-text-decoration: none;
   text-decoration: none;
+  white-space: nowrap;
   margin: 0;
   padding: 1rem;
   padding-right: 4.5rem;
   overflow-x: auto;
-  white-space: nowrap;
   height: auto;
   counter-reset: section;
   overflow-y: hidden;
@@ -3944,11 +3944,11 @@ exports[`Snippet > renders correctly with single line with prefix command 1`] =
   text-transform: none;
   -webkit-text-decoration: none;
   text-decoration: none;
+  white-space: nowrap;
   margin: 0;
   padding: 1rem;
   padding-right: 4.5rem;
   overflow-x: auto;
-  white-space: nowrap;
   height: auto;
   counter-reset: section;
   overflow-y: hidden;
@@ -4173,11 +4173,11 @@ exports[`Snippet > renders correctly with single line with prefix lines number 1
   text-transform: none;
   -webkit-text-decoration: none;
   text-decoration: none;
+  white-space: nowrap;
   margin: 0;
   padding: 1rem;
   padding-right: 4.5rem;
   overflow-x: auto;
-  white-space: nowrap;
   height: auto;
   counter-reset: section;
   overflow-y: hidden;