@bitrise/bitkit 12.24.0-alpha-checkablerow.2 → 12.24.0

package/package.json

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

package/src/Components/Annotation/Annotation.theme.ts

@@ -0,0 +1,58 @@
+import { Status } from './Annotation';
+
+const borderColor = {
+  info: 'separator.primary',
+  error: 'red.80',
+  warning: 'yellow.80',
+  success: 'green.80',
+};
+
+const decorationBackground = {
+  info: 'neutral.95',
+  error: 'red.95',
+  warning: 'yellow.95',
+  success: 'green.95',
+};
+
+const decorationColor = {
+  info: 'neutral.10',
+  error: 'red.50',
+  warning: 'yellow.50',
+  success: 'green.50',
+};
+const AnnotationTheme = {
+  parts: ['container', 'icon', 'body'],
+  baseStyle({ status }: { status: Status }) {
+    return {
+      wrapper: {
+        display: 'flex',
+        boxShadow: 'large',
+      },
+      decoration: {
+        color: decorationColor[status],
+        display: 'flex',
+        width: '32',
+        borderTopLeftRadius: '8',
+        borderBottomLeftRadius: '8',
+        borderWidth: '1px',
+        px: '4',
+        py: '12',
+        borderColor: borderColor[status],
+        bg: decorationBackground[status],
+      },
+      container: {
+        flexGrow: 1,
+        paddingLeft: '24',
+        paddingRight: '16',
+        py: '16',
+        borderTopRightRadius: '8',
+        borderBottomRightRadius: '8',
+        borderWidth: '1px',
+        borderLeft: 'none',
+        borderColor: borderColor[status],
+      },
+    };
+  },
+};
+
+export default AnnotationTheme;

package/src/Components/Annotation/Annotation.tsx

@@ -0,0 +1,25 @@
+import { ReactNode } from 'react';
+import { useMultiStyleConfig } from '@chakra-ui/react';
+import Box from '../Box/Box';
+import Icon from '../Icon/Icon';
+
+export type Status = 'info' | 'success' | 'error' | 'warning';
+const iconNames = {
+  info: 'Info',
+  success: 'Tick',
+  error: 'ErrorGeneral',
+  warning: 'Warning',
+} as const;
+const Annotation = ({ children, status }: { children: ReactNode; status: Status }) => {
+  const { container, decoration, wrapper } = useMultiStyleConfig('Annotation', { status });
+  return (
+    <Box __css={wrapper}>
+      <Box __css={decoration}>
+        <Icon size="24" name={iconNames[status]} />
+      </Box>
+      <Box __css={container}>{children}</Box>
+    </Box>
+  );
+};
+
+export default Annotation;

package/src/Components/Dropdown/Dropdown.tsx

