@bitrise/bitkit 9.2.0 → 9.3.0-alpha.2

package/src/Button/ColorButton.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 import classnames from 'classnames';
 import Flex, { Props as FlexProps } from '../Flex/Flex';
 import './ColorButton.css';
+import ButtonSize from './ButtonSize';
 
 export interface Props extends FlexProps {
   /** Color of the button */
@@ -11,7 +12,7 @@ export interface Props extends FlexProps {
    * into smaller spaces, while large will help the button stand
    * out on a page with lots of space.
    */
-  size: 'small' | 'medium' | 'large';
+  size?: ButtonSize;
 }
 
 /**
@@ -25,7 +26,7 @@ const ColorButton: React.FunctionComponent<Props> = (props: Props) => {
   } = props;
 
   const classes = classnames('ColorButton',
-    `ColorButton--color-${color}`,
+    `ColorButton--bitkit-colors-${color}`,
     `ColorButton--size-${size}`);
 
   return (

package/src/Button/__snapshots__/ColorButton.test.tsx.snap

@@ -4,7 +4,7 @@ exports[`ColorButton default template 1`] = `
 <Flex
   Component="button"
   alignChildren="middle"
-  className="ColorButton ColorButton--color-blue ColorButton--size-small"
+  className="ColorButton ColorButton--bitkit-colors-blue ColorButton--size-small"
   direction="horizontal"
   gap="x1"
 >

package/src/Button2/Button2.tsx

@@ -0,0 +1,31 @@
+/* eslint-disable object-shorthand */
+import * as React from 'react';
+import { Button as ChakraButton, ButtonProps } from '@chakra-ui/react';
+
+interface Props extends Pick<ButtonProps, 'as' | 'disabled' | 'leftIcon' | 'rightIcon' |'sx'> {
+    children: ButtonProps['children'];
+    href?: string;
+    /**
+     * Allows the Button to fill the container space rather than shrinking
+     * down to the content
+     */
+    variant?: 'primary' | 'secondary' | 'tertiary' | 'dangerPrimary' | 'dangerSecondary';
+    /**
+     * Sets the size of the Button. Small allows the Button to fit
+     * into smaller spaces, while large will help the button stand
+     * out on a page with lots of space.
+     */
+    size?: 'small' | 'medium';
+    target?: '_blank' | '_parent' | '_self' | '_top';
+}
+
+const Button2 = (props: Props) => {
+  const defaults = {
+    size: 'medium',
+    variant: 'primary',
+  };
+  const iconSpacing = props.size === 'medium' ? '10px' : '6px';
+  return <ChakraButton iconSpacing={ iconSpacing } { ...defaults } { ...props } />;
+};
+
+export default Button2;

package/src/Card/Card.css

@@ -1,7 +1,7 @@
 .Card {
-  border: 0.0625rem solid var(--color-gray--2);
+  border: 0.0625rem solid var(--bitkit-colors-gray-2);
   overflow: hidden;
 }
 
-.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); }
+.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); }

package/src/Checkbox/Checkbox.css

