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

package/package.json

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

package/src/Components/Dropdown/Dropdown.stories.tsx

@@ -133,3 +133,22 @@ export const WithIcon = () => {
     </Dropdown>
   );
 };
+export const WithCustomLabel = () => {
+  const [value, setValue] = useState('custom');
+
+  return (
+    <Dropdown
+      iconName="Calendar"
+      value={value}
+      onChange={(event) => setValue(event.target.value as string)}
+      formLabel={value === 'custom' ? '18 Aug - 19 Aug' : value}
+      search={false}
+    >
+      <DropdownOption value="Last 30 days">Last 30 days</DropdownOption>
+      <DropdownOption value="Last 40 days">Last 45 days</DropdownOption>
+      <DropdownOption value="Last 50 days">Last 60 days</DropdownOption>
+      <DropdownOption value="Last 90 days">Last 90 days</DropdownOption>
+      <DropdownOption value="custom">Custom</DropdownOption>
+    </Dropdown>
+  );
+};

package/src/Components/Dropdown/Dropdown.test.tsx

@@ -549,4 +549,29 @@ describe('Dropdown', () => {
       });
     });
   });
+
+  describe('label', () => {
+    it('renders label associated with the selected option', async () => {
+      render(
+        <Dropdown defaultValue="Test option 2">
+          <DropdownOption value="Test option 1">Test option 1</DropdownOption>
+          <DropdownOption value="Test option 2">Test option 2</DropdownOption>
+        </Dropdown>,
+      );
+
+      const button = await screen.findByRole('combobox');
+      expect(button).toHaveTextContent('Test option 2');
+    });
+
+    it('renders custom label if provided', async () => {
+      render(
+        <Dropdown formLabel="Custom label">
+          <DropdownOption>Test option</DropdownOption>
+        </Dropdown>,
+      );
+
+      const button = await screen.findByRole('combobox');
+      expect(button).toHaveTextContent('Custom label');
+    });
+  });
 });

package/src/Components/Dropdown/Dropdown.tsx

@@ -102,6 +102,7 @@ export interface DropdownProps<T> extends ChakraProps {
   search?: ReactNode;
   children?: ReactNode;
   iconName?: TypeIconName;
+  formLabel?: string;
 }
 
 function useOptionListWithIndexes({ children }: { children: ReactNode }) {
@@ -266,7 +267,18 @@ function useDropdown<T>({
 
 const Dropdown = forwardRef<DropdownInstance<string | null>, DropdownProps<string | null>>(
   (
-    { dropdownMaxHeight, dropdownMinHeight, readOnly, onBlur, placeholder, name, search, size = 'medium', ...props },
+    {
+      dropdownMaxHeight,
+      dropdownMinHeight,
+      readOnly,
+      onBlur,
+      placeholder,
+      name,
+      search,
+      size = 'medium',
+      formLabel: customFormLabel,
+      ...props
+    },
     ref,
   ) => {
     const optionsRef = useRef(null);
@@ -316,7 +328,7 @@ const Dropdown = forwardRef<DropdownInstance<string | null>, DropdownProps<strin
             {...props}
             placeholder={placeholder}
             size={size}
-            formLabel={formLabel}
+            formLabel={customFormLabel ?? formLabel}
             blurHandler={blurHandler}
             readOnly={readOnly}
           />

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,