chore(react-components): add "flexShrink: 0" for Checkbox, Radio and …

…Switch
PeculiarVentures · Jun 24, 2024 · 9654df7 · 9654df7
1 parent 58393d5
commit 9654df7
Show file tree

Hide file tree

Showing 6 changed files with 78 additions and 0 deletions.
diff --git a/packages/react-components/src/Checkbox/__snapshots__/checkbox.test.tsx.snap b/packages/react-components/src/Checkbox/__snapshots__/checkbox.test.tsx.snap
@@ -10,6 +10,9 @@ exports[`<Checkbox /> Checkbox render colors color "primary" 1`] = `
   width: var(--pv-size-base-4);
   height: var(--pv-size-base-4);
   position: relative;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
 }
 
 .emotion-1 {
@@ -141,6 +144,9 @@ exports[`<Checkbox /> Checkbox render colors color "secondary" 1`] = `
   width: var(--pv-size-base-4);
   height: var(--pv-size-base-4);
   position: relative;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
 }
 
 .emotion-1 {
@@ -272,6 +278,9 @@ exports[`<Checkbox /> Checkbox render variants should be checked 1`] = `
   width: var(--pv-size-base-4);
   height: var(--pv-size-base-4);
   position: relative;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
 }
 
 .emotion-1 {
@@ -404,6 +413,9 @@ exports[`<Checkbox /> Checkbox render variants should be checked, defaultChecked
   width: var(--pv-size-base-4);
   height: var(--pv-size-base-4);
   position: relative;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
 }
 
 .emotion-1 {
@@ -536,6 +548,9 @@ exports[`<Checkbox /> Checkbox render variants should be disabled 1`] = `
   width: var(--pv-size-base-4);
   height: var(--pv-size-base-4);
   position: relative;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
 }
 
 .emotion-1 {
@@ -668,6 +683,9 @@ exports[`<Checkbox /> Checkbox render variants should have className 1`] = `
   width: var(--pv-size-base-4);
   height: var(--pv-size-base-4);
   position: relative;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
 }
 
 .emotion-1 {
@@ -799,6 +817,9 @@ exports[`<Checkbox /> Checkbox render variants should have custom checked icon 1
   width: var(--pv-size-base-4);
   height: var(--pv-size-base-4);
   position: relative;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
 }
 
 .emotion-1 {
@@ -931,6 +952,9 @@ exports[`<Checkbox /> Checkbox render variants should have name attr 1`] = `
   width: var(--pv-size-base-4);
   height: var(--pv-size-base-4);
   position: relative;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
 }
 
 .emotion-1 {
@@ -1063,6 +1087,9 @@ exports[`<Checkbox /> Checkbox render variants should have required 1`] = `
   width: var(--pv-size-base-4);
   height: var(--pv-size-base-4);
   position: relative;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
 }
 
 .emotion-1 {
@@ -1195,6 +1222,9 @@ exports[`<Checkbox /> Checkbox render variants should have test id 1`] = `
   width: var(--pv-size-base-4);
   height: var(--pv-size-base-4);
   position: relative;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
 }
 
 .emotion-1 {
@@ -1327,6 +1357,9 @@ exports[`<Checkbox /> Checkbox render variants should render as default 1`] = `
   width: var(--pv-size-base-4);
   height: var(--pv-size-base-4);
   position: relative;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
 }
 
 .emotion-1 {

diff --git a/packages/react-components/src/Checkbox/checkbox.tsx b/packages/react-components/src/Checkbox/checkbox.tsx
@@ -76,6 +76,7 @@ const CheckboxRoot = styled('label')({
   width: 'var(--pv-size-base-4)',
   height: 'var(--pv-size-base-4)',
   position: 'relative',
+  flexShrink: 0,
 });
 
 const CheckboxInput = styled('input', {

diff --git a/packages/react-components/src/Radio/__snapshots__/radio.test.tsx.snap b/packages/react-components/src/Radio/__snapshots__/radio.test.tsx.snap
@@ -12,6 +12,9 @@ exports[`<Radio /> Radio render colors color "primary" 1`] = `
   height: var(--pv-size-base-4);
   border-radius: 50%;
   position: relative;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
   color: var(--pv-color-gray-6);
 }
 
@@ -138,6 +141,9 @@ exports[`<Radio /> Radio render colors color "secondary" 1`] = `
   height: var(--pv-size-base-4);
   border-radius: 50%;
   position: relative;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
   color: var(--pv-color-gray-6);
 }
 
@@ -264,6 +270,9 @@ exports[`<Radio /> Radio render variants should be checked, defaultChecked prop
   height: var(--pv-size-base-4);
   border-radius: 50%;
   position: relative;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
   color: var(--pv-color-gray-6);
 }
 
