Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

add verticalSpacing prop #1096

Merged
merged 2 commits into from
Apr 12, 2018
Merged

add verticalSpacing prop #1096

merged 2 commits into from
Apr 12, 2018

Conversation

amhunt
Copy link
Contributor

@amhunt amhunt commented Apr 3, 2018

This adds a verticalSpacing prop to DayPickerRangeController, which is passed all the way to CalendarMonth. This will allow users to add spacing between the rows in the month table.

@majapw should we also add horizontalSpacing while we're at it? I don't currently have a use for it, but seems odd to only add one of the two. Maybe I should just add a tableBorderSpacing prop with two values: vertical and horizontal?

NB: I also added showInputs as a declared prop for the wrapper. This was previously throwing a linting error.

screen shot 2018-04-02 at 5 05 58 pm

@amhunt amhunt requested a review from majapw April 3, 2018 00:09
@coveralls
Copy link

coveralls commented Apr 3, 2018

Coverage Status

Coverage remained the same at 86.457% when pulling c7ec725 on andrew-add-vertical-spacing-prop into d18da3b on master.

ljharb
ljharb previously requested changes Apr 3, 2018
Copy link
Member

@ljharb ljharb left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think multiple flat props is better than an object/shape

@@ -66,6 +66,7 @@ const propTypes = forbidExtraProps({
verticalHeight: nonNegativeInteger,
noBorder: PropTypes.bool,
transitionDuration: nonNegativeInteger,
verticalSpacing: PropTypes.number,
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

should this be non-negative, and an integer?

@@ -66,6 +66,7 @@ const propTypes = forbidExtraProps({
hideKeyboardShortcutsPanel: PropTypes.bool,
daySize: nonNegativeInteger,
noBorder: PropTypes.bool,
verticalSpacing: PropTypes.number,
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

also here

@ljharb ljharb added the feature request I want a new feature in react-dates! label Apr 3, 2018
@ljharb ljharb dismissed their stale review April 3, 2018 00:42

deferring to maja

@amhunt amhunt force-pushed the andrew-add-vertical-spacing-prop branch from daeebe8 to a187fe3 Compare April 3, 2018 17:26
Copy link
Collaborator

@majapw majapw left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm concerned about overloading this naming in the library.

@@ -45,6 +45,7 @@ const propTypes = forbidExtraProps({
renderDayContents: PropTypes.func,
firstDayOfWeek: DayOfWeekShape,
setMonthHeight: PropTypes.func,
verticalSpacing: nonNegativeInteger,
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think this name is somewhat overloaded as verticalSpacing in the case of the SDP and DRP signals the margin between the calendar dropdown and the inputs. Could we name this either verticalBorderSpacing to allude to the table or verticalWeekSpacing to allude to the calendar contents?

{...css(
!verticalSpacing && styles.CalendarMonth_table,
verticalSpacing && styles.CalendarMonth_verticalSpacing,
{ borderSpacing: `0px ${verticalSpacing}px` },
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Does this get weird when the verticalSpacing is undefined? Like it would try to apply a style of 0px undefinedpx and then it would crap out. I think it would be better to do:

verticalSpacing && {
  borderCollapse: 'separate',
  borderSpacing: `0px ${verticalSpacing}px`,
},

or

verticalSpacing && styles.CalendarMonth_verticalSpacing,
verticalSpacing && { borderSpacing: `0px ${verticalSpacing}px` },

@amhunt amhunt force-pushed the andrew-add-vertical-spacing-prop branch from a187fe3 to c7ec725 Compare April 11, 2018 22:46
@amhunt
Copy link
Contributor Author

amhunt commented Apr 11, 2018

@majapw updated

@majapw
Copy link
Collaborator

majapw commented Apr 12, 2018

Sweet! Looks great to me! Will merge in and do a release.

@majapw majapw merged commit 547e06f into master Apr 12, 2018
@majapw majapw deleted the andrew-add-vertical-spacing-prop branch April 12, 2018 18:14
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
feature request I want a new feature in react-dates!
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

4 participants