@bitrise/bitkit 9.3.0-alpha.4 → 9.4.0

package/src/Textarea/Textarea.css

@@ -2,11 +2,11 @@
   display: block;
   width: 100%;
   min-width: 0;
-  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);
-  color: var(--bitkit-colors-grape-5);
+  background-color: var(--color-white);
+  color: var(--color-grape--5);
   line-height: inherit;
   resize: none;
   transition-property: background-color, border-color, box-shadow;
@@ -14,23 +14,23 @@
   transition-timing-function: var(--transition-timing-function);
   appearance: none;
 
-  &::placeholder { color: var(--bitkit-colors-gray-7); }
-  &:disabled { background-color: var(--bitkit-colors-gray-2); }
+  &::placeholder { color: var(--color-gray--7); }
+  &:disabled { background-color: var(--color-gray--2); }
 }
 
 .TextArea--invalid {
-  border-color: var(--bitkit-colors-red-3);
-  color: var(--bitkit-colors-red-3);
+  border-color: var(--color-red--3);
+  color: var(--color-red--3);
 
-  &::placeholder { color: var(--bitkit-colors-red-3); }
+  &::placeholder { color: var(--color-red--3); }
 }
 
 .TextArea:focus,
 .TextArea--invalid:focus {
   outline: none;
-  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);
-  color: var(--bitkit-colors-grape-5);
+  color: var(--color-grape--5);
 
   &::placeholder {
     color: transparent;

package/src/Textarea/Textarea.tsx

@@ -17,12 +17,7 @@ const Textarea: React.FunctionComponent<Props> = (props: Props) => {
     'TextArea--invalid': invalid,
   });
 
-  return (
-    <Flex { ...rest }
-        Component="textarea"
-        className={ classes }
-        padding="x4" />
-  );
+  return <Flex {...rest} Component="textarea" className={classes} padding="x4" />;
 };
 
 export default Textarea;

package/src/Toggle/Toggle.css

@@ -3,11 +3,18 @@
   --Toggle--border: 0.125rem;
 }
 
+.Toggle__container--disabled {
+  cursor: not-allowed;
+}
+
 .Toggle {
   display: block;
   position: relative;
   width: calc(var(--Toggle--size) * 2);
   height: var(--Toggle--size);
+}
+
+.Toggle__container:not(.Toggle__container--disabled) .Toggle {
   cursor: pointer;
 }
 
@@ -25,8 +32,8 @@
   left: 0;
   padding: 0 var(--Toggle--border);
   border-radius: var(--Toggle--size);
-  background-color: var(--bitkit-colors-gray-6);
-  color: var(--bitkit-colors-white);
+  background-color: var(--color-gray--6);
+  color: var(--color-white);
   transition-property: background-color;
   transition-duration: var(--transition-duration--fast);
   transition-timing-function: var(--transition-timing-function);
@@ -40,7 +47,7 @@
   height: calc(var(--Toggle--size) - (var(--Toggle--border) * 2));
   transform: translate(0, -50%);
   border-radius: 50%;
-  background-image: linear-gradient(to top, var(--bitkit-colors-white), var(--bitkit-colors-gray-2));
+  background-image: linear-gradient(to top, var(--color-white), var(--color-gray--2));
   transition-property: transform, border-color, box-shadow;
   transition-duration: var(--transition-duration--fast);
   transition-timing-function: var(--transition-timing-function);
@@ -56,10 +63,22 @@
 .Toggle__icon-left { left: var(--Toggle--border); }
 .Toggle__icon-right { right: var(--Toggle--border); }
 
+.Toggle__container--disabled .Toggle__control {
+  background-color: var(--color-gray--2);
+}
+
 .Toggle__input:checked + .Toggle__control {
-  background-color: var(--bitkit-colors-aqua-3);
+  background-color: var(--color-aqua--3);
 
   & .Toggle__knob {
     transform: translate(calc(100% + (var(--Toggle--border) * 2)), -50%);
   }
 }
+
+.Toggle__container--disabled .Toggle__input:checked + .Toggle__control {
+  background-color: var(--color-aqua--2);
+}
+
+.Toggle__container--disabled .Toggle__label {
+  opacity: 0.8;
+}

package/src/Toggle/Toggle.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import classnames from 'classnames';
 import Flex, { Props as FlexProps } from '../Flex/Flex';
 import Icon from '../Icon/Icon';
 import './Toggle.css';
