@bitrise/bitkit 10.35.2-alpha-chakra.2 → 10.36.0

package/package.json

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

package/src/Components/ButtonGroup/ButtonGroup.tsx

@@ -1,9 +1,9 @@
-import { ButtonGroup as ChakraButtonGroup, ButtonGroupProps } from '@chakra-ui/react';
+import { ButtonGroup as ChakraButtonGroup, ButtonGroupProps, forwardRef } from '@chakra-ui/react';
 
 export type { ButtonGroupProps };
 
-const ButtonGroup = (props: ButtonGroupProps) => {
-  return <ChakraButtonGroup {...props} />;
-};
+const ButtonGroup = forwardRef<ButtonGroupProps, 'div'>((props, ref) => {
+  return <ChakraButtonGroup {...props} ref={ref} />;
+});
 
 export default ButtonGroup;

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

@@ -0,0 +1,14 @@
+import { Icon, IconProps, forwardRef } from '@chakra-ui/react';
+
+const BoxWithArrowDown = forwardRef<IconProps, 'svg'>((props, ref) => (
+  <Icon ref={ref} viewBox="0 0 16 16" {...props}>
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M2.667 2.667h10.666v10.666H2.667V2.667Zm-1.334 0c0-.737.597-1.334 1.334-1.334h10.666c.737 0 1.334.597 1.334 1.334v10.666c0 .737-.597 1.334-1.334 1.334H2.667a1.333 1.333 0 0 1-1.334-1.334V2.667Zm10 6-1-1-1.666 1.666V4H7.333v5.333L5.667 7.667l-1 1L8 12l3.333-3.333Z"
+      fill="currentColor"
+    />
+  </Icon>
+));
+
+export default BoxWithArrowDown;

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

@@ -0,0 +1,14 @@
+import { Icon, IconProps, forwardRef } from '@chakra-ui/react';
+
+const BoxWithDot = forwardRef<IconProps, 'svg'>((props, ref) => (
+  <Icon ref={ref} viewBox="0 0 16 16" {...props}>
+    <path
+      fill="currentColor"
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M2.667 2.667h10.666v10.666H2.667V2.667Zm-1.334 0c0-.737.597-1.334 1.334-1.334h10.666c.737 0 1.334.597 1.334 1.334v10.666c0 .737-.597 1.334-1.334 1.334H2.667a1.333 1.333 0 0 1-1.334-1.334V2.667ZM8 9.333a1.333 1.333 0 1 0 0-2.666 1.333 1.333 0 0 0 0 2.666Z"
+    />
+  </Icon>
+));
+
+export default BoxWithDot;

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

@@ -0,0 +1,14 @@
+import { Icon, IconProps, forwardRef } from '@chakra-ui/react';
+
+const OverflowingLines = forwardRef<IconProps, 'svg'>((props, ref) => (
+  <Icon ref={ref} viewBox="0 0 16 16" {...props}>
+    <path
+      fill="currentColor"
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M2.667 2.667h10.666V4H4v1.333h9.333V6H4v1.333h9.333V8H4v1.333h9.333V10H4v1.333h9.333v2H2.667V2.667Zm-1.334 0c0-.737.597-1.334 1.334-1.334h10.666c.737 0 1.334.597 1.334 1.334v10.666c0 .737-.597 1.334-1.334 1.334H2.667a1.333 1.333 0 0 1-1.334-1.334V2.667Z"
+    />
+  </Icon>
+));
+
+export default OverflowingLines;

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

