[Form components] Set cursor:not-allowed style when disabled

Affects the following components: Checkbox, DatePicker, EnhancedTextarea, IconButton, ListItem, MenuItem, RadioButton, SelectField, Stepper, Table, TextField, Toggle
mui · Jun 14, 2016 · 065ca12 · 065ca12
1 parent 81d74af
commit 065ca12
Show file tree

Hide file tree

Showing 14 changed files with 41 additions and 8 deletions.
diff --git a/src/Checkbox/Checkbox.js b/src/Checkbox/Checkbox.js
@@ -43,9 +43,11 @@ function getStyles(props, context) {
     },
     checkWhenDisabled: {
       fill: checkbox.disabledColor,
+      cursor: 'not-allowed',
     },
     boxWhenDisabled: {
       fill: props.checked ? 'transparent' : checkbox.disabledColor,
+      cursor: 'not-allowed',
     },
     label: {
       color: props.disabled ? checkbox.labelDisabledColor : checkbox.labelColor,

diff --git a/src/DatePicker/DateDisplay.js b/src/DatePicker/DateDisplay.js
@@ -48,7 +48,7 @@ function getStyles(props, context, state) {
       marginBottom: 10,
     },
     yearTitle: {
-      cursor: (!selectedYear && !props.disableYearSelection) ? 'pointer' : 'default',
+      cursor: props.disableYearSelection ? 'not-allowed' : (!selectedYear ? 'pointer' : 'default'),
     },
   };
 

diff --git a/src/IconButton/IconButton.js b/src/IconButton/IconButton.js
@@ -33,6 +33,7 @@ function getStyles(props, context) {
     disabled: {
       color: baseTheme.palette.disabledColor,
       fill: baseTheme.palette.disabledColor,
+      cursor: 'not-allowed',
     },
   };
 }

