[DatePicker][Checkbox][IconButton][ListItem][MenuItem][EnhancedButton…

…][TextField][RadioButton][Stepper][Table][Toggle] added 'cursor': 'not-allowed' for disabled state [SelectField] pass "disabled" to TextField to proper handle "disabled" state
mui · May 5, 2016 · 68f895b · 68f895b
1 parent 0390140
commit 68f895b
Show file tree

Hide file tree

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

diff --git a/src/DatePicker/CalendarMonth.js b/src/DatePicker/CalendarMonth.js
@@ -52,6 +52,7 @@ class CalendarMonth extends Component {
           onTouchTap={this.handleTouchTap}
           selected={selected}
           disabled={disabled}
+          style={Object.assign({}, disabled && {cursor: 'not-allowed'})}
         />
       );
     }, this);

diff --git a/src/DatePicker/CalendarToolbar.js b/src/DatePicker/CalendarToolbar.js
@@ -79,6 +79,13 @@ class CalendarToolbar extends Component {
     const nextButtonIcon = this.context.muiTheme.isRtl ? <NavigationChevronRight /> : <NavigationChevronLeft />;
     const prevButtonIcon = this.context.muiTheme.isRtl ? <NavigationChevronLeft /> : <NavigationChevronRight />;
 
+    const isToolbarIconLeftDisabled = !this.props.prevMonth;
+    const isToolbarIconRightDisabled = !this.props.nextMonth;
+    const stylesToolbarIcons = {
+      left: Object.assign({}, styles.button, isToolbarIconLeftDisabled && {cursor: 'not-allowed'}),
+      right: Object.assign({}, styles.button, isToolbarIconRightDisabled && {cursor: 'not-allowed'}),
+    };
+
     return (
       <Toolbar style={styles.root} noGutter={true}>
         <SlideInTransitionGroup
@@ -89,17 +96,17 @@ class CalendarToolbar extends Component {
         </SlideInTransitionGroup>
         <ToolbarGroup key={0} float="left">
           <IconButton
-            style={styles.button}
-            disabled={!this.props.prevMonth}
+            style={stylesToolbarIcons.left}
+            disabled={isToolbarIconLeftDisabled}
             onTouchTap={this.handleTouchTapPrevMonth}
           >
             {nextButtonIcon}
           </IconButton>
         </ToolbarGroup>
         <ToolbarGroup key={1} float="right">
           <IconButton
-            style={styles.button}
-            disabled={!this.props.nextMonth}
+            style={stylesToolbarIcons.right}
+            disabled={isToolbarIconRightDisabled}
             onTouchTap={this.handleTouchTapNextMonth}
           >
             {prevButtonIcon}

diff --git a/src/DatePicker/DateDisplay.js b/src/DatePicker/DateDisplay.js
@@ -39,7 +39,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
@@ -37,6 +37,7 @@ function getStyles(props, context) {
     disabled: {
       color: baseTheme.palette.disabledColor,
       fill: baseTheme.palette.disabledColor,
+      cursor: 'not-allowed',
     },
   };
 }

diff --git a/src/List/ListItem.js b/src/List/ListItem.js
@@ -354,11 +354,13 @@ class ListItem extends Component {
       style,
     } = this.props;
 
-    const mergedDivStyles = Object.assign({},
+    const mergedDivStyles = Object.assign(
+      {},
       styles.root,
       styles.innerDiv,
       innerDivStyle,
-      style
+      {cursor: 'not-allowed'},
+      style,
     );
 
     return (

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
@@ -158,6 +158,7 @@ class SelectField extends Component {
     return (
       <TextField
         style={style}
+        disabled={disabled}
         floatingLabelText={floatingLabelText}
         floatingLabelStyle={floatingLabelStyle}
         hintStyle={hintStyle}

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 isDisabled = !this.props.selectable;
     const checkbox = (
       <Checkbox
         ref="rowSelectCB"
         name={key}
         value="selected"
-        disabled={!this.props.selectable}
+        disabled={isDisabled}
         checked={rowProps.selected}
       />
     );
@@ -204,7 +205,7 @@ class TableBody extends Component {
       <TableRowColumn
         key={key}
         columnNumber={0}
-        style={{width: 24}}
+        style={Object.assing({width: 24}, isDisabled && {cursor: 'not-allowed'})}
       >
         {checkbox}
       </TableRowColumn>

diff --git a/src/Table/TableHeader.js b/src/Table/TableHeader.js
@@ -133,20 +133,24 @@ class TableHeader extends Component {
   getSelectAllCheckboxColumn(props) {
     if (!this.props.displaySelectAll) return this.getCheckboxPlaceholder(props);
 
+    const isDisabled = !this.props.enableSelectAll;
     const checkbox = (
       <Checkbox
         key="selectallcb"
         name="selectallcb"
         value="selected"
-        disabled={!this.props.enableSelectAll}
+        disabled={isDisabled}
         checked={this.props.selectAllSelected}
         onCheck={this.handleCheckAll}
       />
     );
 
     const key = `hpcb${props.rowNumber}`;
     return (
-      <TableHeaderColumn key={key} style={{width: 24}}>
+      <TableHeaderColumn
+        key={key}
+        style={Object.assign({width: 24}, isDisabled && {cursor: 'not-allowed'})}
+      >
         {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
@@ -58,6 +58,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,12 +53,15 @@ 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,
+      cursor: disabled ? 'not-allowed' : 'initial',
       width: `calc(100% - ${(toggleTrackWidth + 10)}px)`,
     },
   };

diff --git a/src/internal/EnhancedButton.js b/src/internal/EnhancedButton.js
@@ -271,7 +271,7 @@ class EnhancedButton extends Component {
       display: 'inline-block',
       fontFamily: this.context.muiTheme.baseTheme.fontFamily,
       WebkitTapHighlightColor: enhancedButton.tapHighlightColor, // Remove mobile color flashing (deprecated)
-      cursor: disabled ? 'default' : 'pointer',
+      cursor: disabled ? 'not-allowed' : 'pointer',
       textDecoration: 'none',
       outline: 'none',
       fontSize: 'inherit',