@bitrise/bitkit 11.1.1 → 11.1.3

package/package.json

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

package/src/Components/Accordion/Accordion.theme.ts

@@ -7,6 +7,14 @@ type ColorObj = {
     enabledIcon: string;
     disabledIcon: string;
     hover: string;
+    border: string;
+  };
+};
+
+type VariantObj = {
+  [key: string]: {
+    borderRadius: string;
+    boxShadow: string;
   };
 };
 
@@ -17,8 +25,6 @@ const buttonStyle = {
   width: '100%',
   padding: '16',
   borderBottom: '1px solid',
-  borderColor: 'neutral.93',
-  borderRadius: '8',
 };
 
 const iconStyle = {
@@ -34,6 +40,7 @@ const colors: ColorObj = {
     enabledIcon: 'currentColor',
     disabledIcon: 'currentColor',
     hover: 'purple.95',
+    border: 'neutral.93',
   },
   gray: {
     enabledButton: 'neutral.95',
@@ -41,27 +48,42 @@ const colors: ColorObj = {
     enabledIcon: 'currentColor',
     disabledIcon: 'currentColor',
     hover: 'purple.95',
+    border: 'neutral.93',
   },
   orange: {
     enabledButton: 'orange.93',
     disabledButton: 'orange.93',
     enabledIcon: 'orange.10',
     disabledIcon: 'orange.80',
-    hover: 'orange.90',
+    hover: 'orange.93',
+    border: 'orange.90',
+  },
+};
+
+const variants: VariantObj = {
+  default: {
+    borderRadius: '8',
+    boxShadow: 'small',
+  },
+  flat: {
+    borderRadius: '0',
+    boxShadow: 'none',
   },
 };
 
 const AccordionTheme: ComponentStyleConfig = {
-  baseStyle: ({ colorScheme }) => ({
+  baseStyle: ({ colorScheme, variant }) => ({
     item: {
       border: '1px solid',
-      borderColor: 'neutral.93',
-      borderRadius: '8',
-      boxShadow: 'small',
+      borderColor: colors[colorScheme].border,
+      borderRadius: variants[variant].borderRadius,
+      boxShadow: variants[variant].boxShadow,
       marginBottom: '16',
     },
     enabledButton: {
       ...buttonStyle,
+      borderColor: colors[colorScheme].border,
+      borderRadius: variants[variant].borderRadius,
       background: colors[colorScheme].enabledButton,
       _hover: {
         background: colors[colorScheme].hover,
@@ -73,7 +95,9 @@ const AccordionTheme: ComponentStyleConfig = {
     },
     disabledButton: {
       ...buttonStyle,
+      borderRadius: variants[variant].borderRadius,
       background: colors[colorScheme].disabledButton,
+      borderColor: colors[colorScheme].border,
       cursor: 'default',
     },
     enabledIcon: {

package/src/Components/Accordion/Accordion.tsx

@@ -8,6 +8,7 @@ import {
 
 export interface AccordionProps extends Omit<ChakraAccordionProps, 'onChange'> {
   colorScheme?: 'white' | 'gray' | 'orange';
+  variant?: 'default' | 'flat';
   onChange?: (ids: string[], indexes: number[]) => void;
 }
 
@@ -25,7 +26,7 @@ const getItemIds = (props: AccordionProps) => {
  */
 const Accordion = (props: AccordionProps) => {
   const prefersReducedMotion = usePrefersReducedMotion({ ssr: false });
-  const { children, colorScheme, onChange, ...rest } = props;
+  const { children, colorScheme, variant, onChange, ...rest } = props;
   const itemIds = getItemIds(props);
 
   const onAccordionChange = (indexes: ExpandedIndex) => {
@@ -43,6 +44,7 @@ const Accordion = (props: AccordionProps) => {
       allowMultiple
       allowToggle
       colorScheme={colorScheme}
+      variant={variant}
       reduceMotion={prefersReducedMotion}
       onChange={onAccordionChange}
       {...rest}
@@ -54,5 +56,6 @@ const Accordion = (props: AccordionProps) => {
 
 Accordion.defaultProps = {
   colorScheme: 'white',
+  variant: 'default',
 };
 export default Accordion;

package/src/Components/Dialog/Dialog.tsx

@@ -55,7 +55,7 @@ const Dialog = ({
       <ModalContent data-testid={dataTestid} {...rest}>
         {variant !== 'empty' && (
           <>
-            <ModalHeader>
+            <ModalHeader marginRight="48">
               <Text as="h1" size="5">
                 {title}
               </Text>