@@ -0,0 +1,14 @@
+import { Icon, IconProps, forwardRef } from '@chakra-ui/react';
+
+const StepstatusIncomplete = forwardRef<IconProps, 'svg'>((props, ref) => (
+  <Icon ref={ref} viewBox="0 0 16 16" {...props}>
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M15.8477 9.5613L14.5397 9.30254C14.6229 8.88234 14.6667 8.44694 14.6667 8C14.6667 7.55306 14.6229 7.11766 14.5397 6.69746L15.8477 6.4387C15.9476 6.94367 16 7.46572 16 8C16 8.53428 15.9476 9.05633 15.8477 9.5613ZM14.6525 3.55507L13.5446 4.29683C13.0575 3.56925 12.4308 2.94254 11.7032 2.45543L12.4449 1.34748C13.3173 1.93154 14.0685 2.68266 14.6525 3.55507ZM9.5613 0.152272L9.30254 1.46026C8.88234 1.37713 8.44694 1.33333 8 1.33333C7.55306 1.33333 7.11766 1.37713 6.69746 1.46026L6.4387 0.152272C6.94367 0.0523755 7.46572 0 8 0C8.53428 0 9.05633 0.0523755 9.5613 0.152272ZM3.55507 1.34748L4.29683 2.45543C3.56925 2.94254 2.94254 3.56925 2.45543 4.29683L1.34748 3.55508C1.93154 2.68266 2.68266 1.93154 3.55507 1.34748ZM0.152272 6.4387C0.0523755 6.94367 0 7.46572 0 8C0 8.53428 0.0523755 9.05633 0.152272 9.5613L1.46026 9.30254C1.37713 8.88234 1.33333 8.44694 1.33333 8C1.33333 7.55306 1.37713 7.11766 1.46026 6.69746L0.152272 6.4387ZM1.34748 12.4449L2.45543 11.7032C2.94254 12.4308 3.56925 13.0575 4.29683 13.5446L3.55508 14.6525C2.68266 14.0685 1.93154 13.3173 1.34748 12.4449ZM6.4387 15.8477L6.69746 14.5397C7.11766 14.6229 7.55306 14.6667 8 14.6667C8.44694 14.6667 8.88234 14.6229 9.30254 14.5397L9.5613 15.8477C9.05633 15.9476 8.53428 16 8 16C7.46572 16 6.94367 15.9476 6.4387 15.8477ZM12.4449 14.6525L11.7032 13.5446C12.4308 13.0575 13.0575 12.4308 13.5446 11.7032L14.6525 12.4449C14.0685 13.3173 13.3173 14.0685 12.4449 14.6525Z"
+      fill="currentColor"
+    />
+  </Icon>
+));
+
+export default StepstatusIncomplete;

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

@@ -0,0 +1,14 @@
+import { Icon, IconProps, forwardRef } from '@chakra-ui/react';
+
+const WrappedLines = forwardRef<IconProps, 'svg'>((props, ref) => (
+  <Icon ref={ref} viewBox="0 0 16 16" {...props}>
+    <path
+      fill="currentColor"
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M13.333 2.667H2.667v10.666h10.666V2.667ZM2.667 1.333c-.737 0-1.334.597-1.334 1.334v10.666c0 .737.597 1.334 1.334 1.334h10.666c.737 0 1.334-.597 1.334-1.334V2.667c0-.737-.597-1.334-1.334-1.334H2.667Zm9.333 4H4V4h8v1.333Zm-8 2h6V6H4v1.333Zm8 2H4V8h8v1.333Zm-8 2h4V10H4v1.333Z"
+    />
+  </Icon>
+));
+
+export default WrappedLines;

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

@@ -22,6 +22,8 @@ export { default as BitbucketBlue } from './BitbucketBlue';
 export { default as BitbucketPlain } from './BitbucketPlain';
 export { default as BitbucketShadedWhite } from './BitbucketShadedWhite';
 export { default as Book } from './Book';
+export { default as BoxWithArrowDown } from './BoxWithArrowDown';
+export { default as BoxWithDot } from './BoxWithDot';
 export { default as Branch } from './Branch';
 export { default as Bug } from './Bug';
 export { default as Build } from './Build';
@@ -121,6 +123,7 @@ export { default as Nodejs } from './Nodejs';
 export { default as Numero } from './Numero';
 export { default as OpenInBrowser } from './OpenInBrowser';
 export { default as Other } from './Other';
+export { default as OverflowingLines } from './OverflowingLines';
 export { default as Overview } from './Overview';
 export { default as Owner } from './Owner';
 export { default as Pause } from './Pause';
@@ -159,6 +162,7 @@ export { default as StepsTuorqouise } from './StepsTuorqouise';
 export { default as StepsViolet } from './StepsViolet';
 export { default as StepsWhite } from './StepsWhite';
 export { default as Steps } from './Steps';
