renders correctly without separator with label on the right 1
text-transform: none;
-webkit-text-decoration: none;
text-decoration: none;
+ white-space: normal;
-webkit-transition: text-decoration-color 250ms ease-out;
transition: text-decoration-color 250ms ease-out;
text-decoration-thickness: 1px;
text-underline-offset: 2px;
text-decoration-color: transparent;
- white-space: normal;
}
.emotion-15 {
@@ -6563,12 +6563,12 @@ exports[`Stepper > renders correctly without separator with label on the right 1
text-transform: none;
-webkit-text-decoration: none;
text-decoration: none;
+ white-space: normal;
-webkit-transition: text-decoration-color 250ms ease-out;
transition: text-decoration-color 250ms ease-out;
text-decoration-thickness: 1px;
text-underline-offset: 2px;
text-decoration-color: transparent;
- white-space: normal;
}
.emotion-23 {
@@ -6607,12 +6607,12 @@ exports[`Stepper > renders correctly without separator with label on the right 1
text-transform: none;
-webkit-text-decoration: none;
text-decoration: none;
+ white-space: normal;
-webkit-transition: text-decoration-color 250ms ease-out;
transition: text-decoration-color 250ms ease-out;
text-decoration-thickness: 1px;
text-underline-offset: 2px;
text-decoration-color: transparent;
- white-space: normal;
}
renders correctly with counter, badge and subtitle 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;
@@ -324,7 +325,6 @@ exports[`Tab > renders correctly with counter, badge and subtitle 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/Tabs/__tests__/__snapshots__/index.test.tsx.snap b/packages/ui/src/components/Tabs/__tests__/__snapshots__/index.test.tsx.snap
index cd5d25fe22..d89efca1de 100644
--- a/packages/ui/src/components/Tabs/__tests__/__snapshots__/index.test.tsx.snap
+++ b/packages/ui/src/components/Tabs/__tests__/__snapshots__/index.test.tsx.snap
@@ -1487,6 +1487,7 @@ exports[`Tabs > renders correctly with Tabs with prop 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;
@@ -1499,7 +1500,6 @@ exports[`Tabs > renders correctly with Tabs with prop 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;
@@ -1524,6 +1524,7 @@ exports[`Tabs > renders correctly with Tabs with prop 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;
@@ -1536,7 +1537,6 @@ exports[`Tabs > renders correctly with Tabs with prop 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;
@@ -2763,6 +2763,7 @@ exports[`Tabs > renders correctly with Tabs with prop 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;
@@ -2775,7 +2776,6 @@ exports[`Tabs > renders correctly with Tabs with prop 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;
@@ -2800,6 +2800,7 @@ exports[`Tabs > renders correctly with Tabs with prop 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;
@@ -2812,7 +2813,6 @@ exports[`Tabs > renders correctly with Tabs with prop 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/Text/__tests__/__snapshots__/index.test.tsx.snap b/packages/ui/src/components/Text/__tests__/__snapshots__/index.test.tsx.snap
index a3ec6f5557..b17b291cd5 100644
--- a/packages/ui/src/components/Text/__tests__/__snapshots__/index.test.tsx.snap
+++ b/packages/ui/src/components/Text/__tests__/__snapshots__/index.test.tsx.snap
@@ -725,6 +725,32 @@ exports[`Text > renders correctly with type="headingStronger" 1`] = `
`;
+exports[`Text > renders correctly with whiteSpace 1`] = `
+
+ .emotion-0 {
+ font-size: 1rem;
+ font-family: Inter,Asap,sans-serif;
+ font-weight: 400;
+ letter-spacing: 0;
+ line-height: 1.5rem;
+ text-transform: none;
+ -webkit-text-decoration: none;
+ text-decoration: none;
+ white-space: nowrap;
+}
+
+
+
+ This text is quite long. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+
+
+`;
+
exports[`Text > with disabled 1`] = `
.emotion-0 {
@@ -776,6 +802,32 @@ exports[`Text > with italic 1`] = `
`;
+exports[`Text > with monochrome 1`] = `
+
+ .emotion-0 {
+ color: #151a2d;
+ font-size: 1rem;
+ font-family: Inter,Asap,sans-serif;
+ font-weight: 400;
+ letter-spacing: 0;
+ line-height: 1.5rem;
+ text-transform: none;
+ -webkit-text-decoration: none;
+ text-decoration: none;
+}
+
+
+
+`;
+
exports[`Text > with multiple nested children renders correctly 1`] = `
.emotion-0 {
diff --git a/packages/ui/src/components/Text/__tests__/index.test.tsx b/packages/ui/src/components/Text/__tests__/index.test.tsx
index 6757bdee88..e8403f2465 100644
--- a/packages/ui/src/components/Text/__tests__/index.test.tsx
+++ b/packages/ui/src/components/Text/__tests__/index.test.tsx
@@ -92,4 +92,20 @@ describe('Text', () => {
Lorem Ipsum
,
))
+
+ test(`with monochrome`, () =>
+ shouldMatchEmotionSnapshot(
+
+ Lorem Ipsum
+ ,
+ ))
+
+ test(`renders correctly with whiteSpace`, () =>
+ shouldMatchEmotionSnapshot(
+
+ This text is quite long. Lorem ipsum dolor sit amet, consectetur
+ adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
+ magna aliqua.
+ ,
+ ))
})
diff --git a/packages/ui/src/components/Text/index.tsx b/packages/ui/src/components/Text/index.tsx
index b9d00e7d32..c10eae888b 100644
--- a/packages/ui/src/components/Text/index.tsx
+++ b/packages/ui/src/components/Text/index.tsx
@@ -19,6 +19,7 @@ const PROMINENCES = {
type ProminenceProps = keyof typeof PROMINENCES
type PlacementProps = React.CSSProperties['textAlign']
+type WhiteSpaceProps = React.CSSProperties['whiteSpace']
type TextVariant = keyof typeof typography
export const textVariants = Object.keys(typography) as TextVariant[]
@@ -35,6 +36,7 @@ const generateStyles = ({
disabled,
italic,
underline,
+ whiteSpace,
}: {
placement?: PlacementProps
prominence: ProminenceProps
@@ -45,6 +47,7 @@ const generateStyles = ({
disabled: boolean
italic: boolean
underline: boolean
+ whiteSpace?: WhiteSpaceProps
}): string => {
// stronger is available only for neutral sentiment
const definedProminence =
@@ -77,6 +80,7 @@ const generateStyles = ({
text-transform: ${theme.typography[variant].textCase};
text-decoration: ${theme.typography[variant].textDecoration};
${placement ? ` text-align: ${placement};` : ''}
+ ${whiteSpace ? `white-space: ${whiteSpace};` : ''}
${
oneLine
@@ -87,6 +91,7 @@ const generateStyles = ({
}
${italic ? `font-style: italic;` : ''}
${underline ? `text-decoration: underline;` : ''}
+
`
}
@@ -110,6 +115,7 @@ type TextProps = {
dir?: 'ltr' | 'rtl' | 'auto'
htmlFor?: string
'data-testid'?: string
+ whiteSpace?: WhiteSpaceProps
}
const StyledText = styled('div', {
@@ -124,6 +130,7 @@ const StyledText = styled('div', {
'disabled',
'italic',
'underline',
+ 'whiteSpace',
].includes(prop),
})<{
placement?: PlacementProps
@@ -135,6 +142,7 @@ const StyledText = styled('div', {
italic: boolean
underline: boolean
htmlFor?: string
+ whiteSpace?: WhiteSpaceProps
}>(generateStyles)
/**
@@ -155,6 +163,7 @@ export const Text = ({
underline = false,
id,
dir,
+ whiteSpace,
htmlFor,
'data-testid': dataTestId,
}: TextProps) => {
@@ -182,6 +191,7 @@ export const Text = ({
dir={dir}
htmlFor={htmlFor}
data-testid={dataTestId}
+ whiteSpace={whiteSpace}
>
{children}