@@ -11,10 +11,10 @@
 .Checkbox__indicator {
   width: var(--Checkbox--size);
   height: var(--Checkbox--size);
-  border: 0.0625rem solid var(--color-gray--3);
+  border: 0.0625rem solid var(--bitkit-colors-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(--color-white);
+  background-color: var(--bitkit-colors-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(--color-gray--2);
+  background-color: var(--bitkit-colors-gray-2);
   cursor: default;
 }
 
 .Checkbox__input:focus + .Checkbox__indicator {
-  border-color: var(--color-grape--3);
+  border-color: var(--bitkit-colors-grape-3);
   box-shadow: inset 0 0 0 0.125rem rgba(118, 15, 195, 0.3);
 }
 
 .Checkbox__input:checked + .Checkbox__indicator {
-  border-color: var(--color-grape--3);
-  background-color: var(--color-grape--3);
-  color: var(--color-white);
+  border-color: var(--bitkit-colors-grape-3);
+  background-color: var(--bitkit-colors-grape-3);
+  color: var(--bitkit-colors-white);
 }

package/src/DatePicker/DatePicker.css

@@ -1,5 +1,5 @@
 .DatePicker__grid + .DatePicker__grid {
-  border-top: 0.0625rem solid var(--color-gray--2);
+  border-top: 0.0625rem solid var(--bitkit-colors-gray-2);
 }
 
 .DatePicker__day {
@@ -20,7 +20,7 @@
     transform: scale(0);
     opacity: 0;
     border-radius: 50%;
-    background-color: var(--color-grape--4);
+    background-color: var(--bitkit-colors-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(--color-gray--1);
+  color: var(--bitkit-colors-gray-1);
 }
 
 .DatePicker__day--selected,
@@ -44,19 +44,19 @@
   &::before {
     transform: scale(calc(2.5 / 3));
     opacity: 1;
-    background-color: var(--color-grape--4);
+    background-color: var(--bitkit-colors-grape-4);
   }
 }
 
 .DatePicker__day--selected::before {
   transform: scale(1);
-  background-color: var(--color-aqua--3);
+  background-color: var(--bitkit-colors-aqua-3);
 }
 
 .DatePicker__day--selected-from,
 .DatePicker__day--selected-between,
 .DatePicker__day--selected-to {
-  background-color: var(--color-aqua--2);
+  background-color: var(--bitkit-colors-aqua-2);
 }
 
 .DatePicker__day--selected-from {
@@ -70,5 +70,5 @@
 }
 
 .DatePicker__day--unselectable {
-  color: var(--color-gray--5);
+  color: var(--bitkit-colors-gray-5);
 }

package/src/Dropdown/DropdownMenu.css

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

package/src/Input/Input.css

@@ -13,14 +13,14 @@
   appearance: none;
 
   &:focus { outline: none; }
-  &::placeholder { color: var(--color-gray--7); }
+  &::placeholder { color: var(--bitkit-colors-gray-7); }
 }
 
 .Input__container {
-  border: var(--Input--border) solid var(--color-gray--3);
+  border: var(--Input--border) solid var(--bitkit-colors-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(--color-white);
+  background-color: var(--bitkit-colors-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(--color-gray--3);
-  color: var(--color-grape--5);
+  border-right: var(--Input--border) solid var(--bitkit-colors-gray-3);
+  color: var(--bitkit-colors-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(--color-white);
+  background-color: var(--bitkit-colors-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(--color-gray--2);
+  background-color: var(--bitkit-colors-gray-2);
 }
 
 .Input__container--invalid,
 .Input__container--invalid .Input__content,
 .Input__container--invalid .Input::placeholder {
-  border-color: var(--color-red--3);
-  color: var(--color-red--3);
+  border-color: var(--bitkit-colors-red-3);
+  color: var(--bitkit-colors-red-3);
 }
 
 .Input:focus:focus::placeholder,
@@ -73,11 +73,11 @@
 }
 
 .Input__container:focus-within {
-  border-color: var(--color-grape--3);
+  border-color: var(--bitkit-colors-grape-3);
   box-shadow: inset 0 0 0 0.125rem rgba(118, 15, 195, 0.3);
 
   & .Input__content {
-    border-color: var(--color-grape--3);
-    color: var(--color-grape--5);
+    border-color: var(--bitkit-colors-grape-3);
+    color: var(--bitkit-colors-grape-5);
   }
 }

package/src/Link/Link.css

@@ -9,32 +9,32 @@
   text-decoration: underline;
 }
 
-.Link--color-grape-3 {
-  color: var(--color-grape--3);
+.Link--bitkit-colors-grape-3 {
+  color: var(--bitkit-colors-grape-3);
 
-  &:hover { color: var(--color-grape--4); }
+  &:hover { color: var(--bitkit-colors-grape-4); }
 }
 
-.Link--color-grape-5 {
-  color: var(--color-grape--5);
+.Link--bitkit-colors-grape-5 {
+  color: var(--bitkit-colors-grape-5);
 
-  &:hover { color: var(--color-grape--3); }
+  &:hover { color: var(--bitkit-colors-grape-3); }
 }
 
-.Link--color-gray-1 {
-  color: var(--color-gray--1);
+.Link--bitkit-colors-gray-1 {
+  color: var(--bitkit-colors-gray-1);
 
-  &:hover { color: var(--color-gray--2); }
+  &:hover { color: var(--bitkit-colors-gray-2); }
 }
 
-.Link--color-gray-5 {
-  color: var(--color-gray--5);
+.Link--bitkit-colors-gray-5 {
+  color: var(--bitkit-colors-gray-5);
 
-  &:hover { color: var(--color-gray--6); }
+  &:hover { color: var(--bitkit-colors-gray-6); }
 }
 
-.Link--color-white {
-  color: var(--color-white);
+.Link--bitkit-colors-white {
+  color: var(--bitkit-colors-white);
 
-  &:hover { color: var(--color-gray--1); }
+  &:hover { color: var(--bitkit-colors-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--color-${color}`, {
+  const classes = classnames(className, 'Link', `Link--bitkit-colors-${color}`, {
     'Link--underline': underline,
   });
 

package/src/Modal/Modal.css

@@ -17,7 +17,7 @@
   right: 0;
   bottom: 0;
   left: 0;
-  background-color: var(--color-overlay--black);
+  background-color: var(--bitkit-colors-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(--color-grape--1) -28.36%, var(--color-grape--2) 100%);
+  background: linear-gradient(90deg, var(--bitkit-colors-grape-1) -28.36%, var(--bitkit-colors-grape-2) 100%);
 }

package/src/Notification/Notification.css

@@ -4,31 +4,31 @@
 }
 
 .Notification--type-alert {
-  border-color: var(--color-red--3);
-  background-color: var(--color-red--1);
-  color: var(--color-red--4);
+  border-color: var(--bitkit-colors-red-3);
+  background-color: var(--bitkit-colors-red-1);
+  color: var(--bitkit-colors-red-4);
 }
 
 .Notification--type-inform {
-  border-color: var(--color-blue--2);
-  background-color: var(--color-blue--1);
-  color: var(--color-blue--4);
+  border-color: var(--bitkit-colors-blue-2);
+  background-color: var(--bitkit-colors-blue-1);
+  color: var(--bitkit-colors-blue-4);
 }
 
 .Notification--type-progress {
-  border-color: var(--color-grape--2);
-  background-color: var(--color-grape--1);
-  color: var(--color-eggplant);
+  border-color: var(--bitkit-colors-grape-2);
+  background-color: var(--bitkit-colors-grape-1);
+  color: var(--bitkit-colors-eggplant);
 }
 
 .Notification--type-success {
-  border-color: var(--color-green--2);
-  background-color: var(--color-green--1);
-  color: var(--color-green--5);
+  border-color: var(--bitkit-colors-green-2);
+  background-color: var(--bitkit-colors-green-1);
+  color: var(--bitkit-colors-green-5);
 }
 
 .Notification--type-warning {
-  border-color: var(--color-yellow--3);
-  background-color: var(--color-yellow--1);
-  color: var(--color-yellow--5);
+  border-color: var(--bitkit-colors-yellow-3);
+  background-color: var(--bitkit-colors-yellow-1);
+  color: var(--bitkit-colors-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(--color-gray--2);
+  border-right: 0.0625rem solid var(--bitkit-colors-gray-2);
 }
 
 .Placement__area--vertical .Placement__area:not(:last-child) {
-  border-top: 0.0625rem solid var(--color-gray--2);
+  border-top: 0.0625rem solid var(--bitkit-colors-gray-2);
 }
 
 .Placement__arrow {

package/src/Progress/ProgressButton.tsx

@@ -10,11 +10,11 @@ export interface Props extends ButtonProps, ProgressButtonContentProps { }
  * something is happening.
  */
 const ProgressButton: React.FunctionComponent<Props> = (props: Props) => {
-  const { children, progressing, ...rest } = props;
+  const { children, progressing, size, ...rest } = props;
 
   return (
-    <Button { ...rest }>
-      <ProgressButtonContent progressing={ progressing }>
+    <Button size={ size } { ...rest }>
+      <ProgressButtonContent progressing={ progressing } size={ size }>
         { children }
       </ProgressButtonContent>
     </Button>

package/src/Progress/ProgressButtonContent.tsx

@@ -2,10 +2,12 @@ import * as React from 'react';
 import Base from '../Base/Base';
 import ProgressSpinner from './ProgressSpinner';
 import Visibility from '../Visibility/Visibility';
+import ButtonSize from '../Button/ButtonSize';
 
 export interface Props {
   progressing: boolean;
   children: React.ReactNode;
+  size?: ButtonSize;
 }
 
 /**
@@ -14,11 +16,16 @@ export interface Props {
  * something is happening.
  */
 const ProgressButtonContent: React.FunctionComponent<Props> = (props: Props) => {
-  const { children, progressing } = props;
+  const { children, progressing, size } = props;
+  const gap = size === 'small' ? 'x1' : 'x2';
 
   return (
     <Base container>
-      <Visibility visible={ !progressing }>
+      <Visibility
+          alignChildren="middle"
+          direction="horizontal"
+          gap={ gap }
+          visible={ !progressing }>
         { children }
       </Visibility>
 

package/src/RadioButton/RadioButton.css

@@ -11,10 +11,10 @@
 .RadioButton__indicator {
   width: var(--Checkbox--size);
   height: var(--Checkbox--size);
-  border: 0.0625rem solid var(--color-gray--3);
+  border: 0.0625rem solid var(--bitkit-colors-gray-3);
   border-radius: 50%;
   box-shadow: inset 0 0.125rem 0.1875rem 0 rgba(0, 0, 0, 0.1);
-  background-color: var(--color-white);
+  background-color: var(--bitkit-colors-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(--color-gray--2);
+  background-color: var(--bitkit-colors-gray-2);
   cursor: default;
 }
 
 .RadioButton__input:focus + .RadioButton__indicator {
-  border-color: var(--color-grape--3);
+  border-color: var(--bitkit-colors-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(--color-eggplant);
+  background-color: var(--bitkit-colors-eggplant);
 }

package/src/Ribbon/Ribbon.css

@@ -4,31 +4,31 @@
 }
 
 .Ribbon--type-alert {
-  border-color: var(--color-red--3);
-  background-color: var(--color-red--1);
-  color: var(--color-red--4);
+  border-color: var(--bitkit-colors-red-3);
+  background-color: var(--bitkit-colors-red-1);
+  color: var(--bitkit-colors-red-4);
 }
 
 .Ribbon--type-inform {
-  border-color: var(--color-blue--2);
-  background-color: var(--color-blue--1);
-  color: var(--color-blue--4);
+  border-color: var(--bitkit-colors-blue-2);
+  background-color: var(--bitkit-colors-blue-1);
+  color: var(--bitkit-colors-blue-4);
 }
 
 .Ribbon--type-progress {
-  border-color: var(--color-grape--2);
-  background-color: var(--color-grape--1);
-  color: var(--color-eggplant);
+  border-color: var(--bitkit-colors-grape-2);
+  background-color: var(--bitkit-colors-grape-1);
+  color: var(--bitkit-colors-eggplant);
 }
 
 .Ribbon--type-success {
-  border-color: var(--color-green--2);
-  background-color: var(--color-green--1);
-  color: var(--color-green--5);
+  border-color: var(--bitkit-colors-green-2);
+  background-color: var(--bitkit-colors-green-1);
+  color: var(--bitkit-colors-green-5);
 }
 
 .Ribbon--type-warning {
-  border-color: var(--color-yellow--3);
-  background-color: var(--color-yellow--1);
-  color: var(--color-yellow--5);
+  border-color: var(--bitkit-colors-yellow-3);
+  background-color: var(--bitkit-colors-yellow-1);
+  color: var(--bitkit-colors-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(--color-aqua--3);
+    background-color: var(--bitkit-colors-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(--color-grape--5);
-  color: var(--color-gray--1);
+  background-color: var(--bitkit-colors-grape-5);
+  color: var(--bitkit-colors-gray-1);
 
   & .Sidebar__header,
   & .Sidebar__menu {
-    border-bottom-color: var(--color-grape--4);
+    border-bottom-color: var(--bitkit-colors-grape-4);
   }
 
   & .Sidebar__menu:first-child {
-    border-top-color: var(--color-grape--4);
+    border-top-color: var(--bitkit-colors-grape-4);
   }
 
   & .Sidebar__sub-menu-item,
@@ -98,7 +98,7 @@
   }
 
   & .Sidebar__sub-menu-item {
-    border-top-color: var(--color-grape--5);
+    border-top-color: var(--bitkit-colors-grape-5);
   }
 
   & .Sidebar__sub-menu-item--active,
@@ -108,30 +108,30 @@
 }
 
 .Sidebar--theme-light {
-  background-color: var(--color-white);
-  color: var(--color-grape-5);
+  background-color: var(--bitkit-colors-white);
+  color: var(--bitkit-colors-grape-5);
 
   & .Sidebar__header,
   & .Sidebar__menu {
-    border-bottom-color: var(--color-gray--2);
+    border-bottom-color: var(--bitkit-colors-gray-2);
   }
 
   & .Sidebar__menu:first-child {
-    border-top-color: var(--color-gray--2);
+    border-top-color: var(--bitkit-colors-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(--color-gray--1);
+    background-color: var(--bitkit-colors-gray-1);
   }
 
   & .Sidebar__sub-menu-item {
-    border-top-color: var(--color-gray--2);
+    border-top-color: var(--bitkit-colors-gray-2);
   }
 
   & .Sidebar__sub-menu-item--active,
   & .Sidebar__sub-menu-item:hover {
-    background-color: var(--color-gray--2);
+    background-color: var(--bitkit-colors-gray-2);
   }
 }

package/src/Skeleton/Skeleton.css

@@ -16,11 +16,11 @@
     background:
       linear-gradient(
         to left,
-        rgba(var(--Skeleton--color), 0),
-        rgba(var(--Skeleton--color), 0.63) 35%,
-        rgba(var(--Skeleton--color), 1) 48%,
-        rgba(var(--Skeleton--color), 0.57) 55%,
-        rgba(var(--Skeleton--color), 0)
+        rgba(var(--Skeleton--bitkit-colors), 0),
+        rgba(var(--Skeleton--bitkit-colors), 0.63) 35%,
+        rgba(var(--Skeleton--bitkit-colors), 1) 48%,
+        rgba(var(--Skeleton--bitkit-colors), 0.57) 55%,
+        rgba(var(--Skeleton--bitkit-colors), 0)
       );
     pointer-events: none;
   }

package/src/Skeleton/Skeleton.tsx

@@ -26,7 +26,7 @@ const Skeleton: React.FunctionComponent<Props> = (props: Props) => {
   return (
     <Base { ...rest }
         className={ classes }
-        style={ { '--Skeleton--color': rgb.toString() } } />
+        style={ { '--Skeleton--bitkit-colors': rgb.toString() } } />
   );
 };