+export { default as StepstatusIncomplete } from './StepstatusIncomplete';
 export { default as StepstatusNext } from './StepstatusNext';
 export { default as StepstatusSkip } from './StepstatusSkip';
 export { default as StepstatusWarning } from './StepstatusWarning';
@@ -191,4 +195,5 @@ export { default as Window } from './Window';
 export { default as WorkflowFlow } from './WorkflowFlow';
 export { default as Workflow } from './Workflow';
 export { default as Wow } from './Wow';
+export { default as WrappedLines } from './WrappedLines';
 export { default as Xamarin } from './Xamarin';

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

@@ -0,0 +1,14 @@
+import { Icon, IconProps, forwardRef } from '@chakra-ui/react';
+
+const BoxWithArrowDown = forwardRef<IconProps, 'svg'>((props, ref) => (
+  <Icon ref={ref} viewBox="0 0 24 24" {...props}>
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M4 4h16v16H4V4ZM2 4a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v16a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V4Zm15 9-1.5-1.5L13 14V6h-2v8l-2.5-2.5L7 13l5 5 5-5Z"
+      fill="currentColor"
+    />
+  </Icon>
+));
+
+export default BoxWithArrowDown;

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

@@ -0,0 +1,14 @@
+import { Icon, IconProps, forwardRef } from '@chakra-ui/react';
+
+const BoxWithDot = forwardRef<IconProps, 'svg'>((props, ref) => (
+  <Icon ref={ref} viewBox="0 0 24 24" {...props}>
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M4 4h16v16H4V4ZM2 4a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v16a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V4Zm10 10a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z"
+      fill="currentColor"
+    />
+  </Icon>
+));
+
+export default BoxWithDot;

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

@@ -0,0 +1,14 @@
+import { Icon, IconProps, forwardRef } from '@chakra-ui/react';
+
+const OverflowingLines = forwardRef<IconProps, 'svg'>((props, ref) => (
+  <Icon ref={ref} viewBox="0 0 24 24" {...props}>
+    <path
+      fill="currentColor"
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M20 4H4v16h16v-3H6v-2h14v-1H6v-2h14v-1H6V9h14V8H6V6h14V4ZM4 2a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H4Z"
+    />
+  </Icon>
+));
+
+export default OverflowingLines;

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

@@ -0,0 +1,14 @@
+import { Icon, IconProps, forwardRef } from '@chakra-ui/react';
+
+const StepstatusIncomplete = forwardRef<IconProps, 'svg'>((props, ref) => (
+  <Icon ref={ref} viewBox="0 0 24 24" {...props}>
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M23.7716 14.3419L21.8096 13.9538C21.9343 13.3235 22 12.6704 22 12C22 11.3296 21.9343 10.6765 21.8096 10.0462L23.7716 9.65806C23.9214 10.4155 24 11.1986 24 12C24 12.8014 23.9214 13.5845 23.7716 14.3419ZM21.9788 5.33261L20.3168 6.44525C19.5862 5.35387 18.6461 4.41381 17.5547 3.68315L18.6674 2.02121C19.976 2.89731 21.1027 4.02399 21.9788 5.33261ZM14.3419 0.228409L13.9538 2.19038C13.3235 2.06569 12.6704 2 12 2C11.3296 2 10.6765 2.06569 10.0462 2.19038L9.65806 0.228409C10.4155 0.0785633 11.1986 0 12 0C12.8014 0 13.5845 0.0785633 14.3419 0.228409ZM5.33261 2.02122L6.44525 3.68315C5.35387 4.41381 4.41381 5.35388 3.68315 6.44525L2.02121 5.33261C2.89731 4.024 4.02399 2.89731 5.33261 2.02122ZM0.228409 9.65806C0.0785633 10.4155 0 11.1986 0 12C0 12.8014 0.0785633 13.5845 0.228409 14.3419L2.19038 13.9538C2.06569 13.3235 2 12.6704 2 12C2 11.3296 2.06569 10.6765 2.19038 10.0462L0.228409 9.65806ZM2.02122 18.6674L3.68315 17.5548C4.41381 18.6461 5.35388 19.5862 6.44525 20.3168L5.33261 21.9788C4.024 21.1027 2.89731 19.976 2.02122 18.6674ZM9.65806 23.7716L10.0462 21.8096C10.6765 21.9343 11.3296 22 12 22C12.6704 22 13.3235 21.9343 13.9538 21.8096L14.3419 23.7716C13.5845 23.9214 12.8014 24 12 24C11.1986 24 10.4155 23.9214 9.65806 23.7716ZM18.6674 21.9788L17.5548 20.3168C18.6461 19.5862 19.5862 18.6461 20.3168 17.5547L21.9788 18.6674C21.1027 19.976 19.976 21.1027 18.6674 21.9788Z"
+      fill="currentColor"
+    />
+  </Icon>
+));
+
+export default StepstatusIncomplete;

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

