Enhance style props types

jxom · Aug 27, 2021 · 6106312 · 6106312
1 parent 6e2b448
commit 6106312
Show file tree

Hide file tree

Showing 17 changed files with 2,388 additions and 544 deletions.
diff --git a/package.json b/package.json
@@ -68,7 +68,7 @@
     "rollup-plugin-ignore": "1.0.9",
     "rollup-plugin-proxy-directories": "1.2.0",
     "rollup-plugin-terser": "7.0.2",
-    "typescript": "3.9.2"
+    "typescript": "4.4.2"
   },
   "workspaces": {
     "packages": [

diff --git a/packages/bumbag-native-picker/src/Picker/Picker.tsx b/packages/bumbag-native-picker/src/Picker/Picker.tsx
@@ -49,6 +49,7 @@ const useProps = createHook<PickerProps>(
             onChange={onChange}
             value={value}
             overrides={overrides}
+            type="radio"
             {...menuOptionGroupProps}
           >
             {options.map((option, index) => (

diff --git a/packages/bumbag-native-toast/src/Toast/Toast.tsx b/packages/bumbag-native-toast/src/Toast/Toast.tsx
@@ -20,12 +20,12 @@ export type LocalToastProps = {
   textWrapperProps?: Partial<BoxProps>;
   textProps?: Partial<RNTextInputProps>;
 };
-export type ToastProps = BoxProps & RNViewProps & LocalToastProps;
+export type ToastProps = Omit<BoxProps, 'height'> & RNViewProps & LocalToastProps;
 
 const useProps = createHook<ToastProps>(
   (props) => {
     const { textWrapperProps, textProps: textInputProps = {}, title } = props;
-    const boxProps = Box.useProps(props);
+    const boxProps = Box.useProps({ ...props, height: undefined });
 
     //////////////////////////////////////////
 

diff --git a/packages/bumbag-native/package.json b/packages/bumbag-native/package.json
@@ -37,6 +37,8 @@
     "@testing-library/react-hooks": "1.1.0",
     "@testing-library/react-native": "^7.1.0",
     "bumbag": "^2.5.0",
+    "react-native": "0.65.1",
+    "react-native-svg": "12.1.0",
     "react-test-renderer": "16.8.6"
   },
   "author": "Jake Moxey",

diff --git a/packages/bumbag/src/ActionButtons/__tests__/ActionButtons.test.tsx b/packages/bumbag/src/ActionButtons/__tests__/ActionButtons.test.tsx
@@ -11,7 +11,7 @@ describe('props', () => {
   });
 
   it('should render correctly with CSS props', () => {
-    const { container } = render(<ActionButtons position="absolute" top="0" />);
+    const { container } = render(<ActionButtons position="absolute" top="0px" />);
     expect(container.firstChild).toMatchSnapshot();
   });
 

diff --git a/packages/bumbag/src/Block/__tests__/Block.test.tsx b/packages/bumbag/src/Block/__tests__/Block.test.tsx
@@ -11,7 +11,7 @@ describe('props', () => {
 
   it('should render correctly with CSS props', () => {
     const { container } = render(
-      <Block position="absolute" top="0">
+      <Block position="absolute" top="0px">
         Hello world
       </Block>
     );

diff --git a/packages/bumbag/src/Box/__tests__/Box.test.tsx b/packages/bumbag/src/Box/__tests__/Box.test.tsx
@@ -149,16 +149,6 @@ describe('props', () => {
     expect(container.firstChild).toMatchSnapshot();
   });
 
-  it('should render correctly with a spacing CSS prop', () => {
-    const { container } = render(<Box margin="xl" />);
-    expect(container.firstChild).toMatchSnapshot();
-  });
-
-  it('should render correctly with negative spacing CSS props', () => {
-    const { container } = render(<Box margin="-xl" />);
-    expect(container.firstChild).toMatchSnapshot();
-  });
-
   it('should render correctly with a font CSS prop', () => {
     const { container } = render(<Box font="default" />);
     expect(container.firstChild).toMatchSnapshot();

diff --git a/packages/bumbag/src/Flex/__tests__/Flex.test.tsx b/packages/bumbag/src/Flex/__tests__/Flex.test.tsx
@@ -11,7 +11,7 @@ describe('props', () => {
 
   it('should render correctly with CSS props', () => {
     const { container } = render(
-      <Flex position="absolute" top="0">
+      <Flex position="absolute" top="0px">
         Hello world
       </Flex>
     );

diff --git a/packages/bumbag/src/Group/__stories__/Group.stories.tsx b/packages/bumbag/src/Group/__stories__/Group.stories.tsx
@@ -5,7 +5,7 @@ export default { title: 'Group' };
 
 export const _default = () => (
   <Group>
-    <Box backgroundColor="primary" color="white" padding="0.5rem 1rem">
+    <Box backgroundColor="primary" color="white" padding="major-2">
       Hello
     </Box>
     <Button>Send</Button>
@@ -15,7 +15,7 @@ export const _default = () => (
 
 export const verticalGroups = () => (
   <Group orientation="vertical">
-    <Box backgroundColor="primary" color="white" padding="0.5rem 1rem">
+    <Box backgroundColor="primary" color="white" padding="major-2">
       Hello
     </Box>
     <Button>Send</Button>
@@ -25,7 +25,7 @@ export const verticalGroups = () => (
 
 export const responsiveBreakpoint = () => (
   <Group verticalBelow="widescreen">
-    <Box backgroundColor="primary" color="white" padding="0.5rem 1rem">
+    <Box backgroundColor="primary" color="white" padding="major-2">
       Hello
     </Box>
     <Button>Send</Button>

diff --git a/packages/bumbag/src/Group/__tests__/Group.test.tsx b/packages/bumbag/src/Group/__tests__/Group.test.tsx
@@ -18,7 +18,7 @@ describe('props', () => {
 
   it('should render correctly with CSS props', () => {
     const { container } = render(
-      <Group position="absolute" top="0">
+      <Group position="absolute" top="0px">
         <Button>Hello</Button>
         <Box>World</Box>
       </Group>

diff --git a/packages/bumbag/src/Inline/__tests__/Inline.tsx b/packages/bumbag/src/Inline/__tests__/Inline.tsx
@@ -11,7 +11,7 @@ describe('props', () => {
 
   it('should render correctly with CSS props', () => {
     const { container } = render(
-      <Inline position="absolute" top="0">
+      <Inline position="absolute" top="0px">
         Hello world
       </Inline>
     );

diff --git a/packages/bumbag/src/InlineBlock/__tests__/InlineBlock.tsx b/packages/bumbag/src/InlineBlock/__tests__/InlineBlock.tsx
@@ -11,7 +11,7 @@ describe('props', () => {
 
   it('should render correctly with CSS props', () => {
     const { container } = render(
-      <InlineBlock position="absolute" top="0">
+      <InlineBlock position="absolute" top="0px">
         Hello world
       </InlineBlock>
     );

diff --git a/packages/bumbag/src/InlineFlex/__tests__/InlineFlex.test.tsx b/packages/bumbag/src/InlineFlex/__tests__/InlineFlex.test.tsx
@@ -11,7 +11,7 @@ describe('props', () => {
 
   it('should render correctly with CSS props', () => {
     const { container } = render(
-      <InlineFlex position="absolute" top="0">
+      <InlineFlex position="absolute" top="0px">
         Hello world
       </InlineFlex>
     );

diff --git a/packages/bumbag/src/Input/Input.tsx b/packages/bumbag/src/Input/Input.tsx
@@ -145,12 +145,12 @@ const useProps = createHook<InputProps>(
             </>
           )}
           {before && (
-            <Box display="inline-flex" position="absolute" zIndex="3" height="100%">
+            <Box display="inline-flex" position="absolute" zIndex={3} height="100%">
               {before}
             </Box>
           )}
           {after && (
-            <Box display="inline-flex" position="absolute" right="0" zIndex="3" height="100%">
+            <Box display="inline-flex" position="absolute" right="0px" zIndex={3} height="100%">
               {after}
             </Box>
           )}

diff --git a/packages/bumbag/src/Radio/Radio.tsx b/packages/bumbag/src/Radio/Radio.tsx
@@ -11,7 +11,7 @@ export type LocalRadioProps = {
   /** Automatically focus on the radio */
   autoFocus?: boolean;
   checked?: boolean;
-  radioProps?: React.InputHTMLAttributes<any>;
+  radioProps?: Partial<BoxProps> & React.InputHTMLAttributes<any>;
   /** Is the radio checked by default? */
   defaultChecked?: boolean;
   /** Disables the radio */