@bitrise/bitkit 13.297.0 → 13.299.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bitrise/bitkit",
   "description": "Bitrise React component library",
-  "version": "13.297.0",
+  "version": "13.299.0",
   "repository": {
     "type": "git",
     "url": "git+ssh://git@github.com/bitrise-io/bitkit.git"

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

@@ -0,0 +1,16 @@
+import { forwardRef, Icon, IconProps } from 'chakra-ui-2--react';
+
+const Sparkle = forwardRef<IconProps, 'svg'>((props, ref) => (
+  <Icon ref={ref} viewBox="0 0 16 16" {...props}>
+    <path
+      d="M5.83008 6.99414L5.5918 7.5918L4.99414 7.83008L3.31934 8.5L4.99414 9.16992L5.5918 9.4082L5.83008 10.0059L6.5 11.6797L7.16992 10.0059L7.4082 9.4082L8.00586 9.16992L9.67969 8.5L8.00586 7.83008L7.4082 7.5918L7.16992 6.99414L6.5 5.31934L5.83008 6.99414ZM12 8.51074L11.9883 8.66113C11.9355 9.00767 11.7034 9.30555 11.3711 9.43848L8.5625 10.5625L7.43848 13.3711C7.28665 13.7507 6.91954 13.9999 6.51074 14H6.48926C6.13172 13.9999 5.80564 13.8095 5.62793 13.5078L5.56152 13.3711L4.4375 10.5625L1.62891 9.43848C1.29659 9.30555 1.06446 9.00767 1.01172 8.66113L1 8.51074V8.48926C1.00011 8.08046 1.24933 7.71335 1.62891 7.56152L4.4375 6.4375L5.56152 3.62891C5.71335 3.24933 6.08046 3.00011 6.48926 3H6.51074C6.91954 3.00011 7.28665 3.24933 7.43848 3.62891L8.5625 6.4375L11.3711 7.56152C11.7507 7.71335 11.9999 8.08046 12 8.48926V8.51074Z"
+      fill="currentColor"
+    />
+    <path
+      d="M13.4375 4.4375L12.9287 5.70996L12.8975 5.77246C12.8154 5.91185 12.6651 6 12.5 6C12.3349 6 12.1846 5.91185 12.1025 5.77246L12.0713 5.70996L11.5625 4.4375L10.29 3.92871C10.1148 3.8586 10 3.68872 10 3.5C10 3.31128 10.1148 3.1414 10.29 3.07129L11.5625 2.5625L12.0713 1.29004C12.1414 1.11482 12.3113 1 12.5 1C12.6887 1 12.8586 1.11482 12.9287 1.29004L13.4375 2.5625L14.71 3.07129C14.8852 3.1414 15 3.31128 15 3.5C15 3.68872 14.8852 3.8586 14.71 3.92871L14.3008 4.0918L13.4375 4.4375Z"
+      fill="currentColor"
+    />
+  </Icon>
+));
+
+export default Sparkle;

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

@@ -0,0 +1,16 @@
+import { forwardRef, Icon, IconProps } from 'chakra-ui-2--react';
+
+const SparkleFilled = forwardRef<IconProps, 'svg'>((props, ref) => (
+  <Icon ref={ref} viewBox="0 0 16 16" {...props}>
+    <path
+      d="M6.51047 3H6.48953C6.08063 3 5.71292 3.24895 5.56106 3.62861L4.4375 6.4375L1.62861 7.56106C1.24895 7.71292 1 8.08063 1 8.48953V8.51047C1 8.91937 1.24895 9.28708 1.62861 9.43894L4.4375 10.5625L5.56106 13.3714C5.71292 13.751 6.08063 14 6.48953 14H6.51047C6.91937 14 7.28708 13.751 7.43894 13.3714L8.5625 10.5625L11.3714 9.43894C11.751 9.28708 12 8.91937 12 8.51047V8.48953C12 8.08063 11.751 7.71292 11.3714 7.56106L8.5625 6.4375L7.43894 3.62861C7.28708 3.24895 6.91937 3 6.51047 3Z"
+      fill="currentColor"
+    />
+    <path
+      d="M13.4375 2.5625L12.9286 1.29015C12.8585 1.11491 12.6887 1 12.5 1C12.3113 1 12.1415 1.11491 12.0714 1.29015L11.5625 2.5625L10.2901 3.07144C10.1149 3.14154 10 3.31126 10 3.5C10 3.68874 10.1149 3.85846 10.2901 3.92856L11.5625 4.4375L12.0714 5.70985C12.1415 5.88509 12.3113 6 12.5 6C12.6887 6 12.8585 5.88509 12.9286 5.70985L13.4375 4.4375L14.7099 3.92856C14.8851 3.85846 15 3.68874 15 3.5C15 3.31126 14.8851 3.14154 14.7099 3.07144L13.4375 2.5625Z"
+      fill="currentColor"
+    />
+  </Icon>
+));
+
+export default SparkleFilled;

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

@@ -272,3 +272,5 @@ export { default as SlackColor } from './SlackColor';
 export { default as Teams } from './Teams';
 export { default as TeamsColor } from './TeamsColor';
 export { default as BrowserStackColor } from './BrowserStackColor';
+export { default as Sparkle } from './Sparkle';
+export { default as SparkleFilled } from './SparkleFilled';

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

@@ -0,0 +1,16 @@
+import { forwardRef, Icon, IconProps } from 'chakra-ui-2--react';
+
+const Sparkle = forwardRef<IconProps, 'svg'>((props, ref) => (
+  <Icon ref={ref} viewBox="0 0 24 24" {...props}>
+    <path
+      d="M8.53906 11.5391L4.88477 13L8.53906 14.4609L10 18.1143L11.4609 14.4609L15.1143 13L11.4609 11.5391L10 7.88477L8.53906 11.5391ZM18 13C18 13.604 17.6321 14.1468 17.0713 14.3711L13 16L11.3711 20.0713C11.1468 20.6321 10.604 21 10 21C9.43399 21 8.92161 20.677 8.6748 20.1748L8.62891 20.0713L7 16L2.92871 14.3711C2.36794 14.1468 2 13.604 2 13C2 12.396 2.36794 11.8532 2.92871 11.6289L7 10L8.62891 5.92871C8.85321 5.36794 9.39603 5 10 5C10.604 5 11.1468 5.36794 11.3711 5.92871L13 10L17.0713 11.6289C17.6321 11.8532 18 12.396 18 13Z"
+      fill="currentColor"
+    />
+    <path
+      d="M19.8125 6.8125L19.0996 8.59375C19.0015 8.83903 18.7642 9 18.5 9C18.2688 9 18.0582 8.87675 17.9434 8.68164L17.9004 8.59375L17.1875 6.8125L15.4062 6.09961C15.161 6.00145 15 5.7642 15 5.5C15 5.2358 15.161 4.99855 15.4062 4.90039L17.1875 4.1875L17.9004 2.40625C17.9985 2.16097 18.2358 2 18.5 2C18.7642 2 19.0015 2.16097 19.0996 2.40625L19.8125 4.1875L21.5938 4.90039C21.839 4.99855 22 5.2358 22 5.5C22 5.7642 21.839 6.00145 21.5938 6.09961L19.8125 6.8125Z"
+      fill="currentColor"
+    />
+  </Icon>
+));
+
+export default Sparkle;

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

@@ -0,0 +1,16 @@
+import { forwardRef, Icon, IconProps } from 'chakra-ui-2--react';
+
+const Sparkle = forwardRef<IconProps, 'svg'>((props, ref) => (
+  <Icon ref={ref} viewBox="0 0 24 24" {...props}>
+    <path
+      d="M13 10L11.3714 5.92848C11.1471 5.36771 10.604 5 10 5C9.39603 5 8.85292 5.36771 8.62861 5.92848L7 10L2.92848 11.6286C2.36771 11.8529 2 12.396 2 13C2 13.604 2.36771 14.1471 2.92848 14.3714L7 16L8.62861 20.0715C8.85292 20.6323 9.39603 21 10 21C10.604 21 11.1471 20.6323 11.3714 20.0715L13 16L17.0715 14.3714C17.6323 14.1471 18 13.604 18 13C18 12.396 17.6323 11.8529 17.0715 11.6286L13 10Z"
+      fill="currentColor"
+    />
+    <path
+      d="M19.8125 4.1875L19.1 2.40621C19.0019 2.16087 18.7642 2 18.5 2C18.2358 2 17.9982 2.16087 17.9 2.40621L17.1875 4.1875L15.4062 4.90002C15.1609 4.99815 15 5.23576 15 5.5C15 5.76424 15.1609 6.00185 15.4062 6.09998L17.1875 6.8125L17.9 8.59379C17.9982 8.83913 18.2358 9 18.5 9C18.7642 9 19.0019 8.83913 19.1 8.59379L19.8125 6.8125L21.5938 6.09998C21.8391 6.00185 22 5.76424 22 5.5C22 5.23576 21.8391 4.99815 21.5938 4.90002L19.8125 4.1875Z"
+      fill="currentColor"
+    />
+  </Icon>
+));
+
+export default Sparkle;

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

@@ -272,3 +272,5 @@ export { default as SlackColor } from './SlackColor';
 export { default as Teams } from './Teams';
 export { default as TeamsColor } from './TeamsColor';
 export { default as BrowserStackColor } from './BrowserStackColor';
+export { default as Sparkle } from './Sparkle';
+export { default as SparkleFilled } from './SparkleFilled';

package/src/Components/List/ListItem.tsx

@@ -1,28 +1,18 @@
 import { forwardRef, ListItem as ChakraListItem, ListItemProps as ChakraListItemProps } from 'chakra-ui-2--react';
 import Box, { BoxProps } from '../Box/Box';
-import Icon, { IconProps, TypeIconName } from '../Icon/Icon';
+import Icon, { TypeIconName } from '../Icon/Icon';
 
 export interface ListItemProps extends ChakraListItemProps {
   iconColor?: BoxProps['color'];
   iconName?: TypeIconName;
-  iconSize?: IconProps['size'];
+  iconSize?: '16' | '24';
 }
 
 /**
  * ListItem is the valid children of List. It renders a <li> element by default.
  */
 const ListItem = forwardRef<ListItemProps, 'li'>((props, ref) => {
-  const { children, iconColor, iconName, iconSize, ...rest } = props;
-  let iconVerticalAlign = 'middle';
-  if (iconSize === '16') {
-    iconVerticalAlign = '-3px';
-  }
-  if (iconSize === '24') {
-    iconVerticalAlign = '-6px';
-  }
-  if (iconSize === '32') {
-    iconVerticalAlign = '-11px';
-  }
+  const { children, iconColor, iconName, iconSize, textStyle, ...rest } = props;
 
   if (!iconName) {
     return (
@@ -40,9 +30,10 @@ const ListItem = forwardRef<ListItemProps, 'li'>((props, ref) => {
           name={iconName}
           height="100%"
           color={iconColor}
-          marginEnd="6"
+          marginBlockStart={iconSize === '16' ? '2' : undefined}
+          marginInlineEnd="8"
           size={iconSize}
-          verticalAlign={iconVerticalAlign}
+          verticalAlign="middle"
         />
       )}
       <Box flexGrow={1}>{children}</Box>