@@ -0,0 +1,14 @@
+import { Icon, IconProps, forwardRef } from '@chakra-ui/react';
+
+const WrappedLines = forwardRef<IconProps, 'svg'>((props, ref) => (
+  <Icon ref={ref} viewBox="0 0 24 24" {...props}>
+    <path
+      fill="currentColor"
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M20 4H4v16h16V4ZM4 2a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H4Zm14 6H6V6h12v2ZM6 11h9V9H6v2Zm12 3H6v-2h12v2ZM6 17h6v-2H6v2Z"
+    />
+  </Icon>
+));
+
+export default WrappedLines;

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

@@ -22,6 +22,8 @@ export { default as BitbucketBlue } from './BitbucketBlue';
 export { default as BitbucketPlain } from './BitbucketPlain';
 export { default as BitbucketShadedWhite } from './BitbucketShadedWhite';
 export { default as Book } from './Book';
+export { default as BoxWithArrowDown } from './BoxWithArrowDown';
+export { default as BoxWithDot } from './BoxWithDot';
 export { default as Branch } from './Branch';
 export { default as Bug } from './Bug';
 export { default as Build } from './Build';
@@ -121,6 +123,7 @@ export { default as Nodejs } from './Nodejs';
 export { default as Numero } from './Numero';
 export { default as OpenInBrowser } from './OpenInBrowser';
 export { default as Other } from './Other';
+export { default as OverflowingLines } from './OverflowingLines';
 export { default as Overview } from './Overview';
 export { default as Owner } from './Owner';
 export { default as Pause } from './Pause';
@@ -159,6 +162,7 @@ export { default as StepsTuorqouise } from './StepsTuorqouise';
 export { default as StepsViolet } from './StepsViolet';
 export { default as StepsWhite } from './StepsWhite';
 export { default as Steps } from './Steps';
+export { default as StepstatusIncomplete } from './StepstatusIncomplete';
 export { default as StepstatusNext } from './StepstatusNext';
 export { default as StepstatusSkip } from './StepstatusSkip';
 export { default as StepstatusWarning } from './StepstatusWarning';
@@ -191,4 +195,5 @@ export { default as Window } from './Window';
 export { default as WorkflowFlow } from './WorkflowFlow';
 export { default as Workflow } from './Workflow';
 export { default as Wow } from './Wow';
+export { default as WrappedLines } from './WrappedLines';
 export { default as Xamarin } from './Xamarin';

package/src/Components/Table/Tr.tsx

