Skip to content

Commit d9c21a7

Browse files
majapwmajapw
authored
Merge pull request #891 from airbnb/maja-add-small-variant-of-input
Add small (input) variant of the DRP/SDP
2 parents e43e73f + f65c1e3 commit d9c21a7

15 files changed

+226
-40
lines changed

‎examples/DateRangePickerWrapper.jsx

+2
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,8 @@ const defaultProps = {
4747
customInputIcon: null,
4848
customArrowIcon: null,
4949
customCloseIcon: null,
50+
block: false,
51+
small: false,
5052

5153
// calendar presentation and interaction related props
5254
renderMonth: null,

‎examples/SingleDatePickerWrapper.jsx

+3
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,9 @@ const defaultProps = {
3838
showClearDate: false,
3939
showDefaultInputIcon: false,
4040
customInputIcon: null,
41+
block: false,
42+
small: false,
43+
verticalSpacing: undefined,
4144

4245
// calendar presentation and interaction related props
4346
renderMonth: null,

‎src/components/DateInput.jsx

+25-10
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,7 @@ const propTypes = forbidExtraProps({
3333
openDirection: openDirectionShape,
3434
showCaret: PropTypes.bool,
3535
verticalSpacing: nonNegativeInteger,
36+
small: PropTypes.bool,
3637

3738
onChange: PropTypes.func,
3839
onFocus: PropTypes.func,
@@ -57,6 +58,7 @@ const defaultProps = {
5758
openDirection: OPEN_DOWN,
5859
showCaret: false,
5960
verticalSpacing: DEFAULT_VERTICAL_SPACING,
61+
small: false,
6062

6163
onChange() {},
6264
onFocus() {},
@@ -169,6 +171,7 @@ class DateInput extends React.Component {
169171
readOnly,
170172
openDirection,
171173
verticalSpacing,
174+
small,
172175
styles,
173176
theme: { reactDates },
174177
} = this.props;
@@ -178,16 +181,13 @@ class DateInput extends React.Component {
178181

179182
const withFang = showCaret && focused;
180183

181-
const {
182-
font: { input: { lineHeight } },
183-
spacing: { inputPadding, displayTextPaddingVertical },
184-
} = reactDates;
185-
const inputHeight = getInputHeight({ lineHeight, inputPadding, displayTextPaddingVertical });
184+
const inputHeight = getInputHeight(reactDates, small);
186185

187186
return (
188187
<div
189188
{...css(
190189
styles.DateInput,
190+
small && styles.DateInput__small,
191191
withFang && styles.DateInput__withFang,
192192
disabled && styles.DateInput__disabled,
193193
withFang && openDirection === OPEN_DOWN && styles.DateInput__openDown,
@@ -197,6 +197,7 @@ class DateInput extends React.Component {
197197
<input
198198
{...css(
199199
styles.DateInput_input,
200+
small && styles.DateInput_input__small,
200201
readOnly && styles.DateInput_input__readOnly,
201202
focused && styles.DateInput_input__focused,
202203
disabled && styles.DateInput_input__disabled,
@@ -262,20 +263,19 @@ export default withStyles(({
262263
},
263264
}) => ({
264265
DateInput: {
265-
fontWeight: 200,
266-
fontSize: font.input.size,
267-
lineHeight: font.input.lineHeight,
268-
color: color.placeholderText,
269266
margin: 0,
270267
padding: spacing.inputPadding,
271-
272268
background: color.background,
273269
position: 'relative',
274270
display: 'inline-block',
275271
width: sizing.inputWidth,
276272
verticalAlign: 'middle',
277273
},
278274

275+
DateInput__small: {
276+
width: sizing.inputWidth_small,
277+
},
278+
279279
DateInput__disabled: {
280280
background: color.disabled,
281281
color: color.textDisabled,
@@ -284,17 +284,32 @@ export default withStyles(({
284284
DateInput_input: {
285285
fontWeight: 200,
286286
fontSize: font.input.size,
287+
lineHeight: font.input.lineHeight,
287288
color: color.text,
288289
backgroundColor: color.background,
289290
width: '100%',
290291
padding: `${spacing.displayTextPaddingVertical}px ${spacing.displayTextPaddingHorizontal}px`,
292+
paddingTop: spacing.displayTextPaddingTop,
293+
paddingBottom: spacing.displayTextPaddingBottom,
294+
paddingLeft: spacing.displayTextPaddingLeft,
295+
paddingRight: spacing.displayTextPaddingRight,
291296
border: border.input.border,
292297
borderTop: border.input.borderTop,
293298
borderRight: border.input.borderRight,
294299
borderBottom: border.input.borderBottom,
295300
borderLeft: border.input.borderLeft,
296301
},
297302

303+
DateInput_input__small: {
304+
fontSize: font.input.size_small,
305+
lineHeight: font.input.lineHeight_small,
306+
padding: `${spacing.displayTextPaddingVertical_small}px ${spacing.displayTextPaddingHorizontal_small}px`,
307+
paddingTop: spacing.displayTextPaddingTop_small,
308+
paddingBottom: spacing.displayTextPaddingBottom_small,
309+
paddingLeft: spacing.displayTextPaddingLeft_small,
310+
paddingRight: spacing.displayTextPaddingRight_small,
311+
},
312+
298313
DateInput_input__readOnly: {
299314
userSelect: 'none',
300315
},

‎src/components/DateRangePicker.jsx

+5-5
Original file line numberDiff line numberDiff line change
@@ -63,6 +63,7 @@ const defaultProps = {
6363
customCloseIcon: null,
6464
noBorder: false,
6565
block: false,
66+
small: false,
6667

6768
// calendar presentation and interaction related props
6869
renderMonth: null,
@@ -329,6 +330,7 @@ class DateRangePicker extends React.Component {
329330
verticalHeight,
330331
transitionDuration,
331332
verticalSpacing,
333+
small,
332334
theme: { reactDates },
333335
} = this.props;
334336
const { dayPickerContainerStyles, isDayPickerFocused, showKeyboardShortcuts } = this.state;
@@ -344,11 +346,7 @@ class DateRangePicker extends React.Component {
344346
<CloseButton {...css(styles.DateRangePicker_closeButton_svg)} />
345347
);
346348

347-
const {
348-
font: { input: { lineHeight } },
349-
spacing: { inputPadding, displayTextPaddingVertical },
350-
} = reactDates;
351-
const inputHeight = getInputHeight({ lineHeight, inputPadding, displayTextPaddingVertical });
349+
const inputHeight = getInputHeight(reactDates, small);
352350

353351
return (
354352
<div // eslint-disable-line jsx-a11y/no-static-element-interactions
@@ -458,6 +456,7 @@ class DateRangePicker extends React.Component {
458456
noBorder,
459457
block,
460458
verticalSpacing,
459+
small,
461460
styles,
462461
} = this.props;
463462

@@ -512,6 +511,7 @@ class DateRangePicker extends React.Component {
512511
isRTL={isRTL}
513512
noBorder={noBorder}
514513
block={block}
514+
small={small}
515515
verticalSpacing={verticalSpacing}
516516
/>
517517

‎src/components/DateRangePickerInput.jsx

+40-3
Original file line numberDiff line numberDiff line change
@@ -60,6 +60,7 @@ const propTypes = forbidExtraProps({
6060
customCloseIcon: PropTypes.node,
6161
noBorder: PropTypes.bool,
6262
block: PropTypes.bool,
63+
small: PropTypes.bool,
6364
verticalSpacing: nonNegativeInteger,
6465

6566
// accessibility
@@ -105,6 +106,7 @@ const defaultProps = {
105106
customCloseIcon: null,
106107
noBorder: false,
107108
block: false,
109+
small: false,
108110
verticalSpacing: undefined,
109111

110112
// accessibility
@@ -152,17 +154,36 @@ function DateRangePickerInput({
152154
noBorder,
153155
block,
154156
verticalSpacing,
157+
small,
155158
styles,
156159
}) {
157160
const calendarIcon = customInputIcon || (
158161
<CalendarIcon {...css(styles.DateRangePickerInput_calendarIcon_svg)} />
159162
);
160163
const arrowIcon = customArrowIcon || (isRTL
161-
? <LeftArrow {...css(styles.DateRangePickerInput_arrow_svg)} />
162-
: <RightArrow {...css(styles.DateRangePickerInput_arrow_svg)} />
164+
? (
165+
<LeftArrow
166+
{...css(
167+
styles.DateRangePickerInput_arrow_svg,
168+
small && styles.DateRangePickerInput_arrow_svg__small,
169+
)}
170+
/>
171+
) : (
172+
<RightArrow
173+
{...css(
174+
styles.DateRangePickerInput_arrow_svg,
175+
small && styles.DateRangePickerInput_arrow_svg__small,
176+
)}
177+
/>
178+
)
163179
);
164180
const closeIcon = customCloseIcon || (
165-
<CloseButton {...css(styles.DateRangePickerInput_clearDates_svg)} />
181+
<CloseButton
182+
{...css(
183+
styles.DateRangePickerInput_clearDates_svg,
184+
small && styles.DateRangePickerInput_clearDates_svg__small,
185+
)}
186+
/>
166187
);
167188
const screenReaderText = screenReaderMessage || phrases.keyboardNavigationInstructions;
168189
const inputIcon = (showDefaultInputIcon || customInputIcon !== null) && (
@@ -208,6 +229,7 @@ function DateRangePickerInput({
208229
onKeyDownArrowDown={onKeyDownArrowDown}
209230
onKeyDownQuestionMark={onKeyDownQuestionMark}
210231
verticalSpacing={verticalSpacing}
232+
small={small}
211233
/>
212234

213235
<div
@@ -236,6 +258,7 @@ function DateRangePickerInput({
236258
onKeyDownArrowDown={onKeyDownArrowDown}
237259
onKeyDownQuestionMark={onKeyDownQuestionMark}
238260
verticalSpacing={verticalSpacing}
261+
small={small}
239262
/>
240263

241264
{showClearDates && (
@@ -244,6 +267,7 @@ function DateRangePickerInput({
244267
aria-label={phrases.clearDates}
245268
{...css(
246269
styles.DateRangePickerInput_clearDates,
270+
small && styles.DateRangePickerInput_clearDates__small,
247271
!customCloseIcon && styles.DateRangePickerInput_clearDates_default,
248272
!(startDate || endDate) && styles.DateRangePickerInput_clearDates__hide,
249273
)}
@@ -301,6 +325,11 @@ export default withStyles(({ reactDates: { color, sizing } }) => ({
301325
width: sizing.arrowWidth,
302326
},
303327

328+
DateRangePickerInput_arrow_svg__small: {
329+
height: sizing.arrowWidth_small,
330+
width: sizing.arrowWidth_small,
331+
},
332+
304333
DateRangePickerInput_clearDates: {
305334
background: 'none',
306335
border: 0,
@@ -318,6 +347,10 @@ export default withStyles(({ reactDates: { color, sizing } }) => ({
318347
transform: 'translateY(-50%)',
319348
},
320349

350+
DateRangePickerInput_clearDates__small: {
351+
padding: 6,
352+
},
353+
321354
DateRangePickerInput_clearDates_default: {
322355
':focus': {
323356
background: color.core.border,
@@ -341,6 +374,10 @@ export default withStyles(({ reactDates: { color, sizing } }) => ({
341374
verticalAlign: 'middle',
342375
},
343376

377+
DateRangePickerInput_clearDates_svg__small: {
378+
height: 9,
379+
},
380+
344381
DateRangePickerInput_calendarIcon: {
345382
background: 'none',
346383
border: 0,

‎src/components/DateRangePickerInputController.jsx

+4
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,7 @@ const propTypes = forbidExtraProps({
4343
openDirection: openDirectionShape,
4444
noBorder: PropTypes.bool,
4545
block: PropTypes.bool,
46+
small: PropTypes.bool,
4647
verticalSpacing: nonNegativeInteger,
4748

4849
keepOpenOnDateSelect: PropTypes.bool,
@@ -93,6 +94,7 @@ const defaultProps = {
9394
openDirection: OPEN_DOWN,
9495
noBorder: false,
9596
block: false,
97+
small: false,
9698
verticalSpacing: undefined,
9799

98100
keepOpenOnDateSelect: false,
@@ -269,6 +271,7 @@ export default class DateRangePickerInputController extends React.Component {
269271
isRTL,
270272
noBorder,
271273
block,
274+
small,
272275
verticalSpacing,
273276
} = this.props;
274277

@@ -311,6 +314,7 @@ export default class DateRangePickerInputController extends React.Component {
311314
isRTL={isRTL}
312315
noBorder={noBorder}
313316
block={block}
317+
small={small}
314318
verticalSpacing={verticalSpacing}
315319
/>
316320
);

‎src/components/SingleDatePicker.jsx

+5-5
Original file line numberDiff line numberDiff line change
@@ -59,6 +59,7 @@ const defaultProps = {
5959
customCloseIcon: null,
6060
noBorder: false,
6161
block: false,
62+
small: false,
6263
verticalSpacing: DEFAULT_VERTICAL_SPACING,
6364

6465
// calendar presentation and interaction related props
@@ -366,18 +367,15 @@ class SingleDatePicker extends React.Component {
366367
verticalHeight,
367368
transitionDuration,
368369
verticalSpacing,
370+
small,
369371
theme: { reactDates },
370372
} = this.props;
371373
const { dayPickerContainerStyles, isDayPickerFocused, showKeyboardShortcuts } = this.state;
372374

373375
const onOutsideClick = (!withFullScreenPortal && withPortal) ? this.onClearFocus : undefined;
374376
const closeIcon = customCloseIcon || (<CloseButton />);
375377

376-
const {
377-
font: { input: { lineHeight } },
378-
spacing: { inputPadding, displayTextPaddingVertical },
379-
} = reactDates;
380-
const inputHeight = getInputHeight({ lineHeight, inputPadding, displayTextPaddingVertical });
378+
const inputHeight = getInputHeight(reactDates, small);
381379

382380
return (
383381
<div // eslint-disable-line jsx-a11y/no-static-element-interactions
@@ -477,6 +475,7 @@ class SingleDatePicker extends React.Component {
477475
isRTL,
478476
noBorder,
479477
block,
478+
small,
480479
verticalSpacing,
481480
styles,
482481
} = this.props;
@@ -525,6 +524,7 @@ class SingleDatePicker extends React.Component {
525524
isRTL={isRTL}
526525
noBorder={noBorder}
527526
block={block}
527+
small={small}
528528
verticalSpacing={verticalSpacing}
529529
/>
530530

0 commit comments

Comments
 (0)