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

Release/3.4.0 rc.4

Author: surajahmed

example/storybook/stories/components/Wrapper.tsx

@@ -22,6 +22,11 @@ const myTheme = extendTheme({
   space: {
     mySpace: '29px',
   },
+  colors: {
+    blue1: {
+      '100': 'blue',
+    },
+  },
 
   components: {
     Link: {

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>

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",

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;

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;
 };

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.
    */

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;

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'>;

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'

src/components/composites/Popover/Popover.tsx

@@ -95,6 +95,7 @@ const Popover = (
                 bodyMounted,
                 setBodyMounted,
                 setHeaderMounted,
+                isOpen,
               }}
             >
               <FocusScope contain={trapFocus} restoreFocus autoFocus>