Customize DayPickerKeyboardShortcuts with renderKeyboardShortcutsButton #1576

kypan · 2019-03-08T19:20:07Z

Introducing a functional prop renderKeyboardShortcutsButton to render a custom styled button.

coveralls · 2019-03-08T19:25:05Z

Coverage remained the same at 84.486% when pulling 98fe176 on kypan:kevin--customize-day-picker-keyboard-shortcuts-color into 64c9857 on airbnb:master.

monokrome

Looks good, but it's hard to test. Could you add a variant w/ this enabled to storybook?

monokrome · 2019-03-08T20:17:11Z

src/components/DayPickerKeyboardShortcuts.jsx

-              topLeft && styles.DayPickerKeyboardShortcuts_showSpan__topLeft,
-            )}
-          >
+        { renderKeyboardShortcutsButton


This is a nit, but I think that the code style in react-dates is to avoid ternaries by creating two conditions instead?

{ renderKeyboardShortcutsButton && .... } { renderKeyboardShortcutsButton || .... }

(in jsx in general)

also, jsx curlies should have no bounding spaces inside them

kypan · 2019-03-08T20:40:57Z

src/components/DayPickerKeyboardShortcuts.jsx

+                topLeft && styles.DayPickerKeyboardShortcuts_show__topLeft,
+              )}
+              type="button"
+              aria-label={toggleButtonText}


In order to pass in aria-label from custom button, I might have to change this to this.getToggleButtonText() and bind to this scope since it relies on state change in DayPicker.jsx

I'm confused, what is being referred to as "custom button" here? Seems like aria-label would work here unless I misunderstand?

@monokrome toggleButtonText here relies on showKeyboardShortcuts which is a state variable set in the parent DayPicker.jsx. At first, I didn't think there was a way for me to pass in a similar variable through renderKeyboardsShortcutsButton that can read the state of DayPicker.jsx unless I bound it somehow.

But actually though, I just realized that I can pass in toggleButtonText as a param into the renderKeyboardShortcutsButton() here and drill that back into the render logic. Turns out I don't need to change any logic here. Hope that made sense!

Cool! Thanks so much for explaining to me 😺

ljharb · 2019-03-08T22:37:14Z

src/components/DayPickerKeyboardShortcuts.jsx