@@ -60,6 +60,7 @@ const Tr = forwardRef<TableRowProps, 'tr'>((props, ref) => {
           <Td sx={css.expandTd}>
             <IconButton
               iconName="ChevronDown"
+              isTooltipDisabled
               aria-label={isOpen ? 'Collapse row' : 'Expand row'}
               onClick={onToggleClick}
               size="small"

package/src/Foundations/Colors/Colors.ts

@@ -125,109 +125,7 @@ const colors = {
   },
 };
 
-export type TypeColors =
-  | 'neutral.10'
-  | 'neutral.20'
-  | 'neutral.30'
-  | 'neutral.40'
-  | 'neutral.50'
-  | 'neutral.60'
-  | 'neutral.70'
-  | 'neutral.80'
-  | 'neutral.90'
-  | 'neutral.93'
-  | 'neutral.95'
-  | 'neutral.100'
-  | 'purple.10'
-  | 'purple.20'
-  | 'purple.30'
-  | 'purple.40'
-  | 'purple.50'
-  | 'purple.60'
-  | 'purple.70'
-  | 'purple.80'
-  | 'purple.90'
-  | 'purple.93'
-  | 'purple.95'
-  | 'purple.100'
-  | 'red.10'
-  | 'red.20'
-  | 'red.30'
-  | 'red.40'
-  | 'red.50'
-  | 'red.60'
-  | 'red.70'
-  | 'red.80'
-  | 'red.90'
-  | 'red.93'
-  | 'red.95'
-  | 'red.100'
-  | 'orange.10'
-  | 'orange.20'
-  | 'orange.30'
-  | 'orange.40'
-  | 'orange.50'
-  | 'orange.60'
-  | 'orange.70'
-  | 'orange.80'
-  | 'orange.90'
-  | 'orange.93'
-  | 'orange.95'
-  | 'orange.100'
-  | 'yellow.10'
-  | 'yellow.20'
-  | 'yellow.30'
-  | 'yellow.40'
-  | 'yellow.50'
-  | 'yellow.60'
-  | 'yellow.70'
-  | 'yellow.80'
-  | 'yellow.90'
-  | 'yellow.93'
-  | 'yellow.95'
-  | 'yellow.100'
-  | 'green.10'
-  | 'green.20'
-  | 'green.30'
-  | 'green.40'
-  | 'green.50'
-  | 'green.60'
-  | 'green.70'
-  | 'green.80'
-  | 'green.90'
-  | 'green.93'
-  | 'green.95'
-  | 'green.100'
-  | 'turquoise.10'
-  | 'turquoise.20'
-  | 'turquoise.30'
-  | 'turquoise.40'
-  | 'turquoise.50'
-  | 'turquoise.60'
-  | 'turquoise.70'
-  | 'turquoise.80'
-  | 'turquoise.90'
-  | 'turquoise.93'
-  | 'turquoise.95'
-  | 'turquoise.100'
-  | 'blue.10'
-  | 'blue.20'
-  | 'blue.30'
-  | 'blue.40'
-  | 'blue.50'
-  | 'blue.60'
-  | 'blue.70'
-  | 'blue.80'
-  | 'blue.90'
-  | 'blue.93'
-  | 'blue.95'
-  | 'blue.100'
-  | 'brand.primary'
-  | 'text.body'
-  | 'text.secondary'
-  | 'text.link'
-  | 'text.linkHover'
-  | 'separator.primary';
+export type Colors = typeof colors;
 
 export type ColorScheme = 'blue' | 'red' | 'green' | 'yellow' | 'purple' | 'neutral';
 

package/src/Foundations/Colors/Palette.tsx

@@ -5,10 +5,10 @@ import Card from '../../Components/Card/Card';
 import Divider from '../../Components/Divider/Divider';
 import Provider from '../../Components/Provider/Provider';
 import Text from '../../Components/Text/Text';
-import colors from './Colors';
+import colors, { Colors } from './Colors';
 
 const paletteKeys = ['neutral', 'purple', 'red', 'orange', 'yellow', 'green', 'turquoise', 'blue'] as Array<
-  keyof typeof colors
+  keyof Colors
 >;
 
 const getTextColorFromShade = (backgroundColor: string, darkColor = 'text.body', lightColor = 'neutral.100') => {

package/src/Foundations/Sizes/Sizes.ts

@@ -1,10 +1,8 @@
 const sizes = {
-  '0': '0',
   '4': '0.25rem',
   '8': '0.5rem',
   '12': '0.75rem',
   '16': '1rem',
-  '20': '1.25rem',
   '24': '1.5rem',
   '32': '2rem',
   '40': '2.5rem',
@@ -14,5 +12,5 @@ const sizes = {
   '128': '8rem',
 };
 
-export type TypeSizes = keyof typeof sizes;
+export type Sizes = typeof sizes;
 export default sizes;