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', {