@bitrise/bitkit 9.3.0-alpha.4 → 9.3.0

package/src/ButtonWithDropdown/ButtonWithDropdown.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import {
-    Button2,
+    Button,
+    ButtonProps,
     DropdownMenu,
     DropdownMenuItem,
     DropdownMenuItemProps,
@@ -11,7 +12,6 @@ import {
     PlacementReference,
     } from '@bitrise/bitkit';
 
-import { ButtonProps } from '@chakra-ui/react';
 export interface ItemProps extends DropdownMenuItemProps {
     component?: string;
     disabled?: boolean;
@@ -22,7 +22,7 @@ export interface ItemProps extends DropdownMenuItemProps {
 
 export interface Props {
     buttonProps?: ButtonProps;
-    children?: React.ReactNode | undefined;
+    children?: React.ReactElement | React.ReactNodeArray;
     dropdownWidth?: string;
     items: ItemProps[];
     placementProps?: PlacementProps;
@@ -41,16 +41,16 @@ const ButtonWithDropdown = ({
     <PlacementManager>
       <PlacementReference>
         { ({ ref }) => (
-          /* @ts-ignore */
-          <Button2 onClick={ () => setVisible(!visible) } ref={ ref } rightIcon={ <Icon name="ChevronDown" /> } { ...buttonProps }>
+          <Button innerRef={ ref } onClick={ () => setVisible(true) } { ...buttonProps }>
             { children }
-          </Button2>
+            <Icon name="ChevronDown" />
+          </Button>
         ) }
       </PlacementReference>
       { !buttonProps.disabled && (
         <Placement
             disableMargin="left-right"
-            // onClose={ () => setVisible(false) }
+            onClose={ () => setVisible(false) }
             placement="bottom-end"
             visible={ visible }
             { ...placementProps }>

package/src/Card/Card.css

@@ -1,7 +1,7 @@
 .Card {
-  border: 0.0625rem solid var(--bitkit-colors-gray-2);
+  border: 0.0625rem solid var(--color-gray--2);
   overflow: hidden;
 }
 
-.Card--direction-horizontal .Card__divider { border-right: 0.0625rem solid var(--bitkit-colors-gray-2); }
-.Card--direction-vertical .Card__divider { border-top: 0.0625rem solid var(--bitkit-colors-gray-2); }
+.Card--direction-horizontal .Card__divider { border-right: 0.0625rem solid var(--color-gray--2); }
+.Card--direction-vertical .Card__divider { border-top: 0.0625rem solid var(--color-gray--2); }

package/src/Checkbox/Checkbox.css

@@ -11,10 +11,10 @@
 .Checkbox__indicator {
   width: var(--Checkbox--size);
   height: var(--Checkbox--size);
-  border: 0.0625rem solid var(--bitkit-colors-gray-3);
+  border: 0.0625rem solid var(--color-gray--3);
   border-radius: var(--size--x1);
   box-shadow: inset 0 0.125rem 0.1875rem 0 rgba(0, 0, 0, 0.1);
-  background-color: var(--bitkit-colors-white);
+  background-color: var(--color-white);
   color: transparent;
   cursor: pointer;
   transition-property: border-color, box-shadow, background-color, color;
@@ -23,17 +23,17 @@
 }
 
 .Checkbox__input:disabled + .Checkbox__indicator {
-  background-color: var(--bitkit-colors-gray-2);
+  background-color: var(--color-gray--2);
   cursor: default;
 }
 
 .Checkbox__input:focus + .Checkbox__indicator {
-  border-color: var(--bitkit-colors-grape-3);
+  border-color: var(--color-grape--3);
   box-shadow: inset 0 0 0 0.125rem rgba(118, 15, 195, 0.3);
 }
 
 .Checkbox__input:checked + .Checkbox__indicator {
-  border-color: var(--bitkit-colors-grape-3);
-  background-color: var(--bitkit-colors-grape-3);
-  color: var(--bitkit-colors-white);
+  border-color: var(--color-grape--3);
+  background-color: var(--color-grape--3);
+  color: var(--color-white);
 }

package/src/DatePicker/DatePicker.css

@@ -1,5 +1,5 @@
 .DatePicker__grid + .DatePicker__grid {
-  border-top: 0.0625rem solid var(--bitkit-colors-gray-2);
+  border-top: 0.0625rem solid var(--color-gray--2);
 }
 
 .DatePicker__day {
@@ -20,7 +20,7 @@
     transform: scale(0);
     opacity: 0;
     border-radius: 50%;
-    background-color: var(--bitkit-colors-grape-4);
+    background-color: var(--color-grape--4);
     transition-property: transform, opacity, background-color;
     transition-duration: var(--transition-duration--fast);
     transition-timing-function: var(--transition-timing-function);
@@ -36,7 +36,7 @@
 }
 
 .DatePicker__day--selectable.DatePicker__day--unselected:hover {
-  color: var(--bitkit-colors-gray-1);
+  color: var(--color-gray--1);
 }
 
 .DatePicker__day--selected,
@@ -44,19 +44,19 @@
   &::before {
     transform: scale(calc(2.5 / 3));
     opacity: 1;
-    background-color: var(--bitkit-colors-grape-4);
+    background-color: var(--color-grape--4);
   }
 }
 
 .DatePicker__day--selected::before {
   transform: scale(1);
-  background-color: var(--bitkit-colors-aqua-3);
+  background-color: var(--color-aqua--3);
 }
 
 .DatePicker__day--selected-from,
 .DatePicker__day--selected-between,
 .DatePicker__day--selected-to {
-  background-color: var(--bitkit-colors-aqua-2);
+  background-color: var(--color-aqua--2);
 }
 
 .DatePicker__day--selected-from {
@@ -70,5 +70,5 @@
 }
 
 .DatePicker__day--unselectable {
-  color: var(--bitkit-colors-gray-5);
+  color: var(--color-gray--5);
 }

package/src/Dropdown/DropdownMenu.css

@@ -17,7 +17,7 @@
   flex: 1;
   /* stylelint-disable-next-line unit-blacklist */
   height: 1px;
-  background-color: var(--bitkit-colors-gray-3);
+  background-color: var(--color-gray--3);
 }
 
 .DropdownMenu__item {
@@ -38,11 +38,11 @@
 }
 
 .DropdownMenu__item[disabled] {
-  color: var(--bitkit-colors-gray-5);
+  color: var(--color-gray--5);
   pointer-events: none;
 }
 
 .DropdownMenu__item:hover {
-  background-color: var(--bitkit-colors-grape-1);
-  color: var(--bitkit-colors-grape-3);
+  background-color: var(--color-grape--1);
+  color: var(--color-grape--3);
 }

package/src/Dropdown/DropdownMenuItem.tsx

@@ -19,7 +19,7 @@ export interface Props extends FlexProps {
  * component.
  */
 const DropdownMenuItem: React.FunctionComponent<Props> = (props: Props) => {
-  const { children, icon, onClick, selected, ...rest } = props;
+  const { children, icon, onClick, selected, textColor, ...rest } = props;
   const classes = classnames('DropdownMenu__item', {
     'DropdownMenu__item--selected': selected,
   });
@@ -50,11 +50,11 @@ const DropdownMenuItem: React.FunctionComponent<Props> = (props: Props) => {
           initial="none">
         { icon && (
           <Flex>
-            <Icon name={ icon } />
+            <Icon name={ icon } textColor={ textColor } />
           </Flex>
         ) }
 
-        <Flex grow initial="none">
+        <Flex grow initial="none" textColor={ textColor }>
           { children }
         </Flex>
       </Flex>

package/src/Icon/tsx/{IconsEye.tsx → IconsShowPassword.tsx}

@@ -1,15 +1,18 @@
 // THIS IS AN AUTOGERENATED FILE. DO NOT EDIT IT. CHECK README ON HOW TO MANAGE ICONS INSTEAD.
 import * as React from 'react';
 
-const SvgIconsEye = (props: React.SVGProps<SVGSVGElement>) => (
+const SvgIconsShowPassword = (props: React.SVGProps<SVGSVGElement>) => (
   <svg { ...props } viewBox="0 0 24 24">
     <defs>
       <path
           d="M11.999 9a3.001 3.001 0 0 1 0 6 3 3 0 1 1 0-6zm5.467 6.535L21.002 12l-3.536-3.534a4.961 4.961 0 0 0-3.534-1.464H10.07a4.967 4.967 0 0 0-3.536 1.463L2.999 12l3.536 3.536A4.971 4.971 0 0 0 10.07 17h3.86a5.029 5.029 0 0 0 3.535-1.465zm4.949-4.949c.78.78.78 2.05 0 2.828L18.88 16.95A7.042 7.042 0 0 1 13.932 19H10.07a6.954 6.954 0 0 1-4.95-2.05l-3.535-3.536a2.001 2.001 0 0 1 0-2.828L5.12 7.05A6.95 6.95 0 0 1 10.07 5l3.862.001c1.868 0 3.626.727 4.947 2.05l3.535 3.535z"
-          id="icons-eye_svg__a"/>
+          id="icons-show-password_svg__a"/>
     </defs>
-    <use fill="currentColor" fillRule="evenodd" xlinkHref="#icons-eye_svg__a" />
+    <use
+        fill="currentColor"
+        fillRule="evenodd"
+        xlinkHref="#icons-show-password_svg__a"/>
   </svg>
 );
 
-export default SvgIconsEye;
+export default SvgIconsShowPassword;

package/src/Icon/tsx/index.ts

@@ -61,7 +61,6 @@ import Dudes from './IconsDudes';
 import Duplicate from './IconsDuplicate';
 import Enterprise from './IconsEnterprise';
 import ErrorGeneral from './IconsErrorGeneral';
-import Eye from './IconsEye';
 import FileDoc from './IconsFileDoc';
 import FilePdf from './IconsFilePdf';
 import FilePlist from './IconsFilePlist';
@@ -135,6 +134,7 @@ import Save from './IconsSave';
 import SecurityShield from './IconsSecurityShield';
 import Settings from './IconsSettings';
 import Ship from './IconsShip';
+import ShowPassword from './IconsShowPassword';
 import Shuffle from './IconsShuffle';
 import Stability from './IconsStability';
 import Stack from './IconsStack';
@@ -234,7 +234,6 @@ export type TypeIconName =
   | 'Duplicate'
   | 'Enterprise'
   | 'ErrorGeneral'
-  | 'Eye'
   | 'FileDoc'
   | 'FilePdf'
   | 'FilePlist'
@@ -308,6 +307,7 @@ export type TypeIconName =
   | 'SecurityShield'
   | 'Settings'
   | 'Ship'
+  | 'ShowPassword'
   | 'Shuffle'
   | 'Stability'
   | 'Stack'
@@ -407,7 +407,6 @@ export const IconList: TypeIconName[] = [
   'Duplicate',
   'Enterprise',
   'ErrorGeneral',
-  'Eye',
   'FileDoc',
   'FilePdf',
   'FilePlist',
@@ -481,6 +480,7 @@ export const IconList: TypeIconName[] = [
   'SecurityShield',
   'Settings',
   'Ship',
+  'ShowPassword',
   'Shuffle',
   'Stability',
   'Stack',
@@ -583,7 +583,6 @@ export const IconMap: {
   Duplicate,
   Enterprise,
   ErrorGeneral,
-  Eye,
   FileDoc,
   FilePdf,
   FilePlist,
@@ -657,6 +656,7 @@ export const IconMap: {
   SecurityShield,
   Settings,
   Ship,
+  ShowPassword,
   Shuffle,
   Stability,
   Stack,

package/src/Input/Input.css

@@ -13,14 +13,14 @@
   appearance: none;
 
   &:focus { outline: none; }
-  &::placeholder { color: var(--bitkit-colors-gray-7); }
+  &::placeholder { color: var(--color-gray--7); }
 }
 
 .Input__container {
-  border: var(--Input--border) solid var(--bitkit-colors-gray-3);
+  border: var(--Input--border) solid var(--color-gray--3);
   border-radius: var(--size--x1);
   box-shadow: inset 0 0.125rem 0.1875rem 0 rgba(0, 0, 0, 0.1);
-  background-color: var(--bitkit-colors-white);
+  background-color: var(--color-white);
   overflow: hidden;
   transition-property: border-color, box-shadow;
   transition-duration: var(--transition-duration--base);
@@ -29,8 +29,8 @@
 
 .Input__content {
   padding: 0 var(--size--x3);
-  border-right: var(--Input--border) solid var(--bitkit-colors-gray-3);
-  color: var(--bitkit-colors-grape-5);
+  border-right: var(--Input--border) solid var(--color-gray--3);
+  color: var(--color-grape--5);
   transition-property: border-color, color;
   transition-duration: var(--transition-duration--base);
   transition-timing-function: var(--transition-timing-function);
@@ -41,7 +41,7 @@
 }
 
 .Input__content--outside {
-  background-color: var(--bitkit-colors-white);
+  background-color: var(--color-white);
 
   &:first-child {
     border-top-left-radius: var(--size--x1);
@@ -57,14 +57,14 @@
 .Input__container--disabled,
 .Input__container--readonly {
   box-shadow: none;
-  background-color: var(--bitkit-colors-gray-2);
+  background-color: var(--color-gray--2);
 }
 
 .Input__container--invalid,
 .Input__container--invalid .Input__content,
 .Input__container--invalid .Input::placeholder {
-  border-color: var(--bitkit-colors-red-3);
-  color: var(--bitkit-colors-red-3);
+  border-color: var(--color-red--3);
+  color: var(--color-red--3);
 }
 
 .Input:focus:focus::placeholder,
@@ -73,11 +73,11 @@
 }
 
 .Input__container:focus-within {
-  border-color: var(--bitkit-colors-grape-3);
+  border-color: var(--color-grape--3);
   box-shadow: inset 0 0 0 0.125rem rgba(118, 15, 195, 0.3);
 
   & .Input__content {
-    border-color: var(--bitkit-colors-grape-3);
-    color: var(--bitkit-colors-grape-5);
+    border-color: var(--color-grape--3);
+    color: var(--color-grape--5);
   }
 }

package/src/Link/Link.css

@@ -9,32 +9,32 @@
   text-decoration: underline;
 }
 
-.Link--bitkit-colors-grape-3 {
-  color: var(--bitkit-colors-grape-3);
+.Link--color-grape-3 {
+  color: var(--color-grape--3);
 
-  &:hover { color: var(--bitkit-colors-grape-4); }
+  &:hover { color: var(--color-grape--4); }
 }
 
-.Link--bitkit-colors-grape-5 {
-  color: var(--bitkit-colors-grape-5);
+.Link--color-grape-5 {
+  color: var(--color-grape--5);
 
-  &:hover { color: var(--bitkit-colors-grape-3); }
+  &:hover { color: var(--color-grape--3); }
 }
 
-.Link--bitkit-colors-gray-1 {
-  color: var(--bitkit-colors-gray-1);
+.Link--color-gray-1 {
+  color: var(--color-gray--1);
 
-  &:hover { color: var(--bitkit-colors-gray-2); }
+  &:hover { color: var(--color-gray--2); }
 }
 
-.Link--bitkit-colors-gray-5 {
-  color: var(--bitkit-colors-gray-5);
+.Link--color-gray-5 {
+  color: var(--color-gray--5);
 
-  &:hover { color: var(--bitkit-colors-gray-6); }
+  &:hover { color: var(--color-gray--6); }
 }
 
-.Link--bitkit-colors-white {
-  color: var(--bitkit-colors-white);
+.Link--color-white {
+  color: var(--color-white);
 
-  &:hover { color: var(--bitkit-colors-gray-1); }
+  &:hover { color: var(--color-gray--1); }
 }

package/src/Link/Link.tsx

@@ -15,7 +15,7 @@ export interface Props extends BaseProps {
 /** Styled link component */
 const Link: React.FunctionComponent<Props> = (props: Props) => {
   const { className, color, underline, ...rest } = props;
-  const classes = classnames(className, 'Link', `Link--bitkit-colors-${color}`, {
+  const classes = classnames(className, 'Link', `Link--color-${color}`, {
     'Link--underline': underline,
   });
 

package/src/Modal/Modal.css

@@ -17,7 +17,7 @@
   right: 0;
   bottom: 0;
   left: 0;
-  background-color: var(--bitkit-colors-overlay--black);
+  background-color: var(--color-overlay--black);
   overflow: auto;
   z-index: var(--z-index-Modal);
   animation-name: ModalFadeOut;
@@ -64,5 +64,5 @@
 .ModalHeader--with-separator::before {
   content: '';
   height: var(--size--x1);
-  background: linear-gradient(90deg, var(--bitkit-colors-grape-1) -28.36%, var(--bitkit-colors-grape-2) 100%);
+  background: linear-gradient(90deg, var(--color-grape--1) -28.36%, var(--color-grape--2) 100%);
 }

package/src/Notification/Notification.css

@@ -4,31 +4,31 @@
 }
 
 .Notification--type-alert {
-  border-color: var(--bitkit-colors-red-3);
-  background-color: var(--bitkit-colors-red-1);
-  color: var(--bitkit-colors-red-4);
+  border-color: var(--color-red--3);
+  background-color: var(--color-red--1);
+  color: var(--color-red--4);
 }
 
 .Notification--type-inform {
-  border-color: var(--bitkit-colors-blue-2);
-  background-color: var(--bitkit-colors-blue-1);
-  color: var(--bitkit-colors-blue-4);
+  border-color: var(--color-blue--2);
+  background-color: var(--color-blue--1);
+  color: var(--color-blue--4);
 }
 
 .Notification--type-progress {
-  border-color: var(--bitkit-colors-grape-2);
-  background-color: var(--bitkit-colors-grape-1);
-  color: var(--bitkit-colors-eggplant);
+  border-color: var(--color-grape--2);
+  background-color: var(--color-grape--1);
+  color: var(--color-eggplant);
 }
 
 .Notification--type-success {
-  border-color: var(--bitkit-colors-green-2);
-  background-color: var(--bitkit-colors-green-1);
-  color: var(--bitkit-colors-green-5);
+  border-color: var(--color-green--2);
+  background-color: var(--color-green--1);
+  color: var(--color-green--5);
 }
 
 .Notification--type-warning {
-  border-color: var(--bitkit-colors-yellow-3);
-  background-color: var(--bitkit-colors-yellow-1);
-  color: var(--bitkit-colors-yellow-5);
+  border-color: var(--color-yellow--3);
+  background-color: var(--color-yellow--1);
+  color: var(--color-yellow--5);
 }

package/src/Placement/Placement.css

@@ -76,11 +76,11 @@
 }
 
 .Placement__area--horizontal .Placement__area:not(:last-child) {
-  border-right: 0.0625rem solid var(--bitkit-colors-gray-2);
+  border-right: 0.0625rem solid var(--color-gray--2);
 }
 
 .Placement__area--vertical .Placement__area:not(:last-child) {
-  border-top: 0.0625rem solid var(--bitkit-colors-gray-2);
+  border-top: 0.0625rem solid var(--color-gray--2);
 }
 
 .Placement__arrow {

package/src/RadioButton/RadioButton.css

@@ -11,10 +11,10 @@
 .RadioButton__indicator {
   width: var(--Checkbox--size);
   height: var(--Checkbox--size);
-  border: 0.0625rem solid var(--bitkit-colors-gray-3);
+  border: 0.0625rem solid var(--color-gray--3);
   border-radius: 50%;
   box-shadow: inset 0 0.125rem 0.1875rem 0 rgba(0, 0, 0, 0.1);
-  background-color: var(--bitkit-colors-white);
+  background-color: var(--color-white);
   cursor: pointer;
   transition-property: border-color, box-shadow, background-color, color;
   transition-duration: var(--transition-duration--base);
@@ -32,15 +32,15 @@
 }
 
 .RadioButton__input:disabled + .RadioButton__indicator {
-  background-color: var(--bitkit-colors-gray-2);
+  background-color: var(--color-gray--2);
   cursor: default;
 }
 
 .RadioButton__input:focus + .RadioButton__indicator {
-  border-color: var(--bitkit-colors-grape-3);
+  border-color: var(--color-grape--3);
   box-shadow: inset 0 0 0 0.125rem rgba(118, 15, 195, 0.3);
 }
 
 .RadioButton__input:checked + .RadioButton__indicator .RadioButton__circle {
-  background-color: var(--bitkit-colors-eggplant);
+  background-color: var(--color-eggplant);
 }

package/src/Ribbon/Ribbon.css

@@ -4,31 +4,31 @@
 }
 
 .Ribbon--type-alert {
-  border-color: var(--bitkit-colors-red-3);
-  background-color: var(--bitkit-colors-red-1);
-  color: var(--bitkit-colors-red-4);
+  border-color: var(--color-red--3);
+  background-color: var(--color-red--1);
+  color: var(--color-red--4);
 }
 
 .Ribbon--type-inform {
-  border-color: var(--bitkit-colors-blue-2);
-  background-color: var(--bitkit-colors-blue-1);
-  color: var(--bitkit-colors-blue-4);
+  border-color: var(--color-blue--2);
+  background-color: var(--color-blue--1);
+  color: var(--color-blue--4);
 }
 
 .Ribbon--type-progress {
-  border-color: var(--bitkit-colors-grape-2);
-  background-color: var(--bitkit-colors-grape-1);
-  color: var(--bitkit-colors-eggplant);
+  border-color: var(--color-grape--2);
+  background-color: var(--color-grape--1);
+  color: var(--color-eggplant);
 }
 
 .Ribbon--type-success {
-  border-color: var(--bitkit-colors-green-2);
-  background-color: var(--bitkit-colors-green-1);
-  color: var(--bitkit-colors-green-5);
+  border-color: var(--color-green--2);
+  background-color: var(--color-green--1);
+  color: var(--color-green--5);
 }
 
 .Ribbon--type-warning {
-  border-color: var(--bitkit-colors-yellow-3);
-  background-color: var(--bitkit-colors-yellow-1);
-  color: var(--bitkit-colors-yellow-5);
+  border-color: var(--color-yellow--3);
+  background-color: var(--color-yellow--1);
+  color: var(--color-yellow--5);
 }

package/src/Sidebar/Sidebar.css

@@ -29,7 +29,7 @@
     width: var(--size--x1);
     opacity: 0;
     border-radius: 0 var(--size--x1) var(--size--x1) 0;
-    background-color: var(--bitkit-colors-aqua-3);
+    background-color: var(--color-aqua--3);
     transition-property: opacity;
     transition-duration: var(--transition-duration--slow);
     transition-timing-function: var(--transition-timing-function);
@@ -79,16 +79,16 @@
 }
 
 .Sidebar--theme-dark {
-  background-color: var(--bitkit-colors-grape-5);
-  color: var(--bitkit-colors-gray-1);
+  background-color: var(--color-grape--5);
+  color: var(--color-gray--1);
 
   & .Sidebar__header,
   & .Sidebar__menu {
-    border-bottom-color: var(--bitkit-colors-grape-4);
+    border-bottom-color: var(--color-grape--4);
   }
 
   & .Sidebar__menu:first-child {
-    border-top-color: var(--bitkit-colors-grape-4);
+    border-top-color: var(--color-grape--4);
   }
 
   & .Sidebar__sub-menu-item,
@@ -98,7 +98,7 @@
   }
 
   & .Sidebar__sub-menu-item {
-    border-top-color: var(--bitkit-colors-grape-5);
+    border-top-color: var(--color-grape--5);
   }
 
   & .Sidebar__sub-menu-item--active,
@@ -108,30 +108,30 @@
 }
 
 .Sidebar--theme-light {
-  background-color: var(--bitkit-colors-white);
-  color: var(--bitkit-colors-grape-5);
+  background-color: var(--color-white);
+  color: var(--color-grape-5);
 
   & .Sidebar__header,
   & .Sidebar__menu {
-    border-bottom-color: var(--bitkit-colors-gray-2);
+    border-bottom-color: var(--color-gray--2);
   }
 
   & .Sidebar__menu:first-child {
-    border-top-color: var(--bitkit-colors-gray-2);
+    border-top-color: var(--color-gray--2);
   }
 
   & .Sidebar__sub-menu-item,
   & .Sidebar__menu-item--active .Sidebar__menu-item-link::before,
   & .Sidebar__menu-item:hover .Sidebar__menu-item-link::before {
-    background-color: var(--bitkit-colors-gray-1);
+    background-color: var(--color-gray--1);
   }
 
   & .Sidebar__sub-menu-item {
-    border-top-color: var(--bitkit-colors-gray-2);
+    border-top-color: var(--color-gray--2);
   }
 
   & .Sidebar__sub-menu-item--active,
   & .Sidebar__sub-menu-item:hover {
-    background-color: var(--bitkit-colors-gray-2);
+    background-color: var(--color-gray--2);
   }
 }