-              topLeft && styles.DayPickerKeyboardShortcuts_showSpan__topLeft,
-            )}
-          >
+        { renderKeyboardShortcutsButton


also, jsx curlies should have no bounding spaces inside them

ljharb · 2019-03-08T22:38:06Z

test/components/DayPickerKeyboardShortcuts_spec.jsx

+        it('renders the provided button', () => {
+          const props = { renderKeyboardShortcutsButton: () => (<button type="button">Success!</button>) };
+          const wrapper = shallow(<DayPickerKeyboardShortcuts {...props} />).dive();
+          const buttonWrapper = wrapper.children().find('button');


possibly a more robust test would be to render a custom component, and expect(wrapper.find(Custom)).to.have.lengthOf(1)), rather than duplicating the text and element name here?

The use case for renderKeyboardShortcutsButton is to literally send in a <button> though, should I still create a spec for a React Component? @ljharb

@kypan i mean, the purpose is to ensure that whatever renderKeyboardShortcutsButton returns is what's rendered; the only way to guarantee that is to use an unforgeable sentinel value - which would thus be a custom component.

@ljharb That definitely makes sense. I've updated it. Thanks!

src/components/DayPickerKeyboardShortcuts.jsx

ljharb

It’d be good to also add test coverage for DayPicker and DayPickerRangeController - ie, just ensuring that the props are passed down.

src/components/DayPickerKeyboardShortcuts.jsx

ljharb · 2019-03-11T01:45:10Z

stories/DayPickerRangeController.js

@@ -68,6 +68,49 @@ const TestCustomInfoPanel = () => (
  </div>
 );

+function renderKeyboardShortcutsButton(buttonProps) {
+  const { ref, onClick, ariaLabel } = buttonProps || {};


Why would buttonProps need to be optional here?

If it is, it should be defaulted in the signature, no?

@ljharb I think when I wrote this I copied code from monorail. I intended to make buttonProps optional to avoid future implementations breaking, and so I used the defaulting pattern I saw in monorail. But if it's cool with the react-dates squad I can just make it required

Seems better to require everything until it needs to be optional.

Cool, I made it required

monokrome

Looks good after Jordan's requests are implemented 😺

kypan · 2019-03-11T19:55:16Z

@ljharb Added specs for DayPicker and DayPickerRangeController

stories/DayPickerRangeController.js

majapw · 2019-03-12T17:28:20Z

Sick! This looks awesome. Thank you for the thorough reviews @monokrome and @ljharb

Kevin Pan added 7 commits March 7, 2019 12:38

adding renderKeyboardShortcutsButton functional prop

4ad7be8

fixing renderKeyboardShortcutsButton functional prop

1b8465d

small null check fix

111494f

typo and other fixes

4e94f84

adding props at render to button

22d6a4b

replace deleted renderCalendarInfo

92052b5

removing need to clone button

8b62e7b

monokrome suggested changes Mar 8, 2019

View reviewed changes

kypan commented Mar 8, 2019

View reviewed changes

ljharb reviewed Mar 8, 2019

View reviewed changes

Kevin Pan added 2 commits March 8, 2019 16:09

PR fixes: adding params to renderKeyboardShortcutsButton; updating specs

ce25884

adding storybook variation

ba397af

ljharb reviewed Mar 11, 2019

View reviewed changes

src/components/DayPickerKeyboardShortcuts.jsx Outdated Show resolved Hide resolved

ljharb reviewed Mar 11, 2019

View reviewed changes

monokrome approved these changes Mar 11, 2019

View reviewed changes

PR fixes: syntax issues, adding specs, misc fixes

116aacf

ljharb reviewed Mar 11, 2019

View reviewed changes

stories/DayPickerRangeController.js Outdated Show resolved Hide resolved

stories/DayPickerRangeController.js Outdated Show resolved Hide resolved

stories/DayPickerRangeController.js Outdated Show resolved Hide resolved

linting issues

98fe176

majapw merged commit cffd919 into react-dates:master Mar 12, 2019

ljharb mentioned this pull request Feb 2, 2020

An in-range update of eslint-plugin-react is breaking the build 🚨 #1916

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Customize DayPickerKeyboardShortcuts with renderKeyboardShortcutsButton #1576

Customize DayPickerKeyboardShortcuts with renderKeyboardShortcutsButton #1576

kypan commented Mar 8, 2019

coveralls commented Mar 8, 2019 •

edited

Loading

monokrome left a comment

monokrome Mar 8, 2019 •

edited

Loading

ljharb Mar 8, 2019

ljharb Mar 8, 2019

kypan Mar 8, 2019 •

edited

Loading

monokrome Mar 8, 2019

kypan Mar 8, 2019

monokrome Mar 8, 2019

ljharb Mar 8, 2019

ljharb Mar 8, 2019

kypan Mar 8, 2019 •

edited

Loading

ljharb Mar 9, 2019

kypan Mar 11, 2019

ljharb left a comment

ljharb Mar 11, 2019

kypan Mar 11, 2019 •

edited

Loading

ljharb Mar 11, 2019

kypan Mar 11, 2019

monokrome left a comment

kypan commented Mar 11, 2019

majapw commented Mar 12, 2019

Customize DayPickerKeyboardShortcuts with renderKeyboardShortcutsButton #1576

Customize DayPickerKeyboardShortcuts with renderKeyboardShortcutsButton #1576

Conversation

kypan commented Mar 8, 2019

coveralls commented Mar 8, 2019 • edited Loading

monokrome left a comment

Choose a reason for hiding this comment

monokrome Mar 8, 2019 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

kypan Mar 8, 2019 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

kypan Mar 8, 2019 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ljharb left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

kypan Mar 11, 2019 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

monokrome left a comment

Choose a reason for hiding this comment

kypan commented Mar 11, 2019

majapw commented Mar 12, 2019

coveralls commented Mar 8, 2019 •

edited

Loading

monokrome Mar 8, 2019 •

edited

Loading

kypan Mar 8, 2019 •

edited

Loading

kypan Mar 8, 2019 •

edited

Loading

kypan Mar 11, 2019 •

edited

Loading