@bitrise/bitkit 10.12.0-alpha-table.1 → 10.12.2

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bitrise/bitkit",
   "description": "Bitrise React component library",
-  "version": "10.12.0-alpha-table.1",
+  "version": "10.12.2",
   "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/Dropdown/Dropdown.stories.tsx

@@ -124,3 +124,12 @@ export const InsideDialog = () => {
     </Provider>
   );
 };
+export const WithIcon = () => {
+  return (
+    <Dropdown iconName="Calendar" defaultValue="daily">
+      <DropdownOption value="daily">Daily</DropdownOption>
+      <DropdownOption value="weekly">Weekly</DropdownOption>
+      <DropdownOption value="monthly">Monthly</DropdownOption>
+    </Dropdown>
+  );
+};

package/src/Components/Dropdown/Dropdown.theme.ts

@@ -86,6 +86,7 @@ const DropdownTheme = {
         height: '32',
         paddingLeft: '12',
         paddingRight: '12',
+        gap: '0.375rem',
       },
     },
     medium: {
@@ -94,6 +95,7 @@ const DropdownTheme = {
         height: '48',
         paddingLeft: '16',
         paddingRight: '16',
+        gap: '0.625rem',
       },
     },
   },

package/src/Components/Dropdown/Dropdown.tsx

@@ -19,7 +19,7 @@ import {
   useMultiStyleConfig,
 } from '@chakra-ui/react';
 import { FloatingFocusManager } from '@floating-ui/react-dom-interactions';
-import Icon from '../Icon/Icon';
+import Icon, { TypeIconName } from '../Icon/Icon';
 import { DropdownEventArgs, DropdownProvider, useDropdownContext, useDropdownStyles } from './Dropdown.context';
 import { DropdownOption, DropdownGroup, DropdownDetailedOption, DropdownOptionProps } from './DropdownOption';
 import DropdownButton from './DropdownButton';
