Merge pull request #4880 from GeekyAnts/release/3.4.0-rc.4

Release/3.4.0 rc.4
GeekyAnts · Apr 6, 2022 · 11333f2 · 11333f2
2 parents bdd2ba2 + d638ee3
commit 11333f2
Show file tree

Hide file tree

Showing 24 changed files with 72 additions and 35 deletions.
diff --git a/example/storybook/stories/components/Wrapper.tsx b/example/storybook/stories/components/Wrapper.tsx
@@ -22,6 +22,11 @@ const myTheme = extendTheme({
   space: {
     mySpace: '29px',
   },
+  colors: {
+    blue1: {
+      '100': 'blue',
+    },
+  },
 
   components: {
     Link: {

diff --git a/example/storybook/stories/components/primitives/ButtonGroup/variants.tsx b/example/storybook/stories/components/primitives/ButtonGroup/variants.tsx
@@ -12,7 +12,6 @@ export const Example = () => {
         justifyContent="center"
       >
         {/* Solid */}
-
         <Heading size="md">Solid</Heading>
         <Button.Group variant="solid" mb="2.5" mt="1.5">
           <Button colorScheme="teal">Save</Button>
@@ -21,39 +20,44 @@ export const Example = () => {
 
         <Divider />
 
-        <Heading size="md">Outline</Heading>
+        {/* Subtle */}
+        <Heading size="md">Subtle</Heading>
+        <Button.Group mb="2.5" mt="1.5" variant="subtle">
+          <Button colorScheme="teal">Save</Button>
+          <Button colorScheme="danger">Cancel</Button>
+        </Button.Group>
+
+        <Divider />
 
         {/* Outline */}
+        <Heading size="md">Outline</Heading>
         <Button.Group mb="2.5" mt="1.5" variant="outline">
           <Button colorScheme="teal">Save</Button>
           <Button colorScheme="danger">Cancel</Button>
         </Button.Group>
 
         <Divider />
 
-        <Heading size="md">Link</Heading>
-
         {/* Link */}
+        <Heading size="md">Link</Heading>
         <Button.Group mb="2.5" mt="1.5" variant="link">
           <Button colorScheme="teal">Save</Button>
           <Button colorScheme="danger">Cancel</Button>
         </Button.Group>
 
         <Divider />
 
-        <Heading size="md">Ghost</Heading>
-
         {/* Ghost */}
+        <Heading size="md">Ghost</Heading>
         <Button.Group mb="2.5" mt="1.5" variant="ghost">
           <Button colorScheme="teal">Save</Button>
           <Button colorScheme="danger">Cancel</Button>
         </Button.Group>
 
         <Divider />
 
-        <Heading size="md">Unstyled</Heading>
-
         {/* Unstyled */}
+        <Heading size="md">Unstyled</Heading>
         <Button.Group mb="2.5" mt="1.5" variant="unstyled">
           <Button colorScheme="teal">Save</Button>
           <Button colorScheme="danger">Cancel</Button>

diff --git a/package.json b/package.json
@@ -36,7 +36,7 @@
       "prettier --write"
     ]
   },
-  "version": "3.4.0-rc.3",
+  "version": "3.4.0-rc.4",
   "license": "MIT",
   "private": false,
   "main": "lib/commonjs/index",

diff --git a/src/components/composites/Alert/types.tsx b/src/components/composites/Alert/types.tsx
@@ -1,7 +1,7 @@
 import type { MutableRefObject } from 'react';
 import type { InterfaceBoxProps } from '../../../components/primitives/Box';
 import type { IIconProps } from '../../primitives';
-import type { CustomProps, VariantType } from '../../types';
+import type { ColorSchemeType, CustomProps, VariantType } from '../../types';
 
 export interface InterfaceAlertProps extends InterfaceBoxProps<IAlertProps> {
   /** The status of the alert
@@ -15,7 +15,7 @@ export interface InterfaceAlertProps extends InterfaceBoxProps<IAlertProps> {
 
   /** The colorScheme of the Alert.
    */
-  colorScheme?: string;
+  colorScheme?: ColorSchemeType;
 }
 export type IAlertContext = {
   status?: string;

diff --git a/src/components/composites/AppBar/types.tsx b/src/components/composites/AppBar/types.tsx
@@ -1,7 +1,8 @@
+import type { ColorSchemeType } from '../../../components/types';
 import type { InterfaceStackProps } from '../../primitives/Stack/Stack';
 
 export type IAppBarProps = InterfaceStackProps & {
-  colorScheme?: string;
+  colorScheme?: ColorSchemeType;
   statusBarHeight?: number;
   space?: number;
 };

diff --git a/src/components/composites/Badge/types.tsx b/src/components/composites/Badge/types.tsx
@@ -2,6 +2,7 @@ import type { ITextProps } from '../../primitives/Text/types';
 import type { IIconProps } from '../../primitives/Icon';
 import type { CustomProps, VariantType } from '../../types';
 import type { InterfaceBoxProps } from '../../primitives/Box';
+import type { ColorSchemeType } from '../../../components/types';
 
 export interface InterfaceBadgeProps extends InterfaceBoxProps<IBadgeProps> {
   /**
@@ -12,7 +13,7 @@ export interface InterfaceBadgeProps extends InterfaceBoxProps<IBadgeProps> {
   /**
    * The color scheme to use for the badge. Must be a key in theme.colors.
    */
-  colorScheme?: string;
+  colorScheme?: ColorSchemeType;
   /**
    * The right icon element to use in the button.
    */

diff --git a/src/components/composites/CircularProgress/types.ts b/src/components/composites/CircularProgress/types.ts
@@ -4,14 +4,15 @@ import type { CustomProps, ResponsiveValue } from '../../../components/types';
 import type { ISizes } from '../../../theme/base/sizes';
 import type { IColors } from '../../../theme/base/colors';
 import type { InterfaceBoxProps } from '../../../components/primitives/Box/types';
+import type { ColorSchemeType } from '../../../components/types';
 
 export type InterfaceCircularProgressProps = InterfaceBoxProps<ICircularProgressProps> & {
   style?: ViewStyle;
   children?: JSX.Element | JSX.Element[] | string;
   value: number;
   size?: ResponsiveValue<ISizes | (string & {}) | number>;
   thickness?: number;
-  colorScheme?: string;
+  colorScheme?: ColorSchemeType;
   color?: ResponsiveValue<IColors | (string & {})>;
   trackColor?: ResponsiveValue<IColors | (string & {})>;
   isIndeterminate?: boolean;

diff --git a/src/components/composites/Code/types.ts b/src/components/composites/Code/types.ts
@@ -1,8 +1,9 @@
 import type { CustomProps } from '../../../components/types/utils';
 import type { InterfaceBoxProps } from '../../primitives/Box';
+import type { ColorSchemeType } from '../../../components/types';
 
 export type InterfaceCodeProps = InterfaceBoxProps<ICodeProps> & {
-  colorScheme?: string | undefined;
+  colorScheme?: ColorSchemeType;
 };
 
 export type ICodeProps = InterfaceCodeProps & CustomProps<'Code'>;
diff --git a/src/components/composites/IconButton/types.ts b/src/components/composites/IconButton/types.ts
@@ -1,5 +1,7 @@
 import type { InterfacePressableProps } from '../../primitives/Pressable/types';
 import type { IIconProps } from '../../primitives/Icon';
+import type { ColorSchemeType } from '../../../components/types';
+
 import type { CustomProps, VariantType } from '../../types';
 import type { ThemeComponentSizeType } from '../../../components/types/utils';
 export interface InterfaceIconButtonProps
@@ -25,7 +27,7 @@ export interface InterfaceIconButtonProps
    * The color of the radio when it's checked. This should be one of the color keys in the theme (e.g."green", "red").
    * @default 'primary'
    */
-  colorScheme?: string;
+  colorScheme?: ColorSchemeType;
   /**
    * The variant of the button style to use.
    * @default 'ghost'

diff --git a/src/components/composites/Popover/Popover.tsx b/src/components/composites/Popover/Popover.tsx
@@ -95,6 +95,7 @@ const Popover = (
                 bodyMounted,
                 setBodyMounted,
                 setHeaderMounted,
+                isOpen,
               }}
             >
               <FocusScope contain={trapFocus} restoreFocus autoFocus>

diff --git a/src/components/composites/Popover/PopoverContent.tsx b/src/components/composites/Popover/PopoverContent.tsx
@@ -21,6 +21,7 @@ export const PopoverContent = React.forwardRef(
       bodyMounted,
       bodyId,
       headerId,
+      isOpen,
     } = React.useContext(PopoverContext);
     const resolvedProps = usePropsResolution('PopoverContent', props);
 
@@ -81,6 +82,7 @@ export const PopoverContent = React.forwardRef(
         {...accessibilityProps}
         {...resolvedProps}
         ref={ref}
+        isOpen={isOpen}
       >
         {arrowElement}
         {restChildren}

diff --git a/src/components/composites/Popover/PopoverContext.ts b/src/components/composites/Popover/PopoverContext.ts
@@ -11,4 +11,5 @@ export const PopoverContext = React.createContext({
   setBodyMounted: (() => {}) as any,
   headerMounted: false,
   bodyMounted: false,
+  isOpen: false,
 });
diff --git a/src/components/composites/Popper/Popper.tsx b/src/components/composites/Popper/Popper.tsx
@@ -40,7 +40,7 @@ const Popper = (
 };
 
 const PopperContent = React.forwardRef(
-  ({ children, style, ...rest }: IBoxProps, ref: any) => {
+  ({ children, style, ...rest }: IBoxProps & { isOpen: boolean }, ref: any) => {
     const {
       triggerRef,
       shouldFlip,
@@ -52,6 +52,7 @@ const PopperContent = React.forwardRef(
       setOverlayRef,
     } = usePopperContext('PopperContent');
     const overlayRef = React.useRef(null);
+
     // const { top } = useSafeAreaInsets();
     const {
       overlayProps,
@@ -63,7 +64,7 @@ const PopperContent = React.forwardRef(
       overlayRef,
       shouldFlip: shouldFlip,
       crossOffset: crossOffset,
-      isOpen: true,
+      isOpen: rest.isOpen,
       offset: offset,
       placement: placementProp as any,
       containerPadding: 0,

diff --git a/src/components/composites/Progress/index.tsx b/src/components/composites/Progress/index.tsx
@@ -3,6 +3,7 @@ import { Box } from '../../primitives';
 import type { InterfaceBoxProps } from '../../primitives/Box';
 import { usePropsResolution } from '../../../hooks/useThemeProps';
 import { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';
+import type { ColorSchemeType } from '../../../components/types';
 import type {
   CustomProps,
   ThemeComponentSizeType,
@@ -25,7 +26,7 @@ export interface InterfaceProgressProps
    * The color scheme of the progress. This should be one of the color keys in the theme (e.g."green", "red").
    * @default primary
    */
-  colorScheme?: string;
+  colorScheme?: ColorSchemeType;
   // /**
   //  * Whether progress is indeterminate
   //  * @default false

diff --git a/src/components/composites/Tabs/types.tsx b/src/components/composites/Tabs/types.tsx
@@ -2,11 +2,12 @@ import type { RefObject } from 'react';
 import type { ViewProps } from 'react-native';
 import type { InterfaceBoxProps } from '../../primitives/Box';
 import type { InterfaceIconProps } from '../../primitives/Icon/types';
+import type { ColorSchemeType } from '../../../components/types';
 
 export type ITabsProps = InterfaceBoxProps<ITabsProps> & {
   align?: 'center' | 'end' | 'start';
   id?: string;
-  colorScheme?: string;
+  colorScheme?: ColorSchemeType;
   index?: number;
   defaultIndex?: number;
   isFitted?: boolean;

diff --git a/src/components/composites/Tag/types.ts b/src/components/composites/Tag/types.ts
@@ -1,9 +1,10 @@
 import type { CustomProps } from '../../../components/types';
 import type { InterfaceBoxProps } from '../../primitives/Box';
+import type { ColorSchemeType } from '../../../components/types';
 
 export interface InterfaceTagProps extends InterfaceBoxProps<ITagProps> {
   variant?: 'solid' | 'subtle' | 'outline';
-  colorScheme?: string;
+  colorScheme?: ColorSchemeType;
   size?: string | number;
 }
 

diff --git a/src/components/primitives/Button/Button.tsx b/src/components/primitives/Button/Button.tsx
@@ -104,7 +104,7 @@ const Button = (
   );
 
   const boxChildren = (child: any) => {
-    return <Box _text={_text}>{child}</Box>;
+    return child ? <Box _text={_text}>{child}</Box> : null;
   };
 
   return (

diff --git a/src/components/primitives/Button/ButtonGroup.tsx b/src/components/primitives/Button/ButtonGroup.tsx
@@ -6,11 +6,14 @@ import { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';
 
 export default memo(
   forwardRef(
-    ({ children, divider, ...props }: IButtonGroupProps, ref?: any) => {
+    (
+      { children, divider, variant, ...props }: IButtonGroupProps,
+      ref?: any
+    ) => {
       const {
         space,
         direction,
-        variant,
+
         size,
         colorScheme,
         isDisabled,

diff --git a/src/components/primitives/Button/types.ts b/src/components/primitives/Button/types.ts
@@ -13,6 +13,7 @@ import type {
 import type { ISpinnerProps } from '../Spinner/types';
 import type { IIconProps } from '../Icon';
 import type { InterfacePressableProps } from '../Pressable/types';
+import type { ColorSchemeType } from '../../../components/types';
 
 // const myFunction = ({ a, b }) => {
 //   return { a: a, b: b };
@@ -34,7 +35,7 @@ export interface InterfaceButtonProps
    * The color of the radio when it's checked. This should be one of the color keys in the theme (e.g."green", "red").
    * @default 'primary'
    */
-  colorScheme?: string;
+  colorScheme?: ColorSchemeType;
   /**
    * The variant of the button style to use.
    * @default 'solid'
@@ -149,7 +150,9 @@ export interface IButtonGroupProps extends IStackProps {
    * The variant of the button style to use.
    * @default 'solid'
    */
-  variant?: 'ghost' | 'outline' | 'solid' | 'link' | 'unstyled';
+  variant?: ResponsiveValue<
+    'ghost' | 'outline' | 'solid' | 'link' | 'unstyled' | 'subtle'
+  >;
   /**
    * The start icon element to use in the button.
    */
@@ -160,7 +163,7 @@ export interface IButtonGroupProps extends IStackProps {
    * The color of the radio when it's checked. This should be one of the color keys in the theme (e.g."green", "red").
    * @default 'primary'
    */
-  colorScheme?: string;
+  colorScheme?: ColorSchemeType;
   /**
    * If true, the button will be disabled.
    */

diff --git a/src/components/primitives/Checkbox/types.tsx b/src/components/primitives/Checkbox/types.tsx
@@ -10,6 +10,7 @@ import type {
   ResponsiveValue,
   ThemeComponentSizeType,
 } from '../../../components/types';
+import type { ColorSchemeType } from '../../../components/types';
 
 export type ICheckboxValue = string;
 
@@ -29,7 +30,7 @@ export interface InterfaceCheckbox extends InterfaceBoxProps<ICheckboxProps> {
   /**
    * The color of the radio when it's checked. This should be one of the color keys in the theme (e.g."green", "red").
    */
-  colorScheme?: string | 'default';
+  colorScheme?: ColorSchemeType & ResponsiveValue<'default'>;
   /**
    * If true, the checkbox will be initially checked. (use defaultValue prop if using it inside Checkbox.Group)
    */
@@ -154,7 +155,7 @@ export interface ICheckboxGroupProps
   /**
    * The color of the radio when it's checked. This should be one of the color keys in the theme (e.g."green", "red").
    */
-  colorScheme?: string;
+  colorScheme?: ColorSchemeType;
   /**
    * The size (width and height) of the checkbox.
    */
@@ -169,7 +170,7 @@ export interface ICheckboxGroupProps
   _checkbox?: Partial<ICheckboxProps>;
 }
 export interface ICheckboxContext extends IFormControlContext {
-  colorScheme?: string;
+  colorScheme?: ColorSchemeType;
   size?: ResponsiveValue<'sm' | 'md' | 'lg'>;
   state: CheckboxGroupState;
 }