@@ -10,27 +11,38 @@ export interface Props extends FlexProps {
   defaultChecked?: boolean;
   /** Handler for when the toggle state changes */
   onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+  /** Applies styling to indicate the input is disabled */
+  disabled?: boolean;
 }
 
 /**
  * A slick styled toggle component.
  */
 const Toggle: React.FunctionComponent<Props> = (props: Props) => {
-  const { checked, children, defaultChecked, onChange, ...rest } = props;
+  const { className, checked, children, defaultChecked, onChange, disabled, ...rest } = props;
+
+  const classes = classnames(className, 'Toggle__container', {
+    'Toggle__container--disabled': disabled,
+  });
 
   return (
-    <Flex { ...rest }
-        Component="label"
-        alignChildrenVertical="middle"
-        direction="horizontal"
-        gap="x2">
+    <Flex
+      {...rest}
+      Component="label"
+      alignChildrenVertical="middle"
+      direction="horizontal"
+      gap="x2"
+      className={classes}
+    >
       <Flex className="Toggle">
         <input
-            checked={ checked }
-            className="Toggle__input"
-            defaultChecked={ defaultChecked }
-            onChange={ onChange }
-            type="checkbox" />
+          checked={checked}
+          className="Toggle__input"
+          defaultChecked={defaultChecked}
+          onChange={onChange}
+          type="checkbox"
+          disabled={disabled}
+        />
         <Flex className="Toggle__control">
           <span className="Toggle__icon-left">
             <Icon name="Tick" />
@@ -44,11 +56,11 @@ const Toggle: React.FunctionComponent<Props> = (props: Props) => {
         </Flex>
       </Flex>
 
-      { children && (
-        <Flex minWidth="0px" shrink>
-          { children }
+      {children && (
+        <Flex minWidth="0px" shrink className="Toggle__label">
+          {children}
         </Flex>
-      ) }
+      )}
     </Flex>
   );
 };

package/src/Tooltip/Tooltip.tsx

@@ -54,26 +54,29 @@ const Tooltip: React.FunctionComponent<Props> = (props: Props) => {
   return (
     <PlacementManager>
       <Placement
-          backgroundColor={ backgroundColor }
-          borderRadius={ borderRadius }
-          placement={ placement }
-          textColor={ textColor }
-          timeout={ timeout }
-          { ...rest }
-          visible={ isControlled ? controlledVisible : uncontrolledVisible }>
-        { () => (
+        backgroundColor={backgroundColor}
+        borderRadius={borderRadius}
+        placement={placement}
+        textColor={textColor}
+        timeout={timeout}
+        {...rest}
+        visible={isControlled ? controlledVisible : uncontrolledVisible}
+      >
+        {() => (
           <PlacementArea paddingHorizontal="x3" paddingVertical="x2" withArrow>
-            <Text size="2">{ title }</Text>
+            <Text size="2">{title}</Text>
           </PlacementArea>
-        ) }
+        )}
       </Placement>
 
       <PlacementReference>
-        { (props) => children({
-          ...props,
-          onMouseEnter: isControlled ? undefined : handleMouseEnter,
-          onMouseLeave: isControlled ? undefined : handleMouseLeave,
-        }) }
+        {(properties) =>
+          children({
+            ...properties,
+            onMouseEnter: isControlled ? undefined : handleMouseEnter,
+            onMouseLeave: isControlled ? undefined : handleMouseLeave,
+          })
+        }
       </PlacementReference>
     </PlacementManager>
   );

package/src/Visibility/Visibility.tsx

@@ -23,9 +23,7 @@ const Visibility: React.FunctionComponent<Props> = (props: Props) => {
     'Visibility--visible': visible,
   });
 
-  return (
-    <Flex className={ classes } { ...rest } />
-  );
+  return <Flex className={classes} {...rest} />;
 };
 
 export default Visibility;

package/src/Visibility/VisibilityContainer.tsx

@@ -17,9 +17,7 @@ const VisibilityContainer: React.FunctionComponent<Props> = (props: Props) => {
     'Visibility__container--enabled': enabled,
   });
 
