@bitrise/bitkit 9.36.0-alpha-avatar.1 → 9.36.2

package/README.md

@@ -1,6 +1,8 @@
 # @bitrise/bitkit
 
 Library for React UI components and design patterns.
+
+Based on [Chakra UI](https://chakra-ui.com/).
 ___
 
 
@@ -14,46 +16,29 @@ yarn install
 
 ### Technology
 
+- [Chakra UI](https://chakra-ui.com/)
 - [Typescript](https://www.typescriptlang.org/)
-- [Parcel](https://parceljs.org/) (bundler and dev servers)
-- [React](https://reactjs.org/) (with [React Router](https://reacttraining.com/react-router/) for routing links)
-- [PostCSS](https://postcss.org/) (with [postcss-preset-env](https://preset-env.cssdb.org/) for a little power)
+- [React](https://reactjs.org/)
 - [Jest](https://jestjs.io/) (for unit testing)
 
-### Managing icons
-
-If you would like to add a new or edit an existing icon:
-1. Export the icon from [Figma](https://www.figma.com/file/grik9mTaJ5DfhydhWhXdP5/Bitkit-Foundations?node-id=213%3A82) as an SVG. Make sure that the exported file has the following viewBox: `0 0 24 24`, otherwise the icon can make smaller or bigger compared to the existing ones.
-2. Rename the file using this convention: `icons-{iconName}.svg` (eg.: `icons-crown.svg`)
-3. Add the file under the `./src/components/Icon/svg` folder.
-4. If you are not running `yarn start`, run the `yarn build:icons` script to generate the React component from the SVG. You should commit both the `.svg` and the generated `.tsx` files.
-5. Make sure to check the new/update icon on the Icons page.
 ### Scripts
 
-#### `$ yarn build`
-
-Builds the library and styleguide assets
+#### `$ yarn storybook`
 
-#### `$ yarn build:icons`
+Runs Storybook server
 
-Uses **[@svgr/cli](https://github.com/smooth-code/svgr)** to generate React components and Typescript definitions inside `./src/components/Icon/tsx` from the SVG files inside `./src/components/Icon/svg`.
-
-#### `$ yarn clean`
+#### `$ yarn start`
 
-Cleans up the build directories
+Runs `yarn storybook`
 
 #### `$ yarn lint`
 
 Runs Javascript linting
 
-#### `$ yarn serve`
-
-Serves up the static files built for the style guide
-
-#### `$ yarn start`
-
-Runs the developlement server for the style guide
-
 #### `$ yarn test`
 
 Runs the unit tests for the library components
+
+### Contributing
+
+Check [CONTRIBUTING.md](CONTRIBUTING.md)

package/package.json

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

package/src/Components/Avatar/Avatar.theme.ts

@@ -49,13 +49,13 @@ const getSize = (size: AvatarSizes) => {
 };
 
 const AvatarTheme: ComponentStyleConfig = {
-  baseStyle: ({ name, size }) => {
+  baseStyle: ({ name, size, src }) => {
     const str = name.toUpperCase();
     const seed = str.charCodeAt(0) + str.charCodeAt(str.length - 1);
 
     return {
       container: {
-        backgroundColor: BACKGROUND_COLORS[seed % BACKGROUND_COLORS.length],
+        backgroundColor: src ? 'transparent' : BACKGROUND_COLORS[seed % BACKGROUND_COLORS.length],
         color: 'neutral.100',
         ...getSize(size),
       },

package/src/Components/Dialog/Dialog.tsx

@@ -42,6 +42,7 @@ const Dialog = ({ children, dataTestid, scrollBehavior, state, size, title, ...r
       onClose={state.onClose}
       scrollBehavior={scrollBehavior}
       size={dialogSize}
+      trapFocus={!process.env.IS_STORYBOOK}
     >
       <ModalOverlay />
       <ModalContent data-testid={dataTestid} {...rest}>

package/src/Components/Popover/Popover.theme.ts

@@ -2,12 +2,13 @@ import type { SystemStyleObject } from '@chakra-ui/theme-tools';
 
 const PopoverTheme: SystemStyleObject = {
   baseStyle: {
+    popper: {
+      zIndex: 'popover',
+    },
     content: {
       backgroundColor: 'neutral.100',
       borderRadius: 8,
       boxShadow: 'large',
-      py: 24,
-      px: 32,
     },
   },
 };

package/src/Components/Popover/PopoverTrigger.tsx

@@ -1,6 +1,6 @@
 import { FC } from 'react';
 import { PopoverTrigger as ChakraPopoverTrigger } from '@chakra-ui/react';
 
-const PopoverTigger: FC = (props) => <ChakraPopoverTrigger {...props} />;
+const PopoverTrigger: FC = (props) => <ChakraPopoverTrigger {...props} />;
 
-export default PopoverTigger;
+export default PopoverTrigger;

package/src/Foundations/Zindex/Zindex.ts

@@ -7,6 +7,7 @@ const zIndices = {
   fullDialog: 1200,
   dialogOverlay: 1299,
   dialog: 1300,
+  popover: 1400,
 };
 
 export default zIndices;