@bitrise/bitkit 10.33.0-alpha-chakra.3 → 10.33.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bitrise/bitkit",
   "description": "Bitrise React component library",
-  "version": "10.33.0-alpha-chakra.3",
+  "version": "10.33.0",
   "repository": "git@github.com:bitrise-io/bitkit.git",
   "main": "src/index.ts",
   "license": "UNLICENSED",

package/src/Components/Notification/Notification.tsx

@@ -1,11 +1,12 @@
 import { cloneElement, createContext, ReactElement, useContext, useMemo } from 'react';
-import { Alert as ChakraAlert, AlertProps, forwardRef, Spinner } from '@chakra-ui/react';
+import { Alert as ChakraAlert, AlertProps, forwardRef } from '@chakra-ui/react';
 
 import { ColorScheme } from '../../Foundations/Colors/Colors';
 import Box from '../Box/Box';
 import CloseButton from '../CloseButton/CloseButton';
 import ColorButton, { ColorButtonProps } from '../ColorButton/ColorButton';
 import Icon, { TypeIconName } from '../Icon/Icon';
+import ProgressSpinner from '../ProgressSpinner/ProgressSpinner';
 
 type NotificationStatus = 'info' | 'error' | 'success' | 'warning' | 'progress';
 
@@ -18,7 +19,7 @@ const STATUSES: Record<NotificationStatus, { colorScheme: ColorScheme; defaultIc
     colorScheme: 'purple',
     defaultIcon: (
       <Box width={24} height={24} padding={2}>
-        <Spinner width={20} height={20} />
+        <ProgressSpinner size={20} />
       </Box>
     ),
   },

package/src/Components/ProgressBitbot/ProgressBitbot.tsx

@@ -59,7 +59,7 @@ const mouth = alternate(mouth0, mouth1, 7);
  * A playful indeterminate progress indicator.
  */
 const ProgressBitbot = forwardRef<ProgressBitbotProps, 'div'>((props, ref) => {
-  const { content, size, ...rest } = props;
+  const { content, size = '64', ...rest } = props;
 
   return (
     <Box {...rest} ref={ref}>
@@ -167,8 +167,4 @@ const ProgressBitbot = forwardRef<ProgressBitbotProps, 'div'>((props, ref) => {
   );
 });
 
-ProgressBitbot.defaultProps = {
-  size: 64,
-};
-
 export default ProgressBitbot;

package/src/Components/ProgressSpinner/ProgressSpinner.stories.tsx

@@ -0,0 +1,12 @@
+import ProgressSpinner from './ProgressSpinner';
+
+export default {
+  component: ProgressSpinner,
+};
+
+export const WithProps = {
+  args: {
+    color: 'purple.40',
+    size: 24,
+  },
+};

package/src/Components/ProgressSpinner/ProgressSpinner.tsx

@@ -0,0 +1,15 @@
+import { Spinner as ChakraSpinner, SpinnerProps, forwardRef } from '@chakra-ui/react';
+
+export interface ProgressSpinnerProps extends Omit<SpinnerProps, 'size'> {
+  size?: SpinnerProps['width'];
+}
+
+/**
+ * Progresspinner
+ */
+const Progresspinner = forwardRef<ProgressSpinnerProps, 'div'>((props, ref) => {
+  const { size = '24', ...rest } = props;
+  return <ChakraSpinner width={size} height={size} {...rest} ref={ref} />;
+});
+
+export default Progresspinner;

package/src/Components/Select/Select.tsx

@@ -8,9 +8,9 @@ import {
   forwardRef,
   Select as ChakraSelect,
   SelectProps as ChakraSelectProps,
-  Spinner,
 } from '@chakra-ui/react';
 import Icon from '../Icon/Icon';
+import ProgressSpinner from '../ProgressSpinner/ProgressSpinner';
 
 export interface SelectProps extends Omit<FormControlProps, 'label' | 'onBlur' | 'onChange'> {
   'data-testid'?: string;
@@ -52,7 +52,7 @@ const Select = forwardRef<SelectProps, 'div'>((props, ref) => {
   };
   const selectProperties: ChakraSelectProps = {
     icon: isLoading ? (
-      <Spinner width={iconSize} height={iconSize} marginEnd="4" />
+      <ProgressSpinner size={iconSize} marginEnd="4" />
     ) : (
       <Icon name="DropdownArrows" fontSize={iconSize} size={iconSize} />
     ),

package/src/Components/Toggle/Toggle.tsx

@@ -5,13 +5,13 @@ import {
   FormErrorMessage,
   FormHelperText,
   FormLabel,
-  Spinner,
   Switch,
   SwitchProps,
   forwardRef,
   useMultiStyleConfig,
 } from '@chakra-ui/react';
 import Box from '../Box/Box';
+import ProgressSpinner from '../ProgressSpinner/ProgressSpinner';
 
 export interface ToggleProps extends Omit<FormControlProps, 'label' | 'onBlur' | 'onChange'> {
   'data-testid'?: string;
@@ -77,7 +77,7 @@ const Toggle = forwardRef<ToggleProps, 'div'>((props, ref) => {
             {label}
           </FormLabel>
         )}
-        {isLoading && <Spinner sx={css.spinner} />}
+        {isLoading && <ProgressSpinner sx={css.spinner} />}
       </Box>
       {errorText && <FormErrorMessage as="p">{errorText}</FormErrorMessage>}
       {helperText && <FormHelperText as="p">{helperText}</FormHelperText>}

package/src/index.ts

@@ -219,3 +219,6 @@ export { default as ProgressBar } from './Components/ProgressBar/ProgressBar';
 
 export type { ProgressBitbotProps } from './Components/ProgressBitbot/ProgressBitbot';
 export { default as ProgressBitbot } from './Components/ProgressBitbot/ProgressBitbot';
+
+export type { ProgressSpinnerProps } from './Components/ProgressSpinner/ProgressSpinner';
+export { default as ProgressSpinner } from './Components/ProgressSpinner/ProgressSpinner';

package/src/old.ts

@@ -17,6 +17,3 @@ export { default as DatePicker } from './Old/DatePicker/DatePicker';
 
 export type { Props as FlexProps } from './Old/Flex/Flex';
 export { default as Flex } from './Old/Flex/Flex';
-
-export type { Props as ProgressSpinnerProps } from './Old/Progress/ProgressSpinner';
-export { default as ProgressSpinner } from './Old/Progress/ProgressSpinner';