@bitrise/bitkit 13.31.0 → 13.33.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bitrise/bitkit",
   "description": "Bitrise React component library",
-  "version": "13.31.0",
+  "version": "13.33.0",
   "repository": {
     "type": "git",
     "url": "git+ssh://git@github.com/bitrise-io/bitkit.git"

package/src/Components/Button/Button.theme.ts

@@ -14,10 +14,10 @@ const baseStyle = defineStyle((props) => {
         borderLeftRadius: '4',
       },
       // Selects the last .chakra-button item even is there an another element after that (eg menu)
-      '&:not(:has(~ .chakra-button))': {
+      ':not(:has(~ .chakra-button))': {
         borderRightRadius: '4',
       },
-      [`&:not(:first-child)${ignoreSsrWarning}`]: {
+      [`:not(:first-child)${ignoreSsrWarning}`]: {
         ...(props.variant.includes('primary')
           ? {
               _before: {
@@ -27,11 +27,12 @@ const baseStyle = defineStyle((props) => {
                 top: `-${rem(1)}`,
                 bottom: `-${rem(1)}`,
                 width: rem(1),
-                backgroundColor: 'background/primary',
+                backgroundColor: 'border/on-contrast',
+                zIndex: 1,
               },
             }
           : {}),
-        ...(props.variant.includes('secondary') ? { marginInlineStart: `-${rem(1)}` } : {}),
+        marginInlineStart: `-${rem(1)}`,
       },
     },
   };
@@ -96,6 +97,7 @@ const variants = (
         backgroundColor: `button/${variant}/bg-hover`,
         borderColor: variant?.includes('secondary') ? `button/${variant}/border-hover` : `button/${variant}/bg-hover`,
         color: `button/${variant}/fg-hover`,
+        zIndex: 1,
       },
       _active: {
         backgroundColor: `button/${variant}/bg-active`,

package/src/Components/Dropdown/DropdownOption.tsx

@@ -3,7 +3,6 @@ import { chakra } from '@chakra-ui/react';
 import { cx } from '@chakra-ui/utils';
 import Text, { TextProps } from '../Text/Text';
 import Divider from '../Divider/Divider';
-import Tooltip from '../Tooltip/Tooltip';
 import { useDropdownContext, useDropdownStyles } from './Dropdown.context';
 
 export type DropdownOptionProps<T> = {
@@ -12,12 +11,10 @@ export type DropdownOptionProps<T> = {
   'aria-label'?: string;
   onClick?: MouseEventHandler<HTMLElement>;
   isDisabled?: boolean;
-  disabledText?: string;
 };
 const DropdownOption = <T = string,>({
   children,
   isDisabled,
-  disabledText,
   onClick,
   value = null,
   ...rest
@@ -55,9 +52,7 @@ const DropdownOption = <T = string,>({
             },
       )}
     >
-      <Tooltip label={disabledText} isDisabled={Boolean(!isDisabled && disabledText)}>
-        {children}
-      </Tooltip>
+      {children}
     </chakra.div>
   );
 };
@@ -90,7 +85,6 @@ type DropdownDetailedOptionProps<T> = DropdownOptionProps<T> & {
   icon: ReactNode;
   title: string;
   subtitle: string;
-  disabledText?: string;
 };
 
 const DropdownDetailedOption = <T = string,>({
@@ -98,7 +92,6 @@ const DropdownDetailedOption = <T = string,>({
   title,
   subtitle,
   isDisabled,
-  disabledText,
   ...rest
 }: DropdownDetailedOptionProps<T>) => {
   return (
@@ -106,9 +99,7 @@ const DropdownDetailedOption = <T = string,>({
       <chakra.div alignItems="center" display="flex" flexDir="row" gap="12">
         <chakra.div opacity={isDisabled ? '0.5' : '1'}>{icon}</chakra.div>
         <chakra.div>
-          <Tooltip label={disabledText} isDisabled={Boolean(!isDisabled && disabledText)}>
-            {title}
-          </Tooltip>
+          {title}
           <Text color={isDisabled ? 'text/disabled' : 'input/text/helper'} size="2">
             {subtitle}
           </Text>