@bitrise/bitkit 11.4.2 → 11.6.0

package/package.json

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

package/src/Components/Accordion/Accordion.tsx

@@ -4,7 +4,10 @@ import {
   usePrefersReducedMotion,
 } from '@chakra-ui/react';
 
-export type AccordionProps = Omit<ChakraAccordionProps, 'onChange' | 'defaultIndex'> & {
+export type AccordionButtonSize = 'sm' | 'md';
+
+export type AccordionProps = Omit<ChakraAccordionProps, 'defaultIndex'> & {
+  buttonSize?: AccordionButtonSize;
   defaultIndex: number[];
 };
 
@@ -13,12 +16,13 @@ export type AccordionProps = Omit<ChakraAccordionProps, 'onChange' | 'defaultInd
  */
 const Accordion = (props: AccordionProps) => {
   const prefersReducedMotion = usePrefersReducedMotion({ ssr: false });
-  const { children, colorScheme, defaultIndex, variant, ...rest } = props;
+  const { buttonSize = 'md', children, colorScheme, defaultIndex, variant, ...rest } = props;
 
   return (
     <ChakraAccordion
       allowMultiple
       allowToggle
+      buttonSize={buttonSize}
       colorScheme={colorScheme}
       variant={variant}
       reduceMotion={prefersReducedMotion}

package/src/Components/AccordionLegacy/Accordion.theme.ts

@@ -1,6 +1,7 @@
 import { StyleFunctionProps } from '@chakra-ui/styled-system';
 import type { ComponentStyleConfig } from '@chakra-ui/theme';
 import { CSSObject } from '@emotion/react';
+import { AccordionButtonSize } from '../Accordion/Accordion';
 
 type ColorObj = {
   [key: string]: {
@@ -126,7 +127,12 @@ const LegacyBaseStyle: ({ colorScheme, variant }: Pick<StyleFunctionProps, 'colo
   },
 });
 
-const BaseStyle: () => CSSObject = () => ({
+const buttonPaddingBlockSizes: Record<AccordionButtonSize, string> = {
+  sm: '12',
+  md: '20',
+};
+
+const BaseStyle: (buttonSize: AccordionButtonSize) => CSSObject = (buttonSize) => ({
   item: {
     borderTop: '1px solid',
     borderTopColor: 'neutral.90',
@@ -137,7 +143,7 @@ const BaseStyle: () => CSSObject = () => ({
     justifyContent: 'space-between',
     width: '100%',
     paddingInline: '16',
-    paddingBlock: '20',
+    paddingBlock: buttonPaddingBlockSizes[buttonSize],
     borderColor: 'neutral.93',
     _hover: {
       background: 'neutral.93',
@@ -162,8 +168,10 @@ const BaseStyle: () => CSSObject = () => ({
 });
 
 const AccordionTheme: ComponentStyleConfig = {
-  baseStyle: ({ colorScheme, variant }) => {
-    return variant === 'legacy' || variant === 'flat' ? LegacyBaseStyle({ colorScheme, variant }) : BaseStyle();
+  baseStyle: ({ buttonSize, colorScheme, variant }) => {
+    return variant === 'legacy' || variant === 'flat'
+      ? LegacyBaseStyle({ colorScheme, variant })
+      : BaseStyle(buttonSize);
   },
 };
 

package/src/Components/Icons/16x16/WarningColored.tsx

@@ -0,0 +1,18 @@
+import { Icon, IconProps, forwardRef } from '@chakra-ui/react';
+import Box from '../../Box/Box';
+
+const WarningColored = forwardRef<IconProps, 'svg'>((props, ref) => (
+  <Icon ref={ref} viewBox="0 0 16 16" {...props}>
+    <Box
+      as="path"
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M14.5334 12.7348L9.20415 2.07627C8.87107 1.41011 8.07168 1.14364 7.40552 1.47672C7.20567 1.60995 7.00582 1.8098 6.87259 2.07627L1.47671 12.7348C1.14363 13.401 1.41009 14.2004 2.07625 14.5334C2.2761 14.6 2.47595 14.6667 2.67579 14.6667H13.3343C14.0671 14.6667 14.6666 14.0671 14.6666 13.3343C14.6666 13.1345 14.6 12.9347 14.5334 12.7348Z"
+      fill="yellow.80"
+    />
+    <Box as="path" d="M8.66563 5.33333H7.33331V10.0036H8.66563V5.33333Z" fill="purple.10" />
+    <Box as="path" d="M8.66563 11.3333V12.6656H7.33331V11.3333H8.66563Z" fill="purple.10" />
+  </Icon>
+));
+
+export default WarningColored;

package/src/Components/Icons/16x16/index.ts

@@ -188,6 +188,7 @@ export { default as Twitter } from './Twitter';
 export { default as ValidateShield } from './ValidateShield';
 export { default as Video } from './Video';
 export { default as Warning } from './Warning';
+export { default as WarningColored } from './WarningColored';
 export { default as WebUi } from './WebUi';
 export { default as Webhooks } from './Webhooks';
 export { default as Webinar } from './Webinar';

package/src/Components/Icons/24x24/WarningColored.tsx

@@ -0,0 +1,18 @@
+import { Icon, IconProps, forwardRef } from '@chakra-ui/react';
+import Box from '../../Box/Box';
+
+const WarningColored = forwardRef<IconProps, 'svg'>((props, ref) => (
+  <Icon ref={ref} viewBox="0 0 24 24" {...props}>
+    <Box
+      as="path"
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M21.8002 19.1022L13.8063 3.11441C13.3066 2.11517 12.1075 1.71547 11.1083 2.21509C10.8085 2.41494 10.5088 2.71471 10.3089 3.11441L2.21509 19.1022C1.71547 20.1014 2.11517 21.3005 3.11441 21.8002C3.41418 21.9001 3.71395 22 4.01372 22H20.0015C21.1007 22 22 21.1007 22 20.0015C22 19.7018 21.9001 19.402 21.8002 19.1022Z"
+      fill="yellow.80"
+    />
+    <Box as="path" d="M12.9985 8H11V15.0053H12.9985V8Z" fill="purple.10" />
+    <Box as="path" d="M12.9985 17V18.9985H11V17H12.9985Z" fill="purple.10" />
+  </Icon>
+));
+
+export default WarningColored;

package/src/Components/Icons/24x24/index.ts

@@ -188,6 +188,7 @@ export { default as Twitter } from './Twitter';
 export { default as ValidateShield } from './ValidateShield';
 export { default as Video } from './Video';
 export { default as Warning } from './Warning';
+export { default as WarningColored } from './WarningColored';
 export { default as WebUi } from './WebUi';
 export { default as Webhooks } from './Webhooks';
 export { default as Webinar } from './Webinar';

package/src/Components/Tabs/ContainedTab.tsx

@@ -0,0 +1,37 @@
+import { Button, TabProps as ChakraTabProps, forwardRef, useTab, useTabsStyles } from '@chakra-ui/react';
+import { TypeColors } from 'src/Foundations/Colors/Colors';
+import Box from '../Box/Box';
+import Icon, { TypeIconName } from '../Icon/Icon';
+import Text from '../Text/Text';
+
+export interface ContainedTabProps extends ChakraTabProps {
+  id: string;
+  iconColor?: TypeColors | 'currentColor';
+  iconName?: TypeIconName;
+  isWarning?: boolean;
+  secondaryText?: string;
+}
+
+const ContainedTab = forwardRef<ContainedTabProps, 'button'>((props, ref) => {
+  const { iconColor = 'currentColor', iconName, isWarning, secondaryText, ...rest } = props;
+  const tabProps = useTab({ ...rest, ref });
+  const styles = useTabsStyles();
+  return (
+    <Button __css={styles.containedTab} {...tabProps}>
+      <Box display="flex" gap="16" justifyContent="space-between">
+        <Text as="span" fontWeight="bold" hasEllipsis>
+          {tabProps.children}
+        </Text>
+        {isWarning && <Icon name="WarningColored" />}
+        {!isWarning && iconName && <Icon color={iconColor} name={iconName} />}
+      </Box>
+      {secondaryText && (
+        <Text as="span" display="block" hasEllipsis size="2">
+          {secondaryText}
+        </Text>
+      )}
+    </Button>
+  );
+});
+
+export default ContainedTab;

package/src/Components/Tabs/Tab.tsx

@@ -1,11 +1,4 @@
-import {
-  Button,
-  Tab as ChakraTab,
-  TabProps as ChakraTabProps,
-  forwardRef,
-  useMultiStyleConfig,
-  useTab,
-} from '@chakra-ui/react';
+import { Button, TabProps as ChakraTabProps, forwardRef, useTab, useTabsStyles } from '@chakra-ui/react';
 import Badge, { BadgeProps } from '../Badge/Badge';
 import Icon, { TypeIconName } from '../Icon/Icon';
 
@@ -17,13 +10,12 @@ export interface TabProps extends ChakraTabProps {
   rightIconName?: TypeIconName;
 }
 
-const CustomTab = forwardRef((props, ref) => {
+const Tab = forwardRef<TabProps, 'button'>((props, ref) => {
   const { badge, leftIconName, rightIconName, ...rest } = props;
   const tabProps = useTab({ ...rest, ref });
-  const styles = useMultiStyleConfig('Tabs', tabProps);
-
+  const styles = useTabsStyles();
   return (
-    <Button __css={styles.tab} {...tabProps}>
+    <Button __css={styles.lineTab} {...tabProps}>
       {leftIconName && <Icon name={leftIconName} />}
       <span>{tabProps.children}</span>
       {badge?.children && <Badge {...badge} />}
@@ -32,13 +24,4 @@ const CustomTab = forwardRef((props, ref) => {
   );
 });
 
-const Tab = forwardRef<TabProps, 'div'>((props, ref) => {
-  const { badge, leftIconName, rightIconName, ...rest } = props;
-  const properties = rest;
-  if (badge?.children || leftIconName || rightIconName) {
-    return <CustomTab {...props} />;
-  }
-  return <ChakraTab {...properties} ref={ref} />;
-});
-
 export default Tab;

package/src/Components/Tabs/Tabs.theme.ts

@@ -1,6 +1,52 @@
-const TextTheme = {
-  baseStyle: {
-    tab: {
+import { defineStyle, defineStyleConfig, SystemStyleObject } from '@chakra-ui/styled-system';
+
+const baseStyle = defineStyle(
+  ({ variant }): SystemStyleObject => ({
+    containedTab: {
+      backgroundColor: 'neutral.93',
+      paddingX: '16',
+      paddingY: '12',
+      color: 'neutral.40',
+      textAlign: 'left',
+      whiteSpace: 'nowrap',
+      boxShadow: 'inset 1px 0 0 var(--colors-neutral-80)',
+      _selected: {
+        backgroundColor: 'neutral.100',
+        borderRight: 0,
+        boxShadow: 'inset 0 2px var(--colors-purple-50)',
+        div: {
+          color: 'purple.50',
+        },
+        _first: {
+          boxShadow: 'inset 0 2px var(--colors-purple-50)',
+        },
+        '+ [role="tab"]': {
+          boxShadow: 'none',
+        },
+        _hover: {
+          backgroundColor: 'neutral.100',
+        },
+      },
+      _disabled: {
+        backgroundColor: 'neutral.90',
+        color: 'neutral.60',
+        cursor: 'not-allowed',
+        _hover: {
+          backgroundColor: 'neutral.90',
+        },
+      },
+      _hover: {
+        backgroundColor: 'neutral.95',
+      },
+      _focusVisible: {
+        backgroundColor: 'purple.95',
+        color: 'purple.50',
+      },
+      _first: {
+        boxShadow: 'none',
+      },
+    },
+    lineTab: {
       display: 'flex',
       alignItems: 'center',
       justifyContent: 'flex-start',
@@ -8,15 +54,16 @@ const TextTheme = {
       gap: '8',
       lineHeight: '1.5rem',
       paddingX: '16',
-      paddingTop: '12',
-      paddingBottom: '10px',
-      borderBottom: '2px solid',
-      borderBottomColor: 'transparent',
+      paddingY: '12',
       color: 'neutral.50',
       fontWeight: 'bold',
+      whiteSpace: 'nowrap',
       _selected: {
-        borderBottomColor: 'purple.50',
         color: 'purple.50',
+        boxShadow: 'inset 0 -2px var(--colors-purple-50)',
+        _hover: {
+          backgroundColor: 'transparent',
+        },
       },
       _focusVisible: {
         backgroundColor: 'purple.95',
@@ -38,15 +85,22 @@ const TextTheme = {
       },
     },
     tablist: {
-      borderBottom: '1px solid',
-      borderBottomColor: 'separator.primary',
+      maxWidth: '100%',
+      overflow: 'hidden',
+      paddingLeft: variant === 'contained' ? '16' : undefined,
+      borderBottom: variant === 'line' ? '1px solid' : undefined,
+      borderBottomColor: variant === 'line' ? 'separator.primary' : undefined,
     },
     tabpanel: {
       _focusVisible: {
         boxShadow: 'none',
       },
     },
-  },
-};
+  }),
+);
+
+const TabsTheme = defineStyleConfig({
+  baseStyle,
+});
 
-export default TextTheme;
+export default TabsTheme;

package/src/Components/Tabs/Tabs.tsx

@@ -5,6 +5,7 @@ import { useHistory } from '../../hooks';
 export interface TabsProps extends ChakraTabsProps {
   defaultTab?: string;
   onChange?: (index: number, tabId?: string) => void;
+  variant?: 'contained' | 'line';
   withHistory?: boolean;
 }