@@ -101,6 +101,7 @@ export interface DropdownProps<T> extends ChakraProps {
   'aria-label'?: string;
   search?: ReactNode;
   children?: ReactNode;
+  iconName?: TypeIconName;
 }
 
 function useOptionListWithIndexes({ children }: { children: ReactNode }) {

package/src/Components/Dropdown/DropdownButton.tsx

@@ -1,6 +1,6 @@
 import { forwardRef, ReactNode } from 'react';
 import { chakra, ChakraProps } from '@chakra-ui/react';
-import Icon from '../Icon/Icon';
+import Icon, { TypeIconName } from '../Icon/Icon';
 import { useDropdownStyles } from './Dropdown.context';
 
 interface DropdownButtonProps extends ChakraProps {
@@ -10,17 +10,19 @@ interface DropdownButtonProps extends ChakraProps {
   formLabel?: ReactNode;
   size: 'medium' | 'small';
   children?: ReactNode;
+  iconName?: TypeIconName;
 }
 const DropdownButton = forwardRef<HTMLButtonElement, DropdownButtonProps>(
-  ({ size, blurHandler, formLabel, readOnly, placeholder, children, ...rest }, ref) => {
+  ({ size, blurHandler, formLabel, readOnly, placeholder, children, iconName, ...rest }, ref) => {
     const { field, icon } = useDropdownStyles();
     const iconSize = size === 'medium' ? '24' : '16';
     return (
       <chakra.button aria-readonly={readOnly} type="button" ref={ref} onBlur={blurHandler} __css={field} {...rest}>
+        {iconName && <Icon aria-hidden="true" __css={icon} name={iconName} size={iconSize} />}
         <chakra.span overflow="hidden" textOverflow="ellipsis" whiteSpace="nowrap" flexGrow={1}>
           {formLabel || placeholder}
         </chakra.span>
-        <Icon aria-hidden="true" __css={icon} name="DropdownArrows" fontSize={iconSize} size={iconSize} />
+        <Icon aria-hidden="true" __css={icon} name="DropdownArrows" size={iconSize} />
       </chakra.button>
     );
   },

package/src/index.ts

@@ -159,27 +159,3 @@ export { default as Accordion } from './Components/Accordion/Accordion';
 
 export type { AccordionItemProps } from './Components/Accordion/AccordionItem';
 export { default as AccordionItem } from './Components/Accordion/AccordionItem';
-
-export type { TableProps } from './Components/Table/Table';
-export { default as Table } from './Components/Table/Table';
-
-export type { TableCaptionProps } from './Components/Table/TableCaption';
-export { default as TableCaption } from './Components/Table/TableCaption';
-
-export type { TableContainerProps } from './Components/Table/TableContainer';
-export { default as TableContainer } from './Components/Table/TableContainer';
-
-export type { TableBodyProps } from './Components/Table/Tbody';
-export { default as Tbody } from './Components/Table/Tbody';
-
-export type { TableCellProps } from './Components/Table/Td';
-export { default as Td } from './Components/Table/Td';
-
-export type { TableColumnHeaderProps } from './Components/Table/Th';
-export { default as Th } from './Components/Table/Th';
-
-export type { TableHeadProps } from './Components/Table/Thead';
-export { default as Thead } from './Components/Table/Thead';
-
-export type { TableRowProps } from './Components/Table/Tr';
-export { default as Tr } from './Components/Table/Tr';

package/src/old.ts

@@ -72,27 +72,27 @@ export { default as SkeletonBox } from './Old/Skeleton/SkeletonBox';
 export type { Props as Status500Props } from './Old/Status/Status500';
 export { default as Status500 } from './Old/Status/Status500';
 
-export type { Props as OldTableProps } from './Old/Table/Table';
-export { default as OldTable } from './Old/Table/Table';
+export type { Props as TableProps } from './Old/Table/Table';
+export { default as Table } from './Old/Table/Table';
 
-export type { Props as OldTableBodyProps } from './Old/Table/TableBody';
-export { default as OldTableBody } from './Old/Table/TableBody';
+export type { Props as TableBodyProps } from './Old/Table/TableBody';
+export { default as TableBody } from './Old/Table/TableBody';
 
-export type { Props as OldTableCellProps } from './Old/Table/TableCell';
-export { default as OldTableCell } from './Old/Table/TableCell';
+export type { Props as TableCellProps } from './Old/Table/TableCell';
+export { default as TableCell } from './Old/Table/TableCell';
 
-export type { Props as OldTableHeaderProps } from './Old/Table/TableHeader';
-export { default as OldTableHeader } from './Old/Table/TableHeader';
+export type { Props as TableHeaderProps } from './Old/Table/TableHeader';
+export { default as TableHeader } from './Old/Table/TableHeader';
 
-export type { Props as OldTableHeaderCellProps } from './Old/Table/TableHeaderCell';
+export type { Props as TableHeaderCellProps } from './Old/Table/TableHeaderCell';
 export type { TypeTableSort } from './Old/Table/TableHeaderCell';
-export { default as OldTableHeaderCell } from './Old/Table/TableHeaderCell';
+export { default as TableHeaderCell } from './Old/Table/TableHeaderCell';
 
-export type { Props as OldTableHeaderRowProps } from './Old/Table/TableHeaderRow';
-export { default as OldTableHeaderRow } from './Old/Table/TableHeaderRow';
+export type { Props as TableHeaderRowProps } from './Old/Table/TableHeaderRow';
+export { default as TableHeaderRow } from './Old/Table/TableHeaderRow';
 
-export type { Props as OldTableRowProps } from './Old/Table/TableRow';
-export { default as OldTableRow } from './Old/Table/TableRow';
+export type { Props as TableRowProps } from './Old/Table/TableRow';
+export { default as TableRow } from './Old/Table/TableRow';
 
 export type { Props as TextareaProps } from './Old/Textarea/Textarea';
 export { default as Textarea } from './Old/Textarea/Textarea';

package/src/theme.ts

@@ -18,7 +18,6 @@ import Input from './Components/Input/Input.theme';
 import Dropdown from './Components/Dropdown/Dropdown.theme';
 import Tabs from './Components/Tabs/Tabs.theme';
 import Text from './Components/Text/Text.theme';
-import Table from './Components/Table/Table.theme';
 import Alert from './Foundations/Themes/Alert.theme';
 import Tooltip from './Components/Tooltip/Tooltip.theme';
 import CloseButton from './Components/CloseButton/CloseButton.theme';
@@ -77,7 +76,6 @@ const theme = {
     Checkbox,
     ColorButton,
     Divider,
-    Dropdown,
     EmptyState,
     Link,
     List,
@@ -85,7 +83,7 @@ const theme = {
     Modal: Dialog,
     Radio,
     Select,
-    Table,
+    Dropdown,
     Tabs,
     Text,
     Tooltip,