Fix flexGrow={0}, flexShrink={0}

Setting the global props `flexGrow` and `flexShrink` to `0` doesn't work because they are emitted using a truthiness check, which `0` fails. This results in `flexGrow={0}` returning an empty string and not adding the `flex_grow_0` class and consequently not applying the `flex-grow: 0;' style to the component. This commit fixes the bug by replacing the truthiness check with an inclusion check using the `Binary` type of the `flexGrow` and `flexShrink` props. Signed-off-by: Jasper <jasperfurniss@gmail.com>
powerhome · Jul 11, 2023 · 7c5969d · 7c5969d
1 parent 7d013bf
commit 7c5969d
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 7 deletions.
diff --git a/playbook/app/pb_kits/playbook/types/base.ts b/playbook/app/pb_kits/playbook/types/base.ts
@@ -1,7 +1,8 @@
 // Simple base types
 import { SyntheticEvent } from "react"
 
-export type Binary = 0 | 1
+export const BitValues = [0, 1] as const
+export type Binary = typeof BitValues[number]
 export type Callback<T, K> = (arg: T) => K
 export type EmptyObject = Record<string, unknown>
 export type InputCallback<T> = Callback<SyntheticEvent<T>, void>

diff --git a/playbook/app/pb_kits/playbook/utilities/globalProps.ts b/playbook/app/pb_kits/playbook/utilities/globalProps.ts
@@ -2,6 +2,7 @@ import { omit } from 'lodash'
 import { camelToSnakeCase } from './text'
 
 import {
+  BitValues,
   Binary,
   Display,
   DisplaySizes,
@@ -48,7 +49,7 @@ type FlexDirection = {
 }
 
 type FlexGrow = {
-  flexGrow?: 0 | 1
+  flexGrow?: Binary
 }
 
 type FlexShrink = {
@@ -316,15 +317,19 @@ const PROP_CATEGORIES: {[key:string]: (props: {[key: string]: any}) => string} =
   flexGrowProps: ({ flexGrow }: FlexGrow) => {
     if (typeof flexGrow == 'object') {
       return getResponsivePropClasses(flexGrow, 'flex_grow')
+    } else if (BitValues.includes(flexGrow)) {
+      return `flex_grow_${flexGrow}`
     } else {
-      return flexGrow ? `flex_grow_${flexGrow}` : ''
+      return ''
     }
   },
   flexShrinkProps: ({ flexShrink }: FlexShrink) => {
     if (typeof flexShrink == 'object') {
       return getResponsivePropClasses(flexShrink, 'flex_shrink')
+    } else if (BitValues.includes(flexShrink)) {
+      return `flex_shrink_${flexShrink}`
     } else {
-      return flexShrink ? `flex_shrink_${flexShrink}` : ''
+      return ''
     }
   },
   justifyContentProps: ({ justifyContent }: JustifyContent) => {
@@ -392,4 +397,4 @@ export const domSafeProps = (props: {[key: string]: string}): {[key: string]: st
     'dark',
   ]
   return omit(props, notSafeProps)
-}
+}
diff --git a/playbook/app/pb_kits/playbook/utilities/test/globalProps/flexGrow.test.js b/playbook/app/pb_kits/playbook/utilities/test/globalProps/flexGrow.test.js
@@ -12,7 +12,7 @@ test('Global Props: Returns ordinal suffixed class name', () => {
     render(
       <Body
           data={{ testid: testId }}
-          flexGrow={`${x}`}
+          flexGrow={x}
           text="Hi"
       />
     )

diff --git a/playbook/app/pb_kits/playbook/utilities/test/globalProps/flexShrink.test.js b/playbook/app/pb_kits/playbook/utilities/test/globalProps/flexShrink.test.js
@@ -12,7 +12,7 @@ test('Global Props: Returns ordinal suffixed class name', () => {
     render(
       <Body
           data={{ testid: testId }}
-          flexShrink={`${x}`}
+          flexShrink={x}
           text="Hi"
       />
     )