Rename keyboardIcon => openPickerIcon (mui#1696)

* Rename KeyboardIcon to CalendarIcon The icon components should be named after their content. * Rename `keyboardIcon` prop to `openPickerIcon` mui#1693 The prop should be named after the icon's functionality/usage. The new name matches the `hideOpenPickerButton` prop. The documentation on the prop already matches this wording. Tested by verifying that the two affected demo pages still work and show the customized icon. * Update lib/src/_shared/icons/CalendarIcon.tsx Co-Authored-By: Olivier Tassinari <olivier.tassinari@gmail.com> Co-authored-by: Dmitriy Kovalenko <dmtr.kovalenko@outlook.com> Co-authored-by: Olivier Tassinari <olivier.tassinari@gmail.com>
mnajdova · Apr 21, 2020 · 07e91bd · 07e91bd
1 parent bd53c63
commit 07e91bd
Show file tree

Hide file tree

Showing 8 changed files with 21 additions and 21 deletions.
diff --git a/docs/pages/demo/datepicker/AdvancedKeyboard.example.jsx b/docs/pages/demo/datepicker/AdvancedKeyboard.example.jsx
@@ -17,7 +17,7 @@ function AdvancedKeyboardExample(props) {
           dateFns: 'yyyy/MM/dd',
         })}
         mask="____/__/__"
-        keyboardIcon={<EventNoteIcon />}
+        openPickerIcon={<EventNoteIcon />}
         value={selectedDate}
         onChange={date => handleDateChange(date)}
       />

diff --git a/docs/pages/demo/datetime-picker/CustomDateTimePicker.example.jsx b/docs/pages/demo/datetime-picker/CustomDateTimePicker.example.jsx
@@ -25,7 +25,7 @@ function CustomDateTimePicker(props) {
         rightArrowIcon={<SnoozeIcon />}
         leftArrowButtonText="Open previous month"
         rightArrowButtonText="Open next month"
-        keyboardIcon={<ClockIcon />}
+        openPickerIcon={<ClockIcon />}
         minTime={new Date(0, 0, 0, 9)}
         maxTime={new Date(0, 0, 0, 20)}
       />

diff --git a/docs/prop-types.json b/docs/prop-types.json
diff --git a/lib/src/TimePicker/TimePicker.tsx b/lib/src/TimePicker/TimePicker.tsx
@@ -38,7 +38,7 @@ function useDefaultProps({
     acceptRegex: willUseAmPm ? /[\dapAP]/gi : /\d/gi,
     mask: mask || willUseAmPm ? '__:__ _M' : '__:__',
     getOpenDialogAriaText: getTextFieldAriaText,
-    keyboardIcon: <ClockIcon />,
+    openPickerIcon: <ClockIcon />,
     inputFormat: pick12hOr24hFormat(inputFormat, ampm, {
       localized: utils.formats.fullTime,
       '12h': utils.formats.fullTime12h,

diff --git a/lib/src/_shared/KeyboardDateInput.tsx b/lib/src/_shared/KeyboardDateInput.tsx
@@ -4,7 +4,7 @@ import IconButton from '@material-ui/core/IconButton';
 import InputAdornment from '@material-ui/core/InputAdornment';
 import { Rifm } from 'rifm';
 import { useUtils } from './hooks/useUtils';
-import { KeyboardIcon } from './icons/KeyboardIcon';
+import { CalendarIcon } from './icons/CalendarIcon';
 import { DateInputProps, DateInputRefs } from './PureDateInput';
 import { createDelegatedEventHandler } from '../_helpers/utils';
 import {
@@ -31,7 +31,7 @@ export const KeyboardDateInput: React.FC<DateInputProps & DateInputRefs> = ({
   disabled,
   rifmFormatter,
   TextFieldComponent = TextField,
-  keyboardIcon = <KeyboardIcon />,
+  openPickerIcon = <CalendarIcon />,
   variant,
   emptyInputText: emptyLabel,
   disableOpenPicker: hideOpenPickerButton,
@@ -127,7 +127,7 @@ export const KeyboardDateInput: React.FC<DateInputProps & DateInputRefs> = ({
             {...KeyboardButtonProps}
             onClick={onOpen}
           >
-            {keyboardIcon}
+            {openPickerIcon}
           </IconButton>
         </InputAdornment>
       ),

diff --git a/lib/src/_shared/PickerToolbar.tsx b/lib/src/_shared/PickerToolbar.tsx
@@ -6,7 +6,7 @@ import IconButton from '@material-ui/core/IconButton';
 import Toolbar, { ToolbarProps } from '@material-ui/core/Toolbar';
 import { ExtendMui } from '../typings/helpers';
 import { PenIcon } from '../_shared/icons/PenIcon';
-import { KeyboardIcon } from './icons/KeyboardIcon';
+import { CalendarIcon } from './icons/CalendarIcon';
 import { makeStyles } from '@material-ui/core/styles';
 import { ToolbarComponentProps } from '../Picker/Picker';
 
@@ -101,7 +101,7 @@ const PickerToolbar: React.SFC<PickerToolbarProps> = ({
           aria-label={getMobileKeyboardInputViewButtonText(isMobileKeyboardViewOpen)}
         >
           {isMobileKeyboardViewOpen ? (
-            <KeyboardIcon color="inherit" />
+            <CalendarIcon color="inherit" />
           ) : (
             <PenIcon color="inherit" />
           )}

diff --git a/lib/src/_shared/PureDateInput.tsx b/lib/src/_shared/PureDateInput.tsx
@@ -26,7 +26,7 @@ export interface DateInputProps<TInputValue = ParsableDate, TDateValue = Materia
    */
   emptyInputText?: string;
   /** Icon displaying for open picker button */
-  keyboardIcon?: React.ReactNode;
+  openPickerIcon?: React.ReactNode;
   /**
    * Custom mask. Can be used to override generate from format. (e.g. __/__/____ __:__)
    */
@@ -102,7 +102,7 @@ export const PureDateInput: React.FC<DateInputProps & DateInputRefs> = ({
   TextFieldComponent = TextField,
   variant,
   emptyInputText: emptyLabel,
-  keyboardIcon,
+  openPickerIcon,
   disableOpenPicker: hideOpenPickerButton,
   ignoreInvalidInputs,
   KeyboardButtonProps,

diff --git a/lib/src/_shared/icons/KeyboardIcon.tsx → lib/src/_shared/icons/CalendarIcon.tsx b/lib/src/_shared/icons/KeyboardIcon.tsx → lib/src/_shared/icons/CalendarIcon.tsx
@@ -1,10 +1,10 @@
 import React from 'react';
 import { createSvgIcon } from '@material-ui/core/utils';
 
-export const KeyboardIcon = createSvgIcon(
+export const CalendarIcon = createSvgIcon(
   <>
     <path d="M17 12h-5v5h5v-5zM16 1v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2h-1V1h-2zm3 18H5V8h14v11z" />
     <path fill="none" d="M0 0h24v24H0z" />
   </>,
-  'KeyboardIcon'
+  'Calendar'
 );