@bitrise/bitkit 9.17.0-alpha-chakra.5 → 9.17.0

package/package.json

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

package/src/Components/ColorButton/ColorButton.theme.ts

@@ -1,10 +1,49 @@
 const schemeColors = {
-  default: { backgroundColor: 'inherit', color: 'inherit' },
-  blue: { backgroundColor: 'blue.93', color: 'blue.40' },
-  red: { backgroundColor: 'red.93', color: 'red.40' },
-  green: { backgroundColor: 'green.95', color: 'green.50' },
-  yellow: { backgroundColor: 'yellow.95', color: 'yellow.40' },
-  purple: { backgroundColor: 'purple.95', color: 'purple.40' },
+  blue: {
+    color: 'blue.40',
+    _active: {
+      backgroundColor: 'blue.90',
+    },
+    _hover: {
+      backgroundColor: 'blue.93',
+    },
+  },
+  red: {
+    color: 'red.40',
+    _active: {
+      backgroundColor: 'red.90',
+    },
+    _hover: {
+      backgroundColor: 'red.93',
+    },
+  },
+  green: {
+    color: 'green.50',
+    _active: {
+      backgroundColor: 'green.90',
+    },
+    _hover: {
+      backgroundColor: 'green.93',
+    },
+  },
+  yellow: {
+    color: 'yellow.40',
+    _active: {
+      backgroundColor: 'yellow.90',
+    },
+    _hover: {
+      backgroundColor: 'yellow.93',
+    },
+  },
+  purple: {
+    color: 'purple.40',
+    _active: {
+      backgroundColor: 'purple.90',
+    },
+    _hover: {
+      backgroundColor: 'purple.93',
+    },
+  },
 };
 
 const ColorButtonTheme = {
@@ -13,8 +52,8 @@ const ColorButtonTheme = {
       display: 'inline-flex',
       alignItems: 'center',
       justifyContent: 'center',
-      ...schemeColors[c || 'default'],
-      _hover: schemeColors[c || 'default'],
+      backgroundColor: 'transparent',
+      ...schemeColors[c || 'blue'],
     };
   },
 };

package/src/Components/Tabs/Tab.tsx

@@ -34,6 +34,7 @@ const Badge = (props: BadgeProps) => {
 
 export interface TabProps extends ChakraTabProps {
   badge?: BadgeProps;
+  id: string;
   leftIconName?: TypeIconName;
   isDisabled?: boolean;
   rightIconName?: TypeIconName;

package/src/Components/Tabs/Tabs.stories.tsx

@@ -24,15 +24,19 @@ const badge = {
 
 export const WithDefaults: ComponentStory<typeof Tabs> = (props) => {
   return (
-    <Tabs defaultIndex={1} variant="unstyled" {...props}>
+    <Tabs defaultTab="selected-as-default" {...props}>
       <TabList>
         <Tab id="basic">Basic</Tab>
         <Tab id="selected-as-default">Selected as default</Tab>
-        <Tab leftIconName="Bell">With left icon</Tab>
+        <Tab id="with-left-icon" leftIconName="Bell">
+          With left icon
+        </Tab>
         <Tab id="with-badge" badge={badge}>
           With badge
         </Tab>
-        <Tab isDisabled>Disabled</Tab>
+        <Tab id="disabled" isDisabled>
+          Disabled
+        </Tab>
         <Tab id="with-right-icon" rightIconName="ArrowForward">
           With right icon
         </Tab>

package/src/Components/Tabs/Tabs.tsx

@@ -3,6 +3,7 @@ import { Tabs as ChakraTabs, TabsProps as ChakraTabsProps, forwardRef } from '@c
 import { useHistory } from '../../hooks';
 
 export interface TabsProps extends ChakraTabsProps {
+  defaultTab?: string;
   onChange?: (index: number, tabId?: string) => void;
   withHistory?: boolean;
 }
@@ -20,12 +21,13 @@ const getTabIds = (props: TabsProps) => {
  * An accessible tabs component that provides keyboard interactions and ARIA attributes described in the WAI-ARIA Tabs Design Pattern.
  */
 const Tabs = forwardRef<TabsProps, 'div'>((props, ref) => {
-  const { defaultIndex = 0, onChange, withHistory, ...rest } = props;
+  const { defaultTab = '', onChange, withHistory, ...rest } = props;
+  const tabIds = getTabIds(props);
+  const defaultIndex = tabIds.indexOf(defaultTab) > -1 ? tabIds.indexOf(defaultTab) : 0;
+
   const { searchParams, replace } = useHistory();
   const [actualIndex, setActualIndex] = useState(defaultIndex);
 
-  const tabIds = getTabIds(props);
-
   useEffect(() => {
     if (withHistory && searchParams.get('tab')) {
       const tabName = searchParams.get('tab') || '';