@bitrise/bitkit 12.14.0 → 12.15.0

package/package.json

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

package/src/Components/Breadcrumb/Breadcrumb.theme.ts

@@ -2,20 +2,13 @@ import type { SystemStyleObject } from '@chakra-ui/theme-tools';
 
 const BreadcrumbTheme: SystemStyleObject = {
   baseStyle: {
-    container: {
-      '> ol': {
-        display: 'flex',
-        alignItems: 'center',
-      },
+    list: {
+      display: 'flex',
+      alignItems: 'center',
     },
     item: {
       _last: {
         minWidth: 0,
-
-        '.breadcrumbLinkText': {
-          overflow: 'hidden',
-          textOverflow: 'ellipsis',
-        },
       },
     },
     link: {
@@ -24,9 +17,19 @@ const BreadcrumbTheme: SystemStyleObject = {
       gap: '8',
       whiteSpace: 'nowrap',
       minWidth: 0,
+      _activeLink: {
+        color: 'neutral.10',
+      },
+    },
+    linkText: {
+      color: 'purple.50',
+      _groupHover: {
+        textDecoration: 'underline',
+      },
     },
     separator: {
       display: 'flex',
+      color: 'neutral.80',
     },
   },
 };

package/src/Components/Breadcrumb/Breadcrumb.tsx

@@ -35,7 +35,7 @@ const Breadcrumb = forwardRef<BreadcrumbProps, 'nav'>((props, ref) => {
 
   const defaultIconName = isMobile ? 'ChevronLeft' : 'ChevronRight';
   const properties = {
-    separator: <Icon name={separatorIconName || defaultIconName} color="neutral.70" size="16" />,
+    separator: <Icon name={separatorIconName || defaultIconName} size="24" />,
     ...rest,
   };
   return (
@@ -45,6 +45,4 @@ const Breadcrumb = forwardRef<BreadcrumbProps, 'nav'>((props, ref) => {
   );
 });
 
-Breadcrumb.defaultProps = {};
-
 export default Breadcrumb;

package/src/Components/Breadcrumb/BreadcrumbLink.tsx

@@ -2,10 +2,11 @@ import {
   BreadcrumbLink as ChakraBreadcrumbLink,
   BreadcrumbLinkProps as ChakraBreadcrumbLinkProps,
   forwardRef,
+  useMultiStyleConfig,
 } from '@chakra-ui/react';
 import Avatar from '../Avatar/Avatar';
 import { useResponsive } from '../../hooks';
-import Box from '../Box/Box';
+import Text from '../Text/Text';
 
 export interface BreadcrumbLinkProps extends ChakraBreadcrumbLinkProps {
   avatarName?: string;
@@ -17,18 +18,18 @@ const BreadcrumbLink = forwardRef<BreadcrumbLinkProps, 'a'>((props, ref) => {
   const { isMobile } = useResponsive();
 
   const properties: ChakraBreadcrumbLinkProps = {
-    color: isCurrentPage ? 'neutral.40' : 'inherit',
     isCurrentPage,
     ...rest,
   };
+  const style = useMultiStyleConfig('Breadcrumb');
   return (
-    <ChakraBreadcrumbLink {...properties} color={isCurrentPage ? 'neutral.40' : 'inherit'} ref={ref}>
+    <ChakraBreadcrumbLink {...properties} role="group" ref={ref}>
       {!isMobile && (avatarName || avatarUrl) && (
         <Avatar name={avatarName || children?.toString()} src={avatarUrl} borderRadius="4" />
       )}
-      <Box as="span" className="breadcrumbLinkText">
+      <Text as="span" hasEllipsis sx={isCurrentPage ? undefined : style.linkText}>
         {children}
-      </Box>
+      </Text>
     </ChakraBreadcrumbLink>
   );
 });

package/src/Components/Sidebar/SidebarItem.tsx

@@ -1,5 +1,5 @@
 import { forwardRef, ReactNode } from 'react';
-import { chakra, ChakraProps, createStylesContext, useMultiStyleConfig } from '@chakra-ui/react';
+import { chakra, ChakraProps, createStylesContext, IconProps, useMultiStyleConfig } from '@chakra-ui/react';
 import { DateTime } from 'luxon';
 import Text from '../Text/Text';
 import Icon, { TypeIconName } from '../Icon/Icon';
@@ -23,6 +23,7 @@ const sidebarVariant = ({ selected, disabled }: { selected?: boolean; disabled?:
   }
   return undefined;
 };
+
 const SidebarItem = forwardRef(
   (
     { children, disabled, selected, href, onClick }: SidebarItemProps,
@@ -44,9 +45,9 @@ const SidebarItem = forwardRef(
   },
 );
 
-const SidebarItemIcon = ({ name }: { name: TypeIconName }) => {
+const SidebarItemIcon = ({ name, ...iconProps }: { name: TypeIconName } & Omit<IconProps, 'sx'>) => {
   const { icon } = useSidebarItemStyle();
-  return <Icon sx={icon} name={name} size="24" />;
+  return <Icon sx={icon} name={name} size="24" {...iconProps} />;
 };
 
 const SidebarItemLabel = ({ children }: { children: ReactNode }) => (
@@ -54,6 +55,7 @@ const SidebarItemLabel = ({ children }: { children: ReactNode }) => (
     {children}
   </Text>
 );
+
 const SidebarItemDateExtra = ({ date }: { date: Date | DateTime }) => {
   const dateTime = DateTime.isDateTime(date) ? date : DateTime.fromJSDate(date);
   return (