@bitrise/bitkit 10.13.0-alpha-table.1 → 10.13.0-alpha-table-new.1

package/package.json

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

package/src/Components/Accordion/AccordionItem.tsx

@@ -6,7 +6,7 @@ import {
   AccordionPanel,
   AccordionPanelProps,
   AccordionIcon,
-  useMultiStyleConfig,
+  useAccordionStyles,
 } from '@chakra-ui/react';
 import Box from '../Box/Box';
 import Text from '../Text/Text';
@@ -19,7 +19,7 @@ export interface AccordionItemProps extends AccordionPanelProps {
 
 const AccordionItem = (props: AccordionItemProps) => {
   const { buttonContent, children, id, ...rest } = props;
-  const styles = useMultiStyleConfig('Accordion');
+  const styles = useAccordionStyles();
 
   const ButtonComponent = children ? AccordionButton : Box;
 

package/src/Components/Avatar/Avatar.tsx

@@ -9,6 +9,9 @@ export interface AvatarProps extends ChakraAvatarProps {
 }
 
 const getInitials = (name: string) => {
+  if (name.length < 3) {
+    return name;
+  }
   return `${name.charAt(0)}${name.charAt(name.length - 1)}`;
 };
 

package/src/Components/Table/SortIcon.tsx

@@ -0,0 +1,10 @@
+import { Icon, IconProps, forwardRef } from '@chakra-ui/react';
+
+const SortIcon = forwardRef<IconProps, 'svg'>((props, ref) => (
+  <Icon ref={ref} viewBox="0 0 24 24" width="24" height="24" {...props}>
+    <path d="M7.68341 9.17991L11.6159 4.46093C11.8158 4.22105 12.1842 4.22106 12.3841 4.46093L16.3166 9.17991C16.588 9.50557 16.3564 10 15.9325 10H8.06752C7.6436 10 7.41203 9.50557 7.68341 9.17991Z" />
+    <path d="M16.3166 14.8201L12.3841 19.5391C12.1842 19.7789 11.8158 19.7789 11.6159 19.5391L7.68341 14.8201C7.41203 14.4944 7.6436 14 8.06752 14L15.9325 14C16.3564 14 16.588 14.4944 16.3166 14.8201Z" />
+  </Icon>
+));
+
+export default SortIcon;

package/src/Components/Table/Table.theme.ts

@@ -55,6 +55,7 @@ const Tabletheme: SystemStyleObject = {
     sortButton: {
       display: 'flex',
       gap: '8',
+      alignItems: 'center',
       width: '100%',
       paddingX: '16',
       paddingY: '12',
@@ -64,6 +65,20 @@ const Tabletheme: SystemStyleObject = {
         backgroundColor: 'neutral.90',
       },
     },
+    sortIcon: {
+      path: {
+        fill: 'neutral.80',
+      },
+      '[aria-sort="none"]:hover & path': {
+        fill: 'purple.10',
+      },
+      '[aria-sort="ascending"] & path:first-child': {
+        fill: 'purple.10',
+      },
+      '[aria-sort="descending"] & path:last-child': {
+        fill: 'purple.10',
+      },
+    },
     td: {
       borderBottom: '1px solid',
       borderColor: 'neutral.93',

package/src/Components/Table/TableCaption.tsx

@@ -2,7 +2,7 @@ import {
   TableCaption as ChakraTableCaption,
   TableCaptionProps as ChakraTableCaptionProps,
   forwardRef,
-  useMultiStyleConfig,
+  useTableStyles,
 } from '@chakra-ui/react';
 import Text from '../Text/Text';
 
@@ -12,7 +12,7 @@ export interface TableCaptionProps extends Omit<ChakraTableCaptionProps, 'placem
 
 const TableCaption = forwardRef<TableCaptionProps, 'caption'>((props, ref) => {
   const { children, description } = props;
-  const css = useMultiStyleConfig('Table');
+  const css = useTableStyles();
 
   return (
     <ChakraTableCaption {...props} placement="top" ref={ref}>

package/src/Components/Table/Td.tsx

@@ -16,7 +16,7 @@ const Td = forwardRef<TableCellProps, 'td'>((props, ref) => {
     sx: VARIANTS[variant || 'default'],
     ...rest,
   };
-  return <ChakraTd {...properties} ref={ref} />;
+  return <ChakraTd role="cell" {...properties} ref={ref} />;
 });
 
 export default Td;

package/src/Components/Table/Th.tsx

@@ -2,10 +2,10 @@ import {
   Th as ChakraTh,
   TableColumnHeaderProps as ChakraTableColumnHeaderProps,
   forwardRef,
-  useMultiStyleConfig,
+  useTableStyles,
 } from '@chakra-ui/react';
 import Box from '../Box/Box';
-import Icon, { TypeIconName } from '../Icon/Icon';
+import SortIcon from './SortIcon';
 
 type SortType = 'ascending' | 'descending' | undefined;
 
@@ -17,29 +17,24 @@ export interface TableColumnHeaderProps extends ChakraTableColumnHeaderProps {
 
 const Th = forwardRef<TableColumnHeaderProps, 'th'>((props, ref) => {
   const { children, isSortable, onSortClick, sortedBy, ...rest } = props;
-  const css = useMultiStyleConfig('Table');
+  const css = useTableStyles();
   const properties: ChakraTableColumnHeaderProps = {
     children,
     ...rest,
   };
 
   if (isSortable) {
-    let iconName: TypeIconName = 'Request';
-    if (sortedBy === 'ascending') {
-      iconName = 'ArrowUp';
-    } else if (sortedBy === 'descending') {
-      iconName = 'ArrowDown';
-    }
     const onClick = () => {
       if (onSortClick) {
         onSortClick(sortedBy);
       }
     };
     properties.padding = '0';
+    properties['aria-sort'] = sortedBy || 'none';
     properties.children = (
       <Box as="button" onClick={onClick} sx={css.sortButton}>
         {children}
-        <Icon name={iconName} transform={sortedBy ? 'none' : 'rotate(90deg)'} />
+        <SortIcon sx={css.sortIcon} />
       </Box>
     );
   }

package/src/Components/Table/Tr.tsx

@@ -5,7 +5,7 @@ import {
   TableRowProps as ChakraTableRowProps,
   forwardRef,
   useDisclosure,
-  useMultiStyleConfig,
+  useTableStyles,
 } from '@chakra-ui/react';
 import Icon from '../Icon/Icon';
 import Td from './Td';
@@ -20,7 +20,7 @@ export interface TableRowProps extends ChakraTableRowProps {
 
 const Tr = forwardRef<TableRowProps, 'tr'>((props, ref) => {
   const { isOpen, onToggle } = useDisclosure();
-  const css = useMultiStyleConfig('Table');
+  const css = useTableStyles();
 
   const { children, expandableContent, onClick, ...rest } = props;
   const properties: ChakraTableRowProps = {