@bitrise/bitkit 9.15.0-alpha-chakra.2 → 9.16.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bitrise/bitkit",
   "description": "Bitrise React component library",
-  "version": "9.15.0-alpha-chakra.2",
+  "version": "9.16.0",
   "repository": "git@github.com:bitrise-io/bitkit.git",
   "main": "src/index.ts",
   "license": "UNLICENSED",
@@ -38,11 +38,10 @@
     "@juggle/resize-observer": "^3.3.1",
     "@popperjs/core": "^2.11.5",
     "@types/react-transition-group": "^4.4.4",
-    "chakra-react-select": "3.3.3",
     "classnames": "^2.3.1",
     "clipboard": "^2.0.11",
     "framer-motion": "^6.3.3",
-    "luxon": "^2.4.0",
+    "luxon": "^2.3.2",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-popper": "^2.3.0",
@@ -78,19 +77,19 @@
     "@types/clipboard": "^2.0.1",
     "@types/enzyme": "^3.10.12",
     "@types/fscreen": "^1.0.1",
-    "@types/jest": "^27.5.1",
+    "@types/jest": "^27.5.0",
     "@types/lodash.sample": "^4.2.7",
     "@types/lodash.shuffle": "^4.2.7",
     "@types/luxon": "^2.3.2",
     "@types/prismjs": "^1.26.0",
-    "@types/react": "17.0.45",
-    "@types/react-dom": "^17.0.17",
+    "@types/react": "17.0.44",
+    "@types/react-dom": "^17.0.16",
     "@types/react-router": "^5.1.18",
     "@types/react-router-dom": "^5.3.3",
     "@types/react-transition-group": "^4.4.4",
     "@types/vfile-message": "^2.0.0",
-    "@typescript-eslint/eslint-plugin": "^5.23.0",
-    "@typescript-eslint/parser": "^5.23.0",
+    "@typescript-eslint/eslint-plugin": "^5.22.0",
+    "@typescript-eslint/parser": "^5.22.0",
     "@wojtekmaj/enzyme-adapter-react-17": "^0.6.7",
     "axios": "^0.27.2",
     "babel-eslint": "^10.0.1",
@@ -100,7 +99,7 @@
     "concurrently": "^7.1.0",
     "enzyme": "^3.11.0",
     "enzyme-to-json": "^3.6.2",
-    "eslint": "^8.15.0",
+    "eslint": "^8.14.0",
     "eslint-plugin-import": "^2.26.0",
     "eslint-plugin-jest": "^26.1.5",
     "eslint-plugin-jsx-a11y": "^6.5.1",
@@ -108,9 +107,9 @@
     "eslint-plugin-react": "^7.29.4",
     "eslint-plugin-react-hooks": "^4.5.0",
     "eslint-plugin-storybook": "^0.5.11",
-    "eslint-plugin-testing-library": "^5.5.0",
+    "eslint-plugin-testing-library": "^5.3.1",
     "fscreen": "^1.2.0",
-    "glob": "^8.0.2",
+    "glob": "^8.0.1",
     "husky": "^7.0.4",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^27.5.1",
@@ -132,7 +131,7 @@
     "ts-node": "^10.7.0",
     "tsconfig-paths-webpack-plugin": "^3.5.2",
     "typescript": "^4.6.4",