@@ -229,6 +229,9 @@ function useDropdown<T>({
     if (currentOption) {
       setFormLabel(currentOption.label);
       setSelectedIndex(currentOption.index);
+    } else {
+      setFormLabel(null);
+      setSelectedIndex(null);
     }
   }, [refdChildren, formValue]);
   return {

package/src/Components/Form/Checkbox/Checkbox.theme.ts

@@ -37,11 +37,6 @@ const CheckboxTheme: ComponentStyleConfig = {
       _focusVisible: {
         boxShadow: 'formFocus',
       },
-      _disabled: {
-        cursor: 'not-allowed',
-        backgroundColor: 'neutral.93',
-        borderColor: 'neutral.90',
-      },
     },
     label: {
       userSelect: 'none',

package/src/Components/Form/Radio/Radio.theme.ts

@@ -44,11 +44,6 @@ const RadioTheme: ComponentStyleConfig = {
       _focusVisible: {
         boxShadow: 'formFocus',
       },
-      _disabled: {
-        cursor: 'not-allowed',
-        backgroundColor: 'neutral.93',
-        borderColor: 'neutral.90',
-      },
     },
     label: {
       userSelect: 'none',

package/src/Components/{ContentSwitcher/ContentSwitcher.context.ts → SegmentedControl/SegmentedControl.context.ts}

@@ -1,8 +1,8 @@
 import { UseRadioGroupReturn } from '@chakra-ui/react';
 import { createContext } from '@chakra-ui/react-utils';
 
-export interface ContentSwitcherContextType {
+export interface SegmentedControlContextType {
   getRadioProps: UseRadioGroupReturn['getRadioProps'];
   isGroupDisabled?: boolean;
 }
-export const [ContentSwitcherContext, useContentSwitcherContext] = createContext<ContentSwitcherContextType>();
+export const [SegmentedControlContext, useSegmentedControlContext] = createContext<SegmentedControlContextType>();

package/src/Components/{ContentSwitcher/ContentSwitcher.theme.ts → SegmentedControl/SegmentedControl.theme.ts}

@@ -2,7 +2,7 @@ import { createMultiStyleConfigHelpers } from '@chakra-ui/styled-system';
 
 const itemHelpers = createMultiStyleConfigHelpers(['container', 'item']);
 
-const ContentSwitcherTheme = itemHelpers.defineMultiStyleConfig({
+const SegmentedControlTheme = itemHelpers.defineMultiStyleConfig({
   baseStyle: {
     container: {
       display: 'flex',
@@ -18,14 +18,14 @@ const ContentSwitcherTheme = itemHelpers.defineMultiStyleConfig({
       cursor: 'pointer',
       fontSize: '3',
       lineHeight: '2.375rem',
-      color: 'purple.10',
+      color: 'neutral.40',
       textAlign: 'center',
+      fontWeight: 'demiBold',
       border: '1px solid',
       borderColor: 'transparent',
       borderRadius: '4',
       _checked: {
-        fontWeight: 'demiBold',
-        color: 'purple.40',
+        color: 'purple.10',
         backgroundColor: 'neutral.100',
         borderColor: 'separator.primary',
         _hover: {
@@ -43,17 +43,19 @@ const ContentSwitcherTheme = itemHelpers.defineMultiStyleConfig({
       _hover: {
         backgroundColor: 'neutral.93',
         borderColor: 'neutral.93',
+        color: 'neutral.10',
         _disabled: {
           backgroundColor: 'transparent',
           borderColor: 'transparent',
+          color: 'neutral.70',
         },
       },
       _disabled: {
         cursor: 'not-allowed',
-        color: 'neutral.60',
+        color: 'neutral.70',
       },
     },
   },
 });
 
-export default ContentSwitcherTheme;
+export default SegmentedControlTheme;

package/src/Components/{ContentSwitcher/ContentSwitcher.tsx → SegmentedControl/SegmentedControl.tsx}

@@ -1,14 +1,14 @@
 import { useMemo } from 'react';
 import { useMultiStyleConfig, useRadioGroup, UseRadioGroupProps, forwardRef } from '@chakra-ui/react';
 import Box, { BoxProps } from '../Box/Box';
-import { ContentSwitcherContext, ContentSwitcherContextType } from './ContentSwitcher.context';
+import { SegmentedControlContext, SegmentedControlContextType } from './SegmentedControl.context';
 
-export type ContentSwitcherProps = BoxProps & UseRadioGroupProps;
+export type SegmentedControlProps = BoxProps & UseRadioGroupProps;
 
 /**
  * This is a custom radio button group, based on: https://chakra-ui.com/docs/components/radio/usage#custom-radio-buttons.
  */
-const ContentSwitcher = forwardRef<ContentSwitcherProps, 'div'>((props, ref) => {
+const SegmentedControl = forwardRef<SegmentedControlProps, 'div'>((props, ref) => {
   const { defaultValue, isDisabled, name, onChange, value, ...rest } = props;
 
   const { getRootProps, getRadioProps } = useRadioGroup({
@@ -19,7 +19,7 @@ const ContentSwitcher = forwardRef<ContentSwitcherProps, 'div'>((props, ref) =>
     value,
   });
 
-  const ctx = useMemo<ContentSwitcherContextType>(
+  const ctx = useMemo<SegmentedControlContextType>(
     () => ({
       getRadioProps,
       isGroupDisabled: isDisabled,
@@ -29,13 +29,13 @@ const ContentSwitcher = forwardRef<ContentSwitcherProps, 'div'>((props, ref) =>
 
   const group = getRootProps();
 
-  const theme = useMultiStyleConfig('ContentSwitcher');
+  const theme = useMultiStyleConfig('SegmentedControl');
 
   return (
-    <ContentSwitcherContext value={ctx}>
+    <SegmentedControlContext value={ctx}>
       <Box __css={theme.container} ref={ref} {...group} {...rest} />
-    </ContentSwitcherContext>
+    </SegmentedControlContext>
   );
 });
 
-export default ContentSwitcher;
+export default SegmentedControl;

package/src/Components/{ContentSwitcher/ContentSwitcherItem.tsx → SegmentedControl/SegmentedControlItem.tsx}

@@ -1,21 +1,21 @@
 import { useMultiStyleConfig, useRadio } from '@chakra-ui/react';
 import Box from '../Box/Box';
-import { useContentSwitcherContext } from './ContentSwitcher.context';
+import { useSegmentedControlContext } from './SegmentedControl.context';
 
-export interface ContentSwitcherItemProps {
+export interface SegmentedControlItemProps {
   children: string;
   isDisabled?: boolean;
   value: string;
 }
 
-const ContentSwitcherItem = (props: ContentSwitcherItemProps) => {
-  const { getRadioProps, isGroupDisabled } = useContentSwitcherContext();
+const SegmentedControlItem = (props: SegmentedControlItemProps) => {
+  const { getRadioProps, isGroupDisabled } = useSegmentedControlContext();
 
   const { children, isDisabled, value } = props;
 
   const { getInputProps, getCheckboxProps } = useRadio(getRadioProps({ value }));
 
-  const theme = useMultiStyleConfig('ContentSwitcher');
+  const theme = useMultiStyleConfig('SegmentedControl');
 
   const isItemDisabled = isGroupDisabled || isDisabled;
 
@@ -27,4 +27,4 @@ const ContentSwitcherItem = (props: ContentSwitcherItemProps) => {
   );
 };
 
-export default ContentSwitcherItem;
+export default SegmentedControlItem;

package/src/Components/Table/SelectableRow.tsx

@@ -1,20 +1,17 @@
 import { ReactNode } from 'react';
 import { LinkBox, LinkOverlay } from '@chakra-ui/react';
 import Radio from '../Form/Radio/Radio';
-import Tooltip, { TooltipProps } from '../Tooltip/Tooltip';
 import Td from './Td';
 import Tr, { RowProps } from './Tr';
 
 export interface SelectableRowProps extends RowProps {
   id: string;
-  isDisabled?: boolean;
   label: ReactNode;
-  tooltipProps?: Omit<TooltipProps, 'children'>;
   value: string;
 }
 
 const SelectableRow = (props: SelectableRowProps) => {
-  const { children, id, isDisabled, label, tooltipProps, value, ...rest } = props;
+  const { children, id, label, value, ...rest } = props;
 
   return (
     <LinkBox
@@ -34,12 +31,10 @@ const SelectableRow = (props: SelectableRowProps) => {
       {...rest}
     >
       <Td>
-        <Tooltip isDisabled={!tooltipProps} placement="right" shouldWrapChildren {...tooltipProps}>
-          <Radio id={id} isDisabled={isDisabled} value={value} zIndex="1" />
-        </Tooltip>
+        <Radio id={id} value={value} />
       </Td>
       <Td>
-        <LinkOverlay as="label" cursor={isDisabled ? 'not-allowed' : 'pointer'} htmlFor={id}>
+        <LinkOverlay as="label" cursor="pointer" htmlFor={id}>
           {label}
         </LinkOverlay>
       </Td>

package/src/index.ts

@@ -267,11 +267,11 @@ export {
 export { default as SidebarItem } from './Components/Sidebar/SidebarItem';
 export { SidebarItemIcon, SidebarItemLabel, SidebarItemDateExtra } from './Components/Sidebar/SidebarItem';
 
-export type { ContentSwitcherProps } from './Components/ContentSwitcher/ContentSwitcher';
-export { default as ContentSwitcher } from './Components/ContentSwitcher/ContentSwitcher';
+export type { SegmentedControlProps } from './Components/SegmentedControl/SegmentedControl';
+export { default as SegmentedControl } from './Components/SegmentedControl/SegmentedControl';
 
-export type { ContentSwitcherItemProps } from './Components/ContentSwitcher/ContentSwitcherItem';
-export { default as ContentSwitcherItem } from './Components/ContentSwitcher/ContentSwitcherItem';
+export type { SegmentedControlItemProps } from './Components/SegmentedControl/SegmentedControlItem';
+export { default as SegmentedControlItem } from './Components/SegmentedControl/SegmentedControlItem';
 
 export type { DrawerProps } from './Components/Drawer/Drawer';
 export { default as Drawer } from './Components/Drawer/Drawer';
@@ -283,8 +283,5 @@ export { default as ClickableRow } from './Components/Table/ClickableRow';
 export type { SelectableRowProps } from './Components/Table/SelectableRow';
 export { default as SelectableRow } from './Components/Table/SelectableRow';
 
-export type { CheckableRowProps } from './Components/Table/CheckableRow';
-export { default as CheckableRow } from './Components/Table/CheckableRow';
-
 export type { TagProps } from './Components/Tag/Tag';
 export { default as Tag } from './Components/Tag/Tag';

package/src/theme.ts

@@ -34,8 +34,9 @@ import ProgressBar from './Components/ProgressBar/ProgressBar.theme';
 import Slider from './Components/Slider/Slider.theme';
 import Sidebar from './Components/Sidebar/Sidebar.theme';
 import SidebarItem from './Components/Sidebar/SidebarItem.theme';
-import ContentSwitcher from './Components/ContentSwitcher/ContentSwitcher.theme';
+import SegmentedControl from './Components/SegmentedControl/SegmentedControl.theme';
 import Tag from './Components/Tag/Tag.theme';
+import Annotation from './Components/Annotation/Annotation.theme';
 
 import breakpoints from './Foundations/Breakpoints/Breakpoints';
 import colors from './Foundations/Colors/Colors';
@@ -81,6 +82,7 @@ const theme = {
     },
   },
   components: {
+    Annotation,
     Accordion,
     Avatar,
     Badge,
@@ -117,7 +119,7 @@ const theme = {
     SidebarItem,
     Progress: ProgressBar,
     Slider,
-    ContentSwitcher,
+    SegmentedControl,
     Tag,
   },
 };

package/src/Components/Table/CheckableRow.tsx

@@ -1,55 +0,0 @@
-import { ReactNode } from 'react';
-import { LinkBox, LinkOverlay } from '@chakra-ui/react';
-import Checkbox from '../Form/Checkbox/Checkbox';
-import Tooltip, { TooltipProps } from '../Tooltip/Tooltip';
-import Td, { TableCellProps } from './Td';
-import Tr, { RowProps } from './Tr';
-
-export interface CheckableRowProps extends RowProps {
-  firstCellStyle?: TableCellProps;
-  id: string;
-  isDisabled?: boolean;
-  label: ReactNode;
-  name: string;
-  secondCellStyle?: TableCellProps;
-  tooltipProps?: Omit<TooltipProps, 'children'>;
-  value: string;
-}
-
-const CheckableRow = (props: CheckableRowProps) => {
-  const { children, firstCellStyle, id, isDisabled, label, name, secondCellStyle, tooltipProps, value, ...rest } =
-    props;
-
-  return (
-    <LinkBox
-      as={Tr}
-      transform="scale(1)"
-      _hover={{
-        td: { background: 'neutral.95' },
-        ':has(input:checked)': {
-          td: { background: 'purple.93' },
-        },
-      }}
-      sx={{
-        ':has(input:checked)': {
-          td: { background: 'purple.95' },
-        },
-      }}
-      {...rest}
-    >
-      <Td {...firstCellStyle}>
-        <Tooltip isDisabled={!tooltipProps} placement="right" shouldWrapChildren {...tooltipProps}>
-          <Checkbox id={id} isDisabled={isDisabled} name={name} value={value} zIndex="1" />
-        </Tooltip>
-      </Td>
-      <Td {...secondCellStyle}>
-        <LinkOverlay as="label" cursor={isDisabled ? 'not-allowed' : 'pointer'} htmlFor={id}>
-          {label}
-        </LinkOverlay>
-      </Td>
-      {children}
-    </LinkBox>
-  );
-};
-
-export default CheckableRow;