@bitrise/bitkit 9.7.0 → 9.7.1

package/README.md

@@ -44,7 +44,7 @@ Cleans up the build directories
 
 #### `$ yarn lint`
 
-Runs Javascript and CSS linting
+Runs Javascript linting
 
 #### `$ yarn serve`
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bitrise/bitkit",
   "description": "Bitrise React component library",
-  "version": "9.7.0",
+  "version": "9.7.1",
   "repository": "git@github.com:bitrise-io/bitkit.git",
   "main": "src/index.ts",
   "license": "UNLICENSED",
@@ -40,7 +40,7 @@
     "@types/react-transition-group": "^4.4.4",
     "classnames": "^2.3.1",
     "clipboard": "^2.0.10",
-    "framer-motion": "^6.3.1",
+    "framer-motion": "^6.3.2",
     "luxon": "^2.3.2",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
@@ -81,15 +81,15 @@
     "@types/luxon": "^2.3.1",
     "@types/prismjs": "^1.26.0",
     "@types/react": "17.0.44",
-    "@types/react-dom": "^17.0.15",
+    "@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.20.0",
-    "@typescript-eslint/parser": "^5.20.0",
+    "@typescript-eslint/eslint-plugin": "^5.21.0",
+    "@typescript-eslint/parser": "^5.21.0",
     "@wojtekmaj/enzyme-adapter-react-17": "^0.6.7",
-    "axios": "^0.26.1",
+    "axios": "^0.27.1",
     "babel-eslint": "^10.0.1",
     "babel-loader": "^8.2.5",
     "babel-plugin-polyfill-corejs2": "^0.3.1",

package/src/Old/Button/Button.tsx

@@ -33,10 +33,10 @@ export interface Props extends FlexProps {
 
 /** Standard Button component */
 const Button: React.FunctionComponent<Props> = (props: Props) => {
-  const { borderless, fullWidth, level, size, variant, ...rest } = props;
+  const { borderless, className, fullWidth, level, size, variant, ...rest } = props;
 
   const gap = size === 'small' ? 'x1' : 'x2';
-  const classes = classnames('Button', `Button--level-${level}`, `Button--size-${size}`, {
+  const classes = classnames(className, 'Button', `Button--level-${level}`, `Button--size-${size}`, {
     'Button--borderless': borderless,
     'Button--full-width': fullWidth,
     [`Button--variant-${variant}`]: variant,

package/src/Old/Dropdown/Dropdown.tsx

@@ -30,6 +30,7 @@ export interface Props extends DropdownButtonProps {
   /** Selected value from the options */
   selected?: DropdownValue;
   maxHeight?: string;
+  menuClassName?: string;
 }
 
 /**
@@ -38,7 +39,7 @@ export interface Props extends DropdownButtonProps {
  * and custom should be done with Placement.
  */
 const Dropdown: React.FunctionComponent<Props> = (props: Props) => {
-  const { children, options, onChange, selected, maxHeight, ...rest } = props;
+  const { children, options, onChange, selected, maxHeight, menuClassName, ...rest } = props;
   const [visible, setVisible] = useState(false);
 
   const handleChange = (value: DropdownValue) => {
@@ -73,7 +74,7 @@ const Dropdown: React.FunctionComponent<Props> = (props: Props) => {
 
       <Placement onClose={() => setVisible(false)} sameWidth visible={visible}>
         {() => (
-          <DropdownMenu maxHeight={maxHeight} width="100%">
+          <DropdownMenu className={menuClassName} maxHeight={maxHeight} width="100%">
             {options.map((option) => (
               <React.Fragment key={option.text}>
                 {'options' in option ? (

package/src/Old/Dropdown/DropdownMenu.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import classNames from 'classnames';
 import { Props as BaseProps } from '../Base/Base';
 import Flex from '../Flex/Flex';
 import PlacementArea from '../Placement/PlacementArea';
@@ -15,11 +16,13 @@ export interface Props extends BaseProps {
  * Parent container for DropdownMenuItems
  */
 const DropdownMenu: React.FunctionComponent<Props> = (props: Props) => {
-  const { children, maxHeight, width, ...rest } = props;
+  const { className, children, maxHeight, width, ...rest } = props;
+
+  const classes = classNames(className, 'DropdownMenu__content');
 
   return (
     <PlacementArea {...rest} direction="vertical" paddingVertical="x4">
-      <Flex className="DropdownMenu__content" direction="vertical" maxHeight={maxHeight} width={width}>
+      <Flex className={classes} direction="vertical" maxHeight={maxHeight} width={width}>
         {children}
       </Flex>
     </PlacementArea>