-    "webpack": "^5.72.1"
+    "webpack": "^5.72.0"
   },
   "files": [
     "src",

package/src/Components/Menu/Menu.theme.ts

@@ -3,7 +3,7 @@ import type { SystemStyleObject } from '@chakra-ui/theme-tools';
 const MenuTheme: SystemStyleObject = {
   baseStyle: {
     list: {
-      bg: 'neutral.100',
+      backgroundColor: 'neutral.100',
       border: '1px solid',
       borderColor: 'neutral.93',
       borderRadius: '4',
@@ -15,11 +15,11 @@ const MenuTheme: SystemStyleObject = {
       padding: '12',
       paddingRight: '16',
       _focus: {
-        bg: 'neutral.95',
+        backgroundColor: 'neutral.93',
         boxShadow: 'none',
       },
       _active: {
-        bg: 'neutral.93',
+        backgroundColor: 'neutral.90',
       },
     },
   },

package/src/Components/Text/Text.tsx

@@ -23,6 +23,7 @@ type TextTags =
   | 'h6'
   | 'kbd'
   | 'li'
+  | 'label'
   | 'mark'
   | 'p'
   | 'pre'
@@ -43,7 +44,6 @@ export interface TextProps extends ChakraTextProps {
    */
   as?: TextTags;
   className?: string;
-  color?: 'body' | 'secondary' | string;
   /**
    * Font weight
    */
@@ -53,22 +53,28 @@ export interface TextProps extends ChakraTextProps {
    */
   size?: TextSizes;
   textTransform?: 'capitalize' | 'lowercase' | 'none' | 'uppercase';
+  hasEllipsis?: boolean;
 }
 
 /**
  * `Text` component is the used to render text and paragraphs within an interface. It renders a `<p>` tag by default.
  */
 const Text = forwardRef<TextProps, 'p'>((props, ref) => {
-  const { color, fontWeight, size, textTransform } = props;
-  const properties: ChakraTextProps = { ...props };
+  const { fontWeight, size, textTransform, hasEllipsis, ...rest } = props;
+  const properties: ChakraTextProps = { fontWeight, size, textTransform, ...rest };
   if (size === '1' && (!textTransform || textTransform === 'none')) {
     properties.textTransform = 'uppercase';
   }
   if (!fontWeight && (size === '5' || size === '6' || size === '7' || size === '8')) {
     properties.fontWeight = 'bold';
   }
-  if (color) {
-    properties.color = `text.${color}`;
+  if (hasEllipsis) {
+    if (properties.maxWidth) {
+      properties.maxWidth = '100%';
+      properties.textOverflow = 'ellipsis';
+      properties.whiteSpace = 'nowrap';
+      properties.overflow = 'hidden';
+    }
   }
   return <ChakraText {...properties} ref={ref} />;
 });

package/src/Foundations/Typography/Typography.ts

@@ -17,6 +17,13 @@ const typography = {
     normal: 400,
     bold: 700,
   },
+  letterSpacings: {
+    '1': '0.00625rem',
+    '2': '0.009375rem',
+    '3': '0.0175rem',
+    '4': '0.0375rem',
+    '5': '0.05rem',
+  },
   lineHeights: {
     '1': '1rem',
     '2': '1.25rem',

package/src/index.ts

@@ -29,8 +29,11 @@ export { default as Card } from './Components/Card/Card';
 export type { CardContentProps } from './Components/Card/CardContent';
 export { default as CardContent } from './Components/Card/CardContent';
 
-export type { SelectProps } from './Components/Select/Select';
-export { default as Select } from './Components/Select/Select';
+export type { TextProps } from './Components/Text/Text';
+export { default as Text } from './Components/Text/Text';
 
-export type { DropdownProps } from './Components/Dropdown/Dropdown';
-export { default as Dropdown } from './Components/Dropdown/Dropdown';
+export type { BoxProps } from './Components/Box/Box';
+export { default as Box } from './Components/Box/Box';
+
+export type { ColorButtonProps } from './Components/ColorButton/ColorButton';
+export { default as ColorButton } from './Components/ColorButton/ColorButton';

package/src/old.ts

@@ -52,16 +52,14 @@ export { default as Bounds } from './Old/Bounds/Bounds';
 export type { Props as CheckboxProps } from './Old/Checkbox/Checkbox';
 export { default as Checkbox } from './Old/Checkbox/Checkbox';
 
-export type { Props as ColorButtonProps } from './Old/Button/ColorButton';
-export { default as ColorButton } from './Old/Button/ColorButton';
-
 export type { Props as DatePickerProps } from './Old/DatePicker/DatePicker';
 export { default as DatePicker } from './Old/DatePicker/DatePicker';
 
 export type { Props as DotProps } from './Old/Dot/Dot';
 export { default as Dot } from './Old/Dot/Dot';
 
-export type { Props as OldDropdownProps } from './Old/Dropdown/Dropdown';
+export type { Props as DropdownProps } from './Old/Dropdown/Dropdown';
+export { default as Dropdown } from './Old/Dropdown/Dropdown';
 
 export type { Props as DropdownButtonProps } from './Old/Dropdown/DropdownButton';
 export { default as DropdownButton } from './Old/Dropdown/DropdownButton';
@@ -167,9 +165,6 @@ export { default as ProgressBar } from './Old/Progress/ProgressBar';
 export type { Props as ProgressBitbotProps } from './Old/Progress/ProgressBitbot';
 export { default as ProgressBitbot } from './Old/Progress/ProgressBitbot';
 
-export type { Props as ProgressColorButtonProps } from './Old/Progress/ProgressColorButton';
-export { default as ProgressColorButton } from './Old/Progress/ProgressColorButton';
-
 export type { Props as ProgressSpinnerProps } from './Old/Progress/ProgressSpinner';
 export { default as ProgressSpinner } from './Old/Progress/ProgressSpinner';
 
@@ -237,12 +232,6 @@ export { default as Tab } from './Old/Tabs/Tab';
 export type { Props as TabsProps } from './Old/Tabs/Tabs';
 export { default as Tabs } from './Old/Tabs/Tabs';
 
-export type { Props as TextProps } from './Old/Text/Text';
-export type { TypeTextLetterSpacing } from './Old/Text/Text';
-export type { TypeTextSize } from './Old/Text/Text';
-export type { TypeTextWeight } from './Old/Text/Text';
-export { default as Text } from './Old/Text/Text';
-
 export type { Props as TextareaProps } from './Old/Textarea/Textarea';
 export { default as Textarea } from './Old/Textarea/Textarea';
 

package/src/theme.ts

@@ -4,7 +4,6 @@ import ColorButton from './Components/ColorButton/ColorButton.theme';
 import Divider from './Components/Divider/Divider.theme';
 import Link from './Components/Link/Link.theme';
 import Menu from './Components/Menu/Menu.theme';
-import Select from './Components/Select/Select.theme';
 import Text from './Components/Text/Text.theme';
 
 import colors from './Foundations/Colors/Colors';
@@ -53,7 +52,6 @@ const theme = {
     Divider,
     Link,
     Menu,
-    Select,
     Text,
   },
 };