feat(ui): Add disabled state to CheckboxFancy

src/sentry/static/sentry/app/components/checkboxFancy.jsx

@@ -1,53 +1,57 @@
 import React from 'react';
-import styled from 'react-emotion';
+import styled, {css} from 'react-emotion';
 import PropTypes from 'prop-types';
 import InlineSvg from 'app/components/inlineSvg';
 
-class CheckboxFancy extends React.Component {
-  static propTypes = {
-    checked: PropTypes.bool,
-    size: PropTypes.string,
-  };
-
-  static defaultProps = {
-    checked: false,
-    size: '16px',
-  };
-
-  render() {
-    const {className, checked, size, ...props} = this.props;
-
-    return (
-      <CheckboxContainer
-        role="checkbox"
-        aria-checked={checked}
-        className={className}
-        checked={checked}
-        size={size}
-        {...props}
-      >
-        {checked && <Check src="icon-checkmark-sm" />}
-      </CheckboxContainer>
-    );
-  }
-}
-
-const CheckboxContainer = styled('div')`
+const getDisabledStyles = p =>
+  !p.checked &&
+  p.disabled &&
+  css`
+    background: ${p.theme.gray1};
+    border-color: ${p.theme.gray1};
+  `;
+
+const getHoverStyles = p =>
+  !p.disabled &&
+  css`
+    border: 2px solid ${p.checked ? p.theme.purple : p.theme.gray4};
+  `;
+
+const CheckboxFancy = styled(({checked, disabled, ...props}) => (
+  <div role="checkbox" aria-disabled={disabled} aria-checked={checked} {...props}>
+    {(checked || disabled) && <Check src="icon-checkmark-sm" />}
+  </div>
+))`
   width: ${p => p.size};
   height: ${p => p.size};
   border-radius: 5px;
   background: ${p => (p.checked ? p.theme.purple : null)};
   display: flex;
   align-items: center;
   justify-content: center;
-  box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.1) inset;
-  border: 1px solid ${p => (p.checked ? p.theme.purple : p.theme.gray1)};
+  box-shadow: 1px 1px 5px 0px rgba(0, 0, 0, 0.05) inset;
+  border: 2px solid ${p => (p.checked ? p.theme.purple : p.theme.gray2)};
+  cursor: ${p => (p.disabled ? 'disabled' : 'pointer')};
+  ${p => !p.checked && 'transition: 500ms border ease-out'};
 
   &:hover {
-    border: 1px solid ${p => (p.checked ? p.theme.purple : p.theme.gray2)};
+    ${getHoverStyles}
   }
+
+  ${getDisabledStyles}
 `;
 
+CheckboxFancy.defaultProps = {
+  checked: false,
+  size: '16px',
+};
+
+CheckboxFancy.propTypes = {
+  checked: PropTypes.bool,
+  disabled: PropTypes.bool,
+  size: PropTypes.string,
+};
+
 const Check = styled(InlineSvg)`
   width: 70%;
   height: 70%;

src/sentry/static/sentry/app/components/globalSelectionHeaderRow.jsx

@@ -21,10 +21,10 @@ class GlobalSelectionHeaderRow extends React.Component {
     const {checked, onCheckClick, multi, children, ...props} = this.props;
 
     return (
-      <Container {...props}>
+      <Container isMulti={multi} isChecked={checked} {...props}>
         <Content multi={multi}>{children}</Content>
         <CheckboxWrapper onClick={multi ? onCheckClick : null} checked={checked}>
-          <Checkbox checked={checked} />
+          <CheckboxFancy disabled={!multi} checked={multi && checked} />
         </CheckboxWrapper>
       </Container>
     );
@@ -41,9 +41,13 @@ const Container = styled('div')`
   height: ${p => p.theme.headerSelectorRowHeight}px;
   flex-shrink: 0;
 
-  /* thanks bootstrap? */
-  input[type='checkbox'] {
-    margin: 0;
+  /* stylelint-disable-next-line no-duplicate-selectors */
+  ${CheckboxFancy} {
+    opacity: ${p => (p.isMulti && p.isChecked ? 1 : 0.33)};
+  }
+
+  &:hover ${CheckboxFancy} {
+    opacity: 1;
   }
 `;
 
@@ -62,23 +66,13 @@ const Content = styled('div')`
   }
 `;
 
-const Checkbox = styled(CheckboxFancy)`
-  transition: 0.2s transform;
-`;
-
 const CheckboxWrapper = styled('div')`
   margin: 0 -${space(1)} 0 0; /* pushes the click box to be flush with the edge of the menu */
   padding: 0 ${space(1.5)} 0 ${space(1.25)};
   height: 100%;
   display: flex;
   justify-content: flex-end;
   align-items: center;
-  transition: 0.2s all;
-
-  &:hover ${Checkbox} {
-    transform: scale(1.1);
-    border-color: ${p => (p.checked ? p.theme.purple : p.theme.gray2)};
-  }
 `;
 
 export default GlobalSelectionHeaderRow;