@bitrise/bitkit 11.4.1 → 11.5.0

package/package.json

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

package/src/Components/Accordion/Accordion.tsx

@@ -4,7 +4,10 @@ import {
   usePrefersReducedMotion,
 } from '@chakra-ui/react';
 
-export type AccordionProps = Omit<ChakraAccordionProps, 'onChange' | 'defaultIndex'> & {
+export type AccordionButtonSize = 'sm' | 'md';
+
+export type AccordionProps = Omit<ChakraAccordionProps, 'defaultIndex'> & {
+  buttonSize?: AccordionButtonSize;
   defaultIndex: number[];
 };
 
@@ -13,12 +16,13 @@ export type AccordionProps = Omit<ChakraAccordionProps, 'onChange' | 'defaultInd
  */
 const Accordion = (props: AccordionProps) => {
   const prefersReducedMotion = usePrefersReducedMotion({ ssr: false });
-  const { children, colorScheme, defaultIndex, variant, ...rest } = props;
+  const { buttonSize = 'md', children, colorScheme, defaultIndex, variant, ...rest } = props;
 
   return (
     <ChakraAccordion
       allowMultiple
       allowToggle
+      buttonSize={buttonSize}
       colorScheme={colorScheme}
       variant={variant}
       reduceMotion={prefersReducedMotion}

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

@@ -1,6 +1,7 @@
 import { StyleFunctionProps } from '@chakra-ui/styled-system';
 import type { ComponentStyleConfig } from '@chakra-ui/theme';
 import { CSSObject } from '@emotion/react';
+import { AccordionButtonSize } from '../Accordion/Accordion';
 
 type ColorObj = {
   [key: string]: {
@@ -126,12 +127,14 @@ const LegacyBaseStyle: ({ colorScheme, variant }: Pick<StyleFunctionProps, 'colo
   },
 });
 
-const BaseStyle: () => CSSObject = () => ({
+const buttonPaddingBlockSizes: Record<AccordionButtonSize, string> = {
+  sm: '12',
+  md: '20',
+};
+
+const BaseStyle: (buttonSize: AccordionButtonSize) => CSSObject = (buttonSize) => ({
   item: {
-    borderRadius: 0,
-    boxShadow: 'none',
-    borderTopStyle: 'solid',
-    borderTopWidth: '1px',
+    borderTop: '1px solid',
     borderTopColor: 'neutral.90',
   },
   button: {
@@ -140,14 +143,12 @@ const BaseStyle: () => CSSObject = () => ({
     justifyContent: 'space-between',
     width: '100%',
     paddingInline: '16',
-    paddingBlock: '20',
+    paddingBlock: buttonPaddingBlockSizes[buttonSize],
     borderColor: 'neutral.93',
     _hover: {
       background: 'neutral.93',
     },
-    _expanded: {
-      borderBottomLeftRadius: '0',
-      borderBottomRightRadius: '0',
+    _active: {
       background: 'neutral.90',
     },
   },
@@ -157,13 +158,20 @@ const BaseStyle: () => CSSObject = () => ({
     marginLeft: '16',
   },
   panel: {
-    padding: '16',
+    paddingBlockEnd: '16',
+    paddingInline: '16',
+  },
+  root: {
+    borderBottom: '1px solid',
+    borderBottomColor: 'neutral.90',
   },
 });
 
 const AccordionTheme: ComponentStyleConfig = {
-  baseStyle: ({ colorScheme, variant }) => {
-    return variant === 'legacy' || variant === 'flat' ? LegacyBaseStyle({ colorScheme, variant }) : BaseStyle();
+  baseStyle: ({ buttonSize, colorScheme, variant }) => {
+    return variant === 'legacy' || variant === 'flat'
+      ? LegacyBaseStyle({ colorScheme, variant })
+      : BaseStyle(buttonSize);
   },
 };