@@ -391,6 +400,9 @@ exports[`<Radio /> Radio render variants should be disabled 1`] = `
   height: var(--pv-size-base-4);
   border-radius: 50%;
   position: relative;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
   color: var(--pv-color-gray-6);
 }
 
@@ -518,6 +530,9 @@ exports[`<Radio /> Radio render variants should have className 1`] = `
   height: var(--pv-size-base-4);
   border-radius: 50%;
   position: relative;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
   color: var(--pv-color-gray-6);
 }
 
@@ -644,6 +659,9 @@ exports[`<Radio /> Radio render variants should have custom checked icon 1`] = `
   height: var(--pv-size-base-4);
   border-radius: 50%;
   position: relative;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
   color: var(--pv-color-gray-6);
 }
 
@@ -769,6 +787,9 @@ exports[`<Radio /> Radio render variants should have name attr 1`] = `
   height: var(--pv-size-base-4);
   border-radius: 50%;
   position: relative;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
   color: var(--pv-color-gray-6);
 }
 
@@ -896,6 +917,9 @@ exports[`<Radio /> Radio render variants should have required 1`] = `
   height: var(--pv-size-base-4);
   border-radius: 50%;
   position: relative;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
   color: var(--pv-color-gray-6);
 }
 
@@ -1023,6 +1047,9 @@ exports[`<Radio /> Radio render variants should have test id 1`] = `
   height: var(--pv-size-base-4);
   border-radius: 50%;
   position: relative;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
   color: var(--pv-color-gray-6);
 }
 
@@ -1150,6 +1177,9 @@ exports[`<Radio /> Radio render variants should render as default 1`] = `
   height: var(--pv-size-base-4);
   border-radius: 50%;
   position: relative;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
   color: var(--pv-color-gray-6);
 }
 

diff --git a/packages/react-components/src/Radio/radio.tsx b/packages/react-components/src/Radio/radio.tsx
@@ -74,6 +74,7 @@ const RadioRoot = styled('label')(
     height: 'var(--pv-size-base-4)',
     borderRadius: '50%',
     position: 'relative',
+    flexShrink: 0,
   },
   (props) => ({
     ...(props.theme.mode === 'dark' ? {

diff --git a/packages/react-components/src/Switch/__snapshots__/switch.test.tsx.snap b/packages/react-components/src/Switch/__snapshots__/switch.test.tsx.snap
@@ -19,6 +19,9 @@ exports[`<Switch /> colors color "primary" 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
 }
 
 .emotion-1 {
@@ -156,6 +159,9 @@ exports[`<Switch /> colors color "secondary" 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
 }
 
 .emotion-1 {
@@ -293,6 +299,9 @@ exports[`<Switch /> should pass className 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
 }
 
 .emotion-1 {
@@ -430,6 +439,9 @@ exports[`<Switch /> should render with default styles 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
 }
 
 .emotion-1 {

diff --git a/packages/react-components/src/Switch/switch.tsx b/packages/react-components/src/Switch/switch.tsx
@@ -70,6 +70,7 @@ const SwitchRoot = styled('label')({
   justifyContent: 'center',
   position: 'relative',
   alignItems: 'center',
+  flexShrink: 0,
 });
 
 const SwitchInput = styled('input', {