From e6d79d76527999854ae0a0ccf8d85125daa4a835 Mon Sep 17 00:00:00 2001 From: Matthias Date: Thu, 23 Jan 2025 15:11:07 +0100 Subject: [PATCH] fix(Button): remove illegal div wrapping children --- .changeset/moody-yaks-watch.md | 5 + .../__snapshots__/index.test.tsx.snap | 160 +- .../__snapshots__/index.test.tsx.snap | 162 +- packages/ui/src/components/Button/index.tsx | 76 +- .../__snapshots__/index.test.tsx.snap | 2392 +++++++---------- .../__snapshots__/index.test.tsx.snap | 840 +++--- .../__snapshots__/index.test.tsx.snap | 176 +- 7 files changed, 1618 insertions(+), 2193 deletions(-) create mode 100644 .changeset/moody-yaks-watch.md diff --git a/.changeset/moody-yaks-watch.md b/.changeset/moody-yaks-watch.md new file mode 100644 index 0000000000..dc5e42b83b --- /dev/null +++ b/.changeset/moody-yaks-watch.md @@ -0,0 +1,5 @@ +--- +"@ultraviolet/ui": patch +--- + +Fix `
should render correctly 1`] = ` class="emotion-6 emotion-18 emotion-8" type="button" > -
- - - -
+ + +
@@ -626,18 +622,16 @@ exports[`NumberInputField > should render correctly disabled 1`] = ` disabled="" type="button" > -
- - - -
+ + +
should render correctly disabled 1`] = ` disabled="" type="button" > -
- - - -
+ + +
@@ -1003,18 +995,16 @@ exports[`NumberInputField > should trigger event onMinCrossed & onMaxCrossed 1`] class="emotion-6 emotion-7 emotion-8" type="button" > -
- - - -
+ + +
should trigger event onMinCrossed & onMaxCrossed 1`] disabled="" type="button" > -
- - - -
+ + +
@@ -1317,18 +1305,16 @@ exports[`NumberInputField > should trigger events correctly 1`] = ` class="emotion-6 emotion-7 emotion-8" type="button" > -
- - - -
+ + +
should trigger events correctly 1`] = ` class="emotion-6 emotion-7 emotion-8" type="button" > -
- - - -
+ + +
diff --git a/packages/plus/src/components/Navigation/__tests__/__snapshots__/index.test.tsx.snap b/packages/plus/src/components/Navigation/__tests__/__snapshots__/index.test.tsx.snap index 93c38efb28..08a59cd7ee 100644 --- a/packages/plus/src/components/Navigation/__tests__/__snapshots__/index.test.tsx.snap +++ b/packages/plus/src/components/Navigation/__tests__/__snapshots__/index.test.tsx.snap @@ -2857,34 +2857,32 @@ exports[`Navigation > click on expand / collapse button 2`] = ` class="emotion-16 emotion-17" type="button" > -
-
+ - - - - - - -
+ + + +
@@ -2916,40 +2914,38 @@ exports[`Navigation > click on expand / collapse button 2`] = ` class="emotion-33 emotion-34" type="button" > -
-
+ - - - - - + + - -
+ +
@@ -2968,40 +2964,38 @@ exports[`Navigation > click on expand / collapse button 2`] = ` class="emotion-16 emotion-17" type="button" > -
-
+ - - - - - + + - -
+ +
diff --git a/packages/ui/src/components/Button/index.tsx b/packages/ui/src/components/Button/index.tsx index 6087872f19..abd7d45da7 100644 --- a/packages/ui/src/components/Button/index.tsx +++ b/packages/ui/src/components/Button/index.tsx @@ -60,6 +60,7 @@ type StyledButtonProps = Required< 'size' | 'sentiment' | 'disabled' | 'iconPosition' | 'fullWidth' > > & { iconOnly: boolean } + const coreStyle = ({ theme, size, @@ -81,44 +82,45 @@ const coreStyle = ({ width = `${theme.sizing[SIZE_HEIGHT[size]]}` } - return `display: inline-flex; - height: ${theme.sizing[SIZE_HEIGHT[size]]}; - padding: 0 ${theme.space[SIZE_PADDING_KEY[size]]}; - flex-direction: ${iconPosition === 'right' ? 'row-reverse' : 'row'}; - gap: ${theme.space[SIZE_GAP_KEY[size]]}; - border-radius: ${theme.radii.default}; - box-sizing: border-box; - width: ${width}; - align-items: center; - cursor: ${disabled ? 'not-allowed' : 'pointer'}; - justify-content: center; - outline-offset: 2px; - white-space: nowrap; - text-decoration: none; - &:hover { + return ` + display: inline-flex; + height: ${theme.sizing[SIZE_HEIGHT[size]]}; + padding: 0 ${theme.space[SIZE_PADDING_KEY[size]]}; + flex-direction: ${iconPosition === 'right' ? 'row-reverse' : 'row'}; + gap: ${theme.space[SIZE_GAP_KEY[size]]}; + border-radius: ${theme.radii.default}; + box-sizing: border-box; + width: ${width}; + align-items: center; + cursor: ${disabled ? 'not-allowed' : 'pointer'}; + justify-content: center; + outline-offset: 2px; + white-space: nowrap; text-decoration: none; - } + &:hover { + text-decoration: none; + } - ${ - disabled - ? '' - : ` - &:active { - box-shadow: ${theme.shadows[FOCUS_RING_KEY[sentiment]]}; - } - ` - } + ${ + disabled + ? '' + : ` + &:active { + box-shadow: ${theme.shadows[FOCUS_RING_KEY[sentiment]]}; + } + ` + } - /* We can't use Text component because of button hover effect, so we need to duplicate */ - font-size: ${font.fontSize}; - font-family: ${font.fontFamily}; - font-weight: ${font.weight}; - letter-spacing: ${font.letterSpacing}; - line-height: ${font.lineHeight}; - paragraph-spacing: ${font.paragraphSpacing}; - text-case: ${font.textCase}; -` + /* We can't use Text component because of button hover effect, so we need to duplicate */ + font-size: ${font.fontSize}; + font-family: ${font.fontFamily}; + font-weight: ${font.weight}; + letter-spacing: ${font.letterSpacing}; + line-height: ${font.lineHeight}; + paragraph-spacing: ${font.paragraphSpacing}; + text-case: ${font.textCase}; + ` } const StyledFilledButton = styled('button', { @@ -380,11 +382,7 @@ export const Button = forwardRef( color="currentColor" /> ) : null} - {children && typeof children !== 'string' ? ( -
{children}
- ) : ( - children - )} + {children} ) diff --git a/packages/ui/src/components/DateInput/__tests__/__snapshots__/index.test.tsx.snap b/packages/ui/src/components/DateInput/__tests__/__snapshots__/index.test.tsx.snap index 87b51b841c..77c4e07c20 100644 --- a/packages/ui/src/components/DateInput/__tests__/__snapshots__/index.test.tsx.snap +++ b/packages/ui/src/components/DateInput/__tests__/__snapshots__/index.test.tsx.snap @@ -829,519 +829,435 @@ exports[`DateInput > render correctly with a array of dates to exclude 1`] = ` class="emotion-61 emotion-62 emotion-28" type="button" > -
- - 27 - -
+ + 27 + @@ -2687,145 +2603,121 @@ exports[`DateInput > render correctly with showMonthYearPicker with default date class="emotion-40 emotion-41 emotion-28" type="button" > -
- - Jan - -
+ + Jan + @@ -3622,147 +3514,123 @@ exports[`DateInput > render correctly with showMonthYearPicker with excluded mon class="emotion-40 emotion-41 emotion-28" type="button" > -
- - Jan - -
+ + Jan + @@ -6862,516 +6730,432 @@ exports[`DateInput > renders correctly with date-fns locale es 1`] = ` class="emotion-61 emotion-62 emotion-28" type="button" > -
- - 28 - -
+ + 28 + @@ -8092,516 +7876,432 @@ exports[`DateInput > renders correctly with date-fns locale fr 1`] = ` class="emotion-61 emotion-62 emotion-28" type="button" > -
- - 28 - -
+ + 28 + @@ -9322,516 +9022,432 @@ exports[`DateInput > renders correctly with date-fns locale ru 1`] = ` class="emotion-61 emotion-62 emotion-28" type="button" > -
- - 28 - -
+ + 28 + diff --git a/packages/ui/src/components/NumberInput/__tests__/__snapshots__/index.test.tsx.snap b/packages/ui/src/components/NumberInput/__tests__/__snapshots__/index.test.tsx.snap index 0ff3040f3d..0ee123a2aa 100644 --- a/packages/ui/src/components/NumberInput/__tests__/__snapshots__/index.test.tsx.snap +++ b/packages/ui/src/components/NumberInput/__tests__/__snapshots__/index.test.tsx.snap @@ -480,18 +480,16 @@ exports[`NumberInput > should click on center button 1`] = ` class="emotion-6 emotion-7 emotion-8" type="button" > -
- - - -
+ + +
should click on center button 1`] = ` class="emotion-6 emotion-7 emotion-8" type="button" > -
- - - -
+ + +
@@ -1014,18 +1010,16 @@ exports[`NumberInput > should click on min button 1`] = ` class="emotion-6 emotion-7 emotion-8" type="button" > -
- - - -
+ + +
should click on min button 1`] = ` class="emotion-6 emotion-7 emotion-8" type="button" > -
- - - -
+ + +
@@ -1548,18 +1540,16 @@ exports[`NumberInput > should click on plus button with a step value 1`] = ` class="emotion-6 emotion-7 emotion-8" type="button" > -
- - - -
+ + +
should click on plus button with a step value 1`] = ` class="emotion-6 emotion-7 emotion-8" type="button" > -
- - - -
+ + +
@@ -2082,18 +2070,16 @@ exports[`NumberInput > should click on plus button with a step value and an in-b class="emotion-6 emotion-7 emotion-8" type="button" > -
- - - -
+ + +
should click on plus button with a step value and an in-b class="emotion-6 emotion-7 emotion-8" type="button" > -
- - - -
+ + +
@@ -2616,18 +2600,16 @@ exports[`NumberInput > should focus input and modify value 1`] = ` class="emotion-6 emotion-7 emotion-8" type="button" > -
- - - -
+ + +
should focus input and modify value 1`] = ` class="emotion-6 emotion-7 emotion-8" type="button" > -
- - - -
+ + +
@@ -3274,18 +3254,16 @@ exports[`NumberInput > should focus input and modify value onMaxCrossed 1`] = ` class="emotion-6 emotion-7 emotion-8" type="button" > -
- - - -
+ + +
should focus input and modify value onMaxCrossed 1`] = ` disabled="" type="button" > -
- - - -
+ + +
@@ -3934,18 +3910,16 @@ exports[`NumberInput > should focus input and modify value onMinCrossed 1`] = ` disabled="" type="button" > -
- - - -
+ + +
should focus input and modify value onMinCrossed 1`] = ` class="emotion-6 emotion-18 emotion-8" type="button" > -
- - - -
+ + +
@@ -4592,18 +4564,16 @@ exports[`NumberInput > should increase and decrease input with arrow up and down class="emotion-6 emotion-7 emotion-8" type="button" > -
- - - -
+ + +
should increase and decrease input with arrow up and down disabled="" type="button" > -
- - - -
+ + +
@@ -5251,18 +5219,16 @@ exports[`NumberInput > should increase and decrease input with arrow up and down class="emotion-6 emotion-7 emotion-8" type="button" > -
- - - -
+ + +
should increase and decrease input with arrow up and down disabled="" type="button" > -
- - - -
+ + +
@@ -5786,18 +5750,16 @@ exports[`NumberInput > should not changed controlled value on click min button 1 class="emotion-6 emotion-7 emotion-8" type="button" > -
- - - -
+ + +
should not changed controlled value on click min button 1 class="emotion-6 emotion-7 emotion-8" type="button" > -
- - - -
+ + +
@@ -6086,18 +6046,16 @@ exports[`NumberInput > should renders correctly 1`] = ` class="emotion-6 emotion-7 emotion-8" type="button" > -
- - - -
+ + +
should renders correctly 1`] = ` class="emotion-6 emotion-7 emotion-8" type="button" > -
- - - -
+ + +
@@ -6529,18 +6485,16 @@ exports[`NumberInput > should renders correctly disabled 1`] = ` disabled="" type="button" > -
- - - -
+ + +
should renders correctly disabled 1`] = ` disabled="" type="button" > -
- - - -
+ + +
@@ -7053,18 +7005,16 @@ exports[`NumberInput > should renders correctly max value 1`] = ` class="emotion-6 emotion-7 emotion-8" type="button" > -
- - - -
+ + +
should renders correctly max value 1`] = ` class="emotion-6 emotion-7 emotion-8" type="button" > -
- - - -
+ + +
@@ -7575,18 +7523,16 @@ exports[`NumberInput > should renders correctly min value 1`] = ` class="emotion-6 emotion-7 emotion-8" type="button" > -
- - - -
+ + +
should renders correctly min value 1`] = ` class="emotion-6 emotion-7 emotion-8" type="button" > -
- - - -
+ + +
@@ -8109,18 +8053,16 @@ exports[`NumberInput > should renders correctly with error 1`] = ` class="emotion-6 emotion-7 emotion-8" type="button" > -
- - - -
+ + +
should renders correctly with error 1`] = ` class="emotion-6 emotion-7 emotion-8" type="button" > -
- - - -
+ + +
should renders correctly with placeholder 1`] = ` class="emotion-6 emotion-7 emotion-8" type="button" > -
- - - -
+ + +
should renders correctly with placeholder 1`] = ` class="emotion-6 emotion-7 emotion-8" type="button" > -
- - - -
+ + +
@@ -9159,18 +9095,16 @@ exports[`NumberInput > should renders large size 1`] = ` class="emotion-6 emotion-7 emotion-8" type="button" > -
- - - -
+ + +
should renders large size 1`] = ` class="emotion-6 emotion-7 emotion-8" type="button" > -
- - - -
+ + +
@@ -9600,18 +9532,16 @@ exports[`NumberInput > should renders small size 1`] = ` class="emotion-6 emotion-7 emotion-8" type="button" > -
- - - -
+ + +
should renders small size 1`] = ` class="emotion-6 emotion-7 emotion-8" type="button" > -
- - - -
+ + +
@@ -10255,18 +10183,16 @@ exports[`NumberInput > should use maxValue instead of defaultValue if default va class="emotion-6 emotion-7 emotion-8" type="button" > -
- - - -
+ + +
should use maxValue instead of defaultValue if default va disabled="" type="button" > -
- - - -
+ + +
@@ -10915,18 +10839,16 @@ exports[`NumberInput > should use minValue instead of defaultValue if default va disabled="" type="button" > -
- - - -
+ + +
should use minValue instead of defaultValue if default va class="emotion-6 emotion-18 emotion-8" type="button" > -
- - - -
+ + +
@@ -11449,18 +11369,16 @@ exports[`NumberInput > should use the defaultValue 1`] = ` class="emotion-6 emotion-7 emotion-8" type="button" > -
- - - -
+ + +
should use the defaultValue 1`] = ` class="emotion-6 emotion-7 emotion-8" type="button" > -
- - - -
+ + +
diff --git a/packages/ui/src/components/Pagination/__tests__/__snapshots__/index.test.tsx.snap b/packages/ui/src/components/Pagination/__tests__/__snapshots__/index.test.tsx.snap index 77989e09aa..4898846ee9 100644 --- a/packages/ui/src/components/Pagination/__tests__/__snapshots__/index.test.tsx.snap +++ b/packages/ui/src/components/Pagination/__tests__/__snapshots__/index.test.tsx.snap @@ -359,45 +359,35 @@ exports[`Pagination > should render correctly 1`] = ` class="emotion-12 emotion-13 emotion-14" type="button" > -
- 1 -
+ 1
should render correctly component with disabled 1`] = ` disabled="" type="button" > -
- 1 -
+ 1 should render correctly component with disabled 1`] = ` disabled="" type="button" > -
- 4 -
+ 4 should render correctly component with disabled 1`] = ` disabled="" type="button" > -
- 10 -
+ 10
should render correctly component with pageTabCount 1`] = class="emotion-12 emotion-13 emotion-7" type="button" > -
- 1 -
+ 1 should render correctly component with pageTabCount 1`] = class="emotion-12 emotion-13 emotion-7" type="button" > -
- 11 -
+ 11 should render correctly component with pageTabCount 1`] = class="emotion-12 emotion-13 emotion-7" type="button" > -
- 16 -
+ 16
should render correctly with page < 1 1`] = ` class="emotion-12 emotion-13 emotion-7" type="button" > -
- 1 -
+ 1
should render correctly with page > pageCount 1`] = ` class="emotion-12 emotion-13 emotion-7" type="button" > -
- 1 -
+ 1
should render correctly with pageClick 1`] = ` class="emotion-12 emotion-13 emotion-7" type="button" > -
- 1 -
+ 1 should render correctly with pageClick 1`] = ` class="emotion-12 emotion-13 emotion-7" type="button" > -
- 10 -
+ 10
should render correctly with pageCount is 1 1`] = ` class="emotion-12 emotion-13 emotion-14" type="button" > -
- 1 -
+ 1
should render correctly with perPage - default values 1`] class="emotion-34 emotion-35 emotion-29" type="button" > -
- 1 -
+ 1 should render correctly with perPage - default values 1`] class="emotion-34 emotion-35 emotion-29" type="button" > -
- 10 -
+ 10
should render correctly with perPage 1`] = ` class="emotion-34 emotion-35 emotion-29" type="button" > -
- 1 -
+ 1 should render correctly with perPage 1`] = ` class="emotion-34 emotion-35 emotion-29" type="button" > -
- 10 -
+ 10
should work correctly with perPage 1`] = ` class="emotion-79 emotion-80 emotion-74" type="button" > -
- 1 -
+ 1 should work correctly with perPage 1`] = ` class="emotion-79 emotion-80 emotion-74" type="button" > -
- 10 -
+ 10