From c33dbce2427795ce39b0b7237a240a49eb5837a6 Mon Sep 17 00:00:00 2001
From: Michel Weststrate <mweststrate@fb.com>
Date: Thu, 30 Jan 2020 07:04:08 -0800
Subject: [PATCH] Fix styling of listview disabled items

Summary: Also improved some paddings

Reviewed By: passy

Differential Revision: D19640179

fbshipit-source-id: 44aa91d452fc857533c638e00d4fe9648592b6f2
---
 src/chrome/ExportDataPluginSheet.tsx |  1 +
 src/chrome/ListView.tsx              | 30 +++++++++++++++++++---------
 src/ui/components/Checkbox.tsx       |  2 ++
 src/ui/components/Radio.tsx          |  2 ++
 4 files changed, 26 insertions(+), 9 deletions(-)

diff --git a/src/chrome/ExportDataPluginSheet.tsx b/src/chrome/ExportDataPluginSheet.tsx
index 502adf536..c24621bf5 100644
--- a/src/chrome/ExportDataPluginSheet.tsx
+++ b/src/chrome/ExportDataPluginSheet.tsx
@@ -55,6 +55,7 @@ type Props = OwnProps & StateFromProps & DispatchFromProps;
 const Container = styled(FlexColumn)({
   width: 700,
   maxHeight: 700,
+  padding: 8,
 });
 
 type State = {
diff --git a/src/chrome/ListView.tsx b/src/chrome/ListView.tsx
index c229c03d6..f190558b3 100644
--- a/src/chrome/ListView.tsx
+++ b/src/chrome/ListView.tsx
@@ -19,6 +19,7 @@ import {
   colors,
   View,
   Tooltip,
+  Glyph,
 } from '../ui';
 import React, {Component} from 'react';
 
@@ -56,7 +57,7 @@ type State = {
 };
 
 const Container = styled(FlexColumn)({
-  padding: 8,
+  padding: '8 0',
 });
 
 const Line = styled(View)({
@@ -90,7 +91,7 @@ type RowComponentProps = {
   label: string;
   selected: boolean;
   onChange: (name: string, selected: boolean) => void;
-  disable: boolean;
+  disabled: boolean;
   toolTipMessage?: string;
   type: SelectionType;
 };
@@ -102,25 +103,35 @@ class RowComponent extends Component<RowComponentProps> {
       label,
       selected,
       onChange,
-      disable,
+      disabled,
       toolTipMessage,
       type,
     } = this.props;
     return (
       <FlexColumn>
         <Tooltip
-          title={disable ? toolTipMessage : null}
+          title={disabled ? toolTipMessage : null}
           options={{position: 'toRight'}}>
           <Padder
-            paddingRight={8}
+            paddingRight={0}
             paddingTop={8}
             paddingBottom={8}
-            paddingLeft={8}>
-            <FlexRow>
-              <Text> {label} </Text>
+            paddingLeft={0}>
+            <FlexRow style={{alignItems: 'center'}}>
+              <Text color={disabled ? colors.light20 : undefined}>{label}</Text>
               <Spacer />
+              {disabled && (
+                <Glyph
+                  name="caution-triangle"
+                  color={colors.light20}
+                  size={12}
+                  variant="filled"
+                  style={{marginRight: 5}}
+                />
+              )}
               {type === 'multiple' && (
                 <Checkbox
+                  disabled={disabled}
                   checked={selected}
                   onChange={selected => {
                     onChange(id, selected);
@@ -129,6 +140,7 @@ class RowComponent extends Component<RowComponentProps> {
               )}
               {type === 'single' && (
                 <Radio
+                  disabled={disabled}
                   checked={selected}
                   onChange={selected => {
                     onChange(id, selected);
@@ -194,7 +206,7 @@ export default class ListView extends Component<Props, State> {
                   type={type}
                   selected={this.state.selectedElements.has(id)}
                   onChange={this.handleChange}
-                  disable={unselectable != null}
+                  disabled={unselectable != null}
                   toolTipMessage={unselectable?.toolTipMessage}
                 />
               );
diff --git a/src/ui/components/Checkbox.tsx b/src/ui/components/Checkbox.tsx
index bee23de06..20ad6461c 100644
--- a/src/ui/components/Checkbox.tsx
+++ b/src/ui/components/Checkbox.tsx
@@ -16,6 +16,7 @@ type CheckboxProps = {
   checked: boolean;
   /** Called when a state change is triggered */
   onChange: (checked: boolean) => void;
+  disabled?: boolean;
 };
 
 const CheckboxContainer = styled.input({
@@ -39,6 +40,7 @@ export default class Checkbox extends PureComponent<CheckboxProps> {
         type="checkbox"
         checked={this.props.checked}
         onChange={this.onChange}
+        disabled={this.props.disabled}
       />
     );
   }
diff --git a/src/ui/components/Radio.tsx b/src/ui/components/Radio.tsx
index 67a86fe1f..3823b1ed9 100644
--- a/src/ui/components/Radio.tsx
+++ b/src/ui/components/Radio.tsx
@@ -16,6 +16,7 @@ type RadioProps = {
   checked: boolean;
   /** Called when a state change is triggered */
   onChange: (selected: boolean) => void;
+  disabled?: boolean;
 };
 
 const RadioboxContainer = styled.input({
@@ -39,6 +40,7 @@ export default class Radio extends PureComponent<RadioProps> {
         type="radio"
         checked={this.props.checked}
         onChange={this.onChange}
+        disabled={this.props.disabled}
       />
     );
   }