-  return (
-    <Flex className={ classes } { ...rest } />
-  );
+  return <Flex className={classes} {...rest} />;
 };
 
 VisibilityContainer.defaultProps = {

package/src/hooks/useResizeObserver.ts

@@ -1,11 +1,9 @@
 import { useLayoutEffect, useState } from 'react';
+import { ResizeObserver as ResizeObserverPolyfill } from '@juggle/resize-observer';
 
-export interface DOMRectReadOnlyWithoutToJSON extends Omit<DOMRectReadOnly, 'toJSON'> {}
+export type DOMRectReadOnlyWithoutToJSON = Omit<DOMRectReadOnly, 'toJSON'>;
 
-export default (): [
-  DOMRectReadOnlyWithoutToJSON,
-  (element: Element | null) => void,
-] => {
+export default (): [DOMRectReadOnlyWithoutToJSON, (element: Element | null) => void] => {
   const [node, setNode] = useState<Element | null>(null);
   const [size, setSize] = useState<DOMRectReadOnlyWithoutToJSON>({
     bottom: 0,
@@ -19,7 +17,7 @@ export default (): [
   });
 
   useLayoutEffect(() => {
-    const observer: ResizeObserver = new ResizeObserver(([entry]) => {
+    const observer: ResizeObserver = new ResizeObserverPolyfill(([entry]) => {
       if (entry) {
         setSize(entry.contentRect);
       }

package/src/index.ts

@@ -1,4 +1,6 @@
+import 'normalize.css/normalize.css';
 import './variables.css';
+import './root.css';
 
 import * as variables from './variables';
 import * as hooks from './hooks';
@@ -20,9 +22,11 @@ export { default as Badge, Props as BadgeProps } from './Badge/Badge';
 export { default as Base, Props as BaseProps, TypeColors, TypeSizes } from './Base/Base';
 export { default as Bounds, Props as BoundsProps } from './Bounds/Bounds';
 export { default as Button, Props as ButtonProps } from './Button/Button';
-export { default as Button2 } from './Button2/Button2';
 export { default as Buttons, Props as ButtonsProps } from './Button/Buttons';
-export { default as ButtonWithDropdown, Props as ButtonWithDropdownProps } from './ButtonWithDropdown/ButtonWithDropdown';
+export {
+  default as ButtonWithDropdown,
+  Props as ButtonWithDropdownProps,
+} from './ButtonWithDropdown/ButtonWithDropdown';
 export { default as Card, Props as CardProps } from './Card/Card';
 export { default as CardButton, Props as CardButtonProps } from './Card/CardButton';
 export { default as CardContent, Props as CardContentProps } from './Card/CardContent';
@@ -37,7 +41,10 @@ export { default as DropdownButton, Props as DropdownButtonProps } from './Dropd
 export { default as DropdownMenus, Props as DropdownMenusProps } from './Dropdown/DropdownMenus';
 export { default as DropdownMenu, Props as DropdownMenuProps } from './Dropdown/DropdownMenu';
 export { default as DropdownMenuItem, Props as DropdownMenuItemProps } from './Dropdown/DropdownMenuItem';
-export { default as DropdownMenuItemGroup, Props as DropdownMenuItemGroupProps } from './Dropdown/DropdownMenuItemGroup';
+export {
+  default as DropdownMenuItemGroup,
+  Props as DropdownMenuItemGroupProps,
+} from './Dropdown/DropdownMenuItemGroup';
 export { default as Expand, Props as ExpandProps } from './Expand/Expand';
 export { default as ExternalLink, Props as ExternalLinkProps } from './ExternalLink/ExternalLink';
 export { default as Flex, Props as FlexProps } from './Flex/Flex';
@@ -56,6 +63,7 @@ export { default as ListItem, Props as ListItemProps } from './List/ListItem';
 export { default as Logo, Props as LogoProps } from './Logo/Logo';
 export { default as Modal, Props as ModalProps } from './Modal/Modal';
 export { default as ModalBody, Props as ModalBodyProps } from './Modal/ModalBody';
+// eslint-disable-next-line import/no-cycle
 export { default as ModalHeader, Props as ModalHeaderProps } from './Modal/ModalHeader';
 export { default as ModalHeaderProgress, Props as ModalHeaderProgressProps } from './Modal/ModalHeaderProgress';
 export { default as ModalTitle, Props as ModalTitleProps } from './Modal/ModalTitle';
@@ -98,5 +106,3 @@ export { default as Toggle, Props as ToggleProps } from './Toggle/Toggle';
 export { default as Tooltip, Props as TooltipProps } from './Tooltip/Tooltip';
 export { default as Visibility, Props as VisibilityProps } from './Visibility/Visibility';
 export { default as VisibilityContainer, Props as VisibilityContainerProps } from './Visibility/VisibilityContainer';
-export { default as provider } from './chakra/provider';
-export { default as theme } from './chakra/theme';

package/src/root.css

@@ -0,0 +1,59 @@
+/* stylelint-disable selector-max-universal, selector-max-id, selector-max-type */
+
+*,
+*::before,
+*::after {
+  box-sizing: inherit;
+}
+
+html {
+  min-height: 100%;
+  box-sizing: border-box;
+}
+
+body:not(.bitrise-legacy) {
+  color: var(--color-grape--5);
+  font-family: var(--font-family);
+  font-size: var(--font-size--3);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  line-height: var(--line-height--3);
+}
+
+canvas {
+  display: block;
+}
+
+svg:not(:root) {
+  overflow: visible;
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}
+
+p,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  margin: unset;
+  font-weight: unset;
+}
+
+button {
+  font-size: inherit;
+  font-weight: inherit;
+
+  &:hover { cursor: pointer; }
+  &:focus { outline: 0; }
+
+  &[disabled],
+  &[disabled]:hover,
+  &[disabled]:active {
+    cursor: default;
+  }
+}