diff --git a/src/MenuItem/MenuItem.js b/src/MenuItem/MenuItem.js
@@ -19,6 +19,7 @@ function getStyles(props, context) {
   const styles = {
     root: {
       color: props.disabled ? disabledColor : textColor,
+      cursor: props.disabled ? 'not-allowed' : 'inherit',
       lineHeight: props.desktop ? '32px' : '48px',
       fontSize: props.desktop ? 15 : 16,
       whiteSpace: 'nowrap',

diff --git a/src/RadioButton/RadioButton.js b/src/RadioButton/RadioButton.js
@@ -37,9 +37,11 @@ function getStyles(props, context) {
     },
     targetWhenDisabled: {
       fill: radioButton.disabledColor,
+      cursor: 'not-allowed',
     },
     fillWhenDisabled: {
       fill: radioButton.disabledColor,
+      cursor: 'not-allowed',
     },
     label: {
       color: props.disabled ? radioButton.labelDisabledColor : radioButton.labelColor,

diff --git a/src/SelectField/SelectField.js b/src/SelectField/SelectField.js
@@ -175,6 +175,7 @@ class SelectField extends Component {
       <TextField
         {...other}
         style={style}
+        disabled={disabled}
         floatingLabelFixed={floatingLabelFixed}
         floatingLabelText={floatingLabelText}
         floatingLabelStyle={floatingLabelStyle}

diff --git a/src/Stepper/StepLabel.js b/src/Stepper/StepLabel.js
@@ -47,6 +47,7 @@ const getStyles = ({active, completed, disabled}, {muiTheme, stepper}) => {
   if (disabled) {
     styles.icon.color = inactiveIconColor;
     styles.root.color = disabledTextColor;
+    styles.root.cursor = 'not-allowed';
   }
 
   return styles;

diff --git a/src/Table/TableBody.js b/src/Table/TableBody.js
@@ -190,12 +190,13 @@ class TableBody extends Component {
     if (!this.props.displayRowCheckbox) return null;
 
     const key = `${rowProps.rowNumber}-cb`;
+    const disabled = !this.props.selectable;
     const checkbox = (
       <Checkbox
         ref="rowSelectCB"
         name={key}
         value="selected"
-        disabled={!this.props.selectable}
+        disabled={disabled}
         checked={rowProps.selected}
       />
     );
@@ -204,7 +205,10 @@ class TableBody extends Component {
       <TableRowColumn
         key={key}
         columnNumber={0}
-        style={{width: 24}}
+        style={{
+          width: 24,
+          cursor: disabled ? 'not-allowed' : 'inherit',
+        }}
       >
         {checkbox}
       </TableRowColumn>

diff --git a/src/Table/TableHeader.js b/src/Table/TableHeader.js
@@ -126,27 +126,43 @@ class TableHeader extends Component {
   getCheckboxPlaceholder(props) {
     if (!this.props.adjustForCheckbox) return null;
 
+    const disabled = !this.props.enableSelectAll;
     const key = `hpcb${props.rowNumber}`;
-    return <TableHeaderColumn key={key} style={{width: 24}} />;
+    return (
+      <TableHeaderColumn
+        key={key}
+        style={{
+          width: 24,
+          cursor: disabled ? 'not-allowed' : 'inherit',
+        }}
+      />
+    );
   }
 
   getSelectAllCheckboxColumn(props) {
     if (!this.props.displaySelectAll) return this.getCheckboxPlaceholder(props);
 
+    const disabled = !this.props.enableSelectAll;
     const checkbox = (
       <Checkbox
         key="selectallcb"
         name="selectallcb"
         value="selected"
-        disabled={!this.props.enableSelectAll}
+        disabled={disabled}
         checked={this.props.selectAllSelected}
         onCheck={this.handleCheckAll}
       />
     );
 
     const key = `hpcb${props.rowNumber}`;
     return (
-      <TableHeaderColumn key={key} style={{width: 24}}>
+      <TableHeaderColumn
+        key={key}
+        style={{
+          width: 24,
+          cursor: disabled ? 'not-allowed' : 'inherit',
+        }}
+      >
         {checkbox}
       </TableHeaderColumn>
     );

diff --git a/src/TextField/EnhancedTextarea.js b/src/TextField/EnhancedTextarea.js
@@ -14,7 +14,7 @@ function getStyles(props, context, state) {
       resize: 'none',
       font: 'inherit',
       padding: 0,
-      cursor: props.disabled ? 'default' : 'initial',
+      cursor: props.disabled ? 'not-allowed' : 'initial',
     },
     shadow: {
       resize: 'none',

diff --git a/src/TextField/TextField.js b/src/TextField/TextField.js
@@ -59,6 +59,7 @@ const getStyles = (props, context, state) => {
       outline: 'none',
       backgroundColor: 'rgba(0,0,0,0)',
       color: props.disabled ? disabledTextColor : textColor,
+      cursor: props.disabled ? 'not-allowed' : 'initial',
       font: 'inherit',
     },
     textarea: {},

diff --git a/src/TextField/TextFieldLabel.js b/src/TextField/TextFieldLabel.js
@@ -8,7 +8,7 @@ function getStyles(props) {
     top: 38,
     transition: transitions.easeOut(),
     zIndex: 1, // Needed to display label above Chrome's autocomplete field background
-    cursor: props.disabled ? 'default' : 'text',
+    cursor: props.disabled ? 'not-allowed' : 'text',
     transform: 'scale(1) translate3d(0, 0, 0)',
     transformOrigin: 'left top',
     pointerEvents: 'auto',

diff --git a/src/TextField/TextFieldUnderline.js b/src/TextField/TextFieldUnderline.js
@@ -85,6 +85,7 @@ const TextFieldUnderline = (props) => {
     disabled: {
       borderBottom: 'dotted 2px',
       borderColor: disabledTextColor,
+      cursor: 'not-allowed',
     },
     focus: {
       borderBottom: 'solid 2px',

diff --git a/src/Toggle/Toggle.js b/src/Toggle/Toggle.js
@@ -53,13 +53,16 @@ function getStyles(props, context, state) {
     },
     trackWhenDisabled: {
       backgroundColor: toggle.trackDisabledColor,
+      cursor: 'not-allowed',
     },
     thumbWhenDisabled: {
       backgroundColor: toggle.thumbDisabledColor,
+      cursor: 'not-allowed',
     },
     label: {
       color: disabled ? toggle.labelDisabledColor : toggle.labelColor,
       width: `calc(100% - ${(toggleTrackWidth + 10)}px)`,
+      cursor: disabled ? 'not-allowed' : 'initial',
     },
   };