From 1d9140de22a3cec384f20bb482213e476ce29dd8 Mon Sep 17 00:00:00 2001
From: Adi Dahiya <adahiya@palantir.com>
Date: Fri, 4 Nov 2022 15:06:51 -0700
Subject: [PATCH 1/2] WIP add DateRangeInput2 fill prop

---
 .../src/components/date-range-input2/dateRangeInput2.tsx     | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/packages/datetime2/src/components/date-range-input2/dateRangeInput2.tsx b/packages/datetime2/src/components/date-range-input2/dateRangeInput2.tsx
index 051098228c..c2eefd20e4 100644
--- a/packages/datetime2/src/components/date-range-input2/dateRangeInput2.tsx
+++ b/packages/datetime2/src/components/date-range-input2/dateRangeInput2.tsx
@@ -92,6 +92,11 @@ export interface DateRangeInput2Props extends DatePickerBaseProps, DateFormatPro
      */
     disabled?: boolean;
 
+    /**
+     * Whether the component should take up the full width of its container.
+     */
+    fill?: boolean;
+
     /**
      * Props to pass to the end-date [input group](#core/components/text-inputs.input-group).
      * `disabled` and `value` will be ignored in favor of the top-level props on this component.

From 8e8e49fff7fc508670f85fa6a64bc0e9d25ccce9 Mon Sep 17 00:00:00 2001
From: Adi Dahiya <adahiya@palantir.com>
Date: Fri, 4 Nov 2022 16:29:12 -0700
Subject: [PATCH 2/2] [datetime2] feat(DateRangeInput2): support 'fill' prop

---
 .../date-range-input2/dateRangeInput2.tsx     |   7 +-
 ...tkeyTester.tsx => hotkeyTesterExample.tsx} |   6 +-
 .../src/examples/core-examples/index.ts       |   2 +-
 .../datetime2-examples/dateInput2Example.tsx  |  60 +++++----
 .../dateRangeInput2Example.tsx                | 124 +++++++++++-------
 packages/docs-app/src/styles/_examples.scss   |  57 ++++----
 6 files changed, 159 insertions(+), 97 deletions(-)
 rename packages/docs-app/src/examples/core-examples/{hotkeyTester.tsx => hotkeyTesterExample.tsx} (91%)

diff --git a/packages/datetime2/src/components/date-range-input2/dateRangeInput2.tsx b/packages/datetime2/src/components/date-range-input2/dateRangeInput2.tsx
index c2eefd20e4..5780d4b480 100644
--- a/packages/datetime2/src/components/date-range-input2/dateRangeInput2.tsx
+++ b/packages/datetime2/src/components/date-range-input2/dateRangeInput2.tsx
@@ -374,13 +374,15 @@ export class DateRangeInput2 extends AbstractPureComponent2<DateRangeInput2Props
     private renderTarget =
         // N.B. pull out `isOpen` so that it's not forwarded to the DOM.
         ({ isOpen, ...targetProps }: Popover2TargetProps & React.HTMLProps<unknown>) => {
-            const { popoverProps = {} } = this.props;
+            const { fill, popoverProps = {} } = this.props;
             const { targetTagName = "div" } = popoverProps;
             return React.createElement(
                 targetTagName,
                 {
                     ...targetProps,
-                    className: classNames(CoreClasses.CONTROL_GROUP, targetProps.className),
+                    className: classNames(CoreClasses.CONTROL_GROUP, targetProps.className, {
+                        [CoreClasses.FILL]: fill,
+                    }),
                 },
                 this.renderInputGroup(Boundary.START),
                 this.renderInputGroup(Boundary.END),
@@ -395,6 +397,7 @@ export class DateRangeInput2 extends AbstractPureComponent2<DateRangeInput2Props
             <InputGroup
                 autoComplete="off"
                 disabled={inputProps?.disabled ?? this.props.disabled}
+                fill={this.props.fill}
                 {...inputProps}
                 intent={this.isInputInErrorState(boundary) ? Intent.DANGER : inputProps?.intent}
                 inputRef={this.getInputRef(boundary)}
diff --git a/packages/docs-app/src/examples/core-examples/hotkeyTester.tsx b/packages/docs-app/src/examples/core-examples/hotkeyTesterExample.tsx
similarity index 91%
rename from packages/docs-app/src/examples/core-examples/hotkeyTester.tsx
rename to packages/docs-app/src/examples/core-examples/hotkeyTesterExample.tsx
index d933782007..cacb3835a9 100644
--- a/packages/docs-app/src/examples/core-examples/hotkeyTester.tsx
+++ b/packages/docs-app/src/examples/core-examples/hotkeyTesterExample.tsx
@@ -19,12 +19,12 @@ import * as React from "react";
 import { Code, getKeyComboString, KeyCombo } from "@blueprintjs/core";
 import { Example, ExampleProps } from "@blueprintjs/docs-theme";
 
-export interface IHotkeyTesterState {
+export interface HotkeyTesterState {
     combo: string;
 }
 
-export class HotkeyTester extends React.PureComponent<ExampleProps, IHotkeyTesterState> {
-    public state: IHotkeyTesterState = {
+export class HotkeyTesterExample extends React.PureComponent<ExampleProps, HotkeyTesterState> {
+    public state: HotkeyTesterState = {
         combo: null,
     };
 
diff --git a/packages/docs-app/src/examples/core-examples/index.ts b/packages/docs-app/src/examples/core-examples/index.ts
index fd22838f98..c139f4439e 100644
--- a/packages/docs-app/src/examples/core-examples/index.ts
+++ b/packages/docs-app/src/examples/core-examples/index.ts
@@ -38,7 +38,7 @@ export * from "./fileInputExample";
 export * from "./focusExample";
 export * from "./formGroupExample";
 export * from "./hotkeyPiano";
-export * from "./hotkeyTester";
+export * from "./hotkeyTesterExample";
 export { HotkeysTarget2Example } from "./hotkeysTarget2Example";
 export * from "./iconExample";
 export * from "./menuExample";
diff --git a/packages/docs-app/src/examples/datetime2-examples/dateInput2Example.tsx b/packages/docs-app/src/examples/datetime2-examples/dateInput2Example.tsx
index 50cab9500e..58012ef738 100644
--- a/packages/docs-app/src/examples/datetime2-examples/dateInput2Example.tsx
+++ b/packages/docs-app/src/examples/datetime2-examples/dateInput2Example.tsx
@@ -17,7 +17,7 @@
 import classNames from "classnames";
 import * as React from "react";
 
-import { Classes, H5, Icon, Switch, Tag } from "@blueprintjs/core";
+import { Classes, Code, H5, Icon, Switch, Tag } from "@blueprintjs/core";
 import { DateFormatProps, TimePrecision } from "@blueprintjs/datetime";
 import { DateInput2 } from "@blueprintjs/datetime2";
 import { Example, ExampleProps, handleBooleanChange, handleValueChange } from "@blueprintjs/docs-theme";
@@ -139,10 +139,12 @@ export class DateInput2Example extends React.PureComponent<ExampleProps, DateInp
 
         return (
             <>
-                <H5>Props</H5>
+                <H5>Behavior props</H5>
                 <PropCodeTooltip snippet={`closeOnSelection={${closeOnSelection.toString()}}`}>
                     <Switch label="Close on selection" checked={closeOnSelection} onChange={this.toggleSelection} />
                 </PropCodeTooltip>
+
+                <H5>Date picker props</H5>
                 <PropCodeTooltip snippet={`shortcuts={${shortcuts.toString()}}`}>
                     <Switch
                         checked={shortcuts}
@@ -159,19 +161,35 @@ export class DateInput2Example extends React.PureComponent<ExampleProps, DateInp
                         onChange={this.toggleActionsBar}
                     />
                 </PropCodeTooltip>
+                <PropCodeTooltip snippet={`reverseMonthAndYearMenus={${reverse.toString()}}`}>
+                    <Switch label="Reverse month and year menus" checked={reverse} onChange={this.toggleReverseMenus} />
+                </PropCodeTooltip>
+
+                <H5>Input appearance props</H5>
+                <PropCodeTooltip snippet={`disabled={${disabled.toString()}}`}>
+                    <Switch label="Disabled" checked={disabled} onChange={this.toggleDisabled} />
+                </PropCodeTooltip>
+                <PropCodeTooltip snippet={`fill={${fill.toString()}}`}>
+                    <Switch label="Fill container width" checked={fill} onChange={this.toggleFill} />
+                </PropCodeTooltip>
+                <PropCodeTooltip
+                    content={
+                        <>
+                            <Code>rightElement</Code> is {showRightElement ? "defined" : "undefined"}
+                        </>
+                    }
+                >
+                    <Switch label="Show right element" checked={showRightElement} onChange={this.toggleRightElement} />
+                </PropCodeTooltip>
+                <DateFnsFormatSelector format={format} onChange={this.handleFormatChange} />
+
+                <H5>Time picker props</H5>
                 <PrecisionSelect
                     allowNone={true}
                     label="Time precision"
                     onChange={this.handleTimePrecisionChange}
                     value={timePrecision}
                 />
-
-                <H5>Appearance props</H5>
-                <Switch label="Disabled" checked={disabled} onChange={this.toggleDisabled} />
-                <Switch label="Fill" checked={fill} onChange={this.toggleFill} />
-                <PropCodeTooltip snippet={`reverseMonthAndYearMenus={${reverse.toString()}}`}>
-                    <Switch label="Reverse month and year menus" checked={reverse} onChange={this.toggleReverseMenus} />
-                </PropCodeTooltip>
                 <PropCodeTooltip
                     snippet={`timePickerProps={{ showArrowButtons: ${showTimePickerArrows.toString()} }}`}
                     disabled={!isTimePickerShown}
@@ -194,32 +212,30 @@ export class DateInput2Example extends React.PureComponent<ExampleProps, DateInp
                         onChange={this.toggleUseAmPm}
                     />
                 </PropCodeTooltip>
-                <Switch label="Show right element" checked={showRightElement} onChange={this.toggleRightElement} />
-                <DateFnsFormatSelector format={format} onChange={this.handleFormatChange} />
 
                 <H5 className={classNames({ [Classes.TEXT_DISABLED]: timePrecision === undefined })}>
-                    TimezoneSelect props
+                    Timezone select props
                 </H5>
                 <PropCodeTooltip
-                    snippet={`disableTimezoneSelect={${disableTimezoneSelect.toString()}}`}
+                    snippet={`showTimezoneSelect={${showTimezoneSelect.toString()}}`}
                     disabled={!isTimePickerShown}
                 >
                     <Switch
-                        label="Disable timezone select"
-                        checked={disableTimezoneSelect}
+                        label={`Show timezone${disableTimezoneSelect ? "" : " select"}`}
+                        checked={showTimezoneSelect}
                         disabled={!isTimePickerShown}
-                        onChange={this.toggleDisableTimezoneSelect}
+                        onChange={this.toggleShowTimezoneSelect}
                     />
                 </PropCodeTooltip>
                 <PropCodeTooltip
-                    snippet={`showTimezoneSelect={${showTimezoneSelect.toString()}}`}
-                    disabled={!isTimePickerShown}
+                    snippet={`disableTimezoneSelect={${disableTimezoneSelect.toString()}}`}
+                    disabled={!isTimePickerShown || !showTimezoneSelect}
                 >
                     <Switch
-                        label="Show timezone select"
-                        checked={showTimezoneSelect}
-                        disabled={!isTimePickerShown}
-                        onChange={this.toggleShowTimezoneSelect}
+                        label="Disable timezone select"
+                        checked={disableTimezoneSelect}
+                        disabled={!isTimePickerShown || !showTimezoneSelect}
+                        onChange={this.toggleDisableTimezoneSelect}
                     />
                 </PropCodeTooltip>
             </>
diff --git a/packages/docs-app/src/examples/datetime2-examples/dateRangeInput2Example.tsx b/packages/docs-app/src/examples/datetime2-examples/dateRangeInput2Example.tsx
index 6aed72f78b..9ebac3d5a6 100644
--- a/packages/docs-app/src/examples/datetime2-examples/dateRangeInput2Example.tsx
+++ b/packages/docs-app/src/examples/datetime2-examples/dateRangeInput2Example.tsx
@@ -21,6 +21,7 @@ import { DateFormatProps, DateRange, TimePrecision } from "@blueprintjs/datetime
 import { DateRangeInput2 } from "@blueprintjs/datetime2";
 import { Example, ExampleProps, handleBooleanChange, handleValueChange } from "@blueprintjs/docs-theme";
 
+import { PropCodeTooltip } from "../../common/propCodeTooltip";
 import { PrecisionSelect } from "../datetime-examples/common/precisionSelect";
 import { DateFnsDateRange } from "./dateFnsDate";
 import { DATE_FNS_FORMATS, DateFnsFormatSelector } from "./dateFnsFormatSelector";
@@ -38,6 +39,7 @@ export interface DateRangeInput2ExampleState {
     contiguousCalendarMonths: boolean;
     disabled: boolean;
     enableTimePicker: boolean;
+    fill: boolean;
     format: DateFormatProps;
     range: DateRange;
     reverseMonthAndYearMenus: boolean;
@@ -56,6 +58,7 @@ export class DateRangeInput2Example extends React.PureComponent<ExampleProps, Da
         contiguousCalendarMonths: true,
         disabled: false,
         enableTimePicker: false,
+        fill: false,
         format: DATE_FNS_FORMATS[0],
         range: [null, null],
         reverseMonthAndYearMenus: false,
@@ -73,6 +76,8 @@ export class DateRangeInput2Example extends React.PureComponent<ExampleProps, Da
 
     private toggleDisabled = handleBooleanChange(disabled => this.setState({ disabled }));
 
+    private toggleFill = handleBooleanChange(fill => this.setState({ fill }));
+
     private toggleReverseMonthAndYearMenus = handleBooleanChange(reverseMonthAndYearMenus =>
         this.setState({ reverseMonthAndYearMenus }),
     );
@@ -128,65 +133,96 @@ export class DateRangeInput2Example extends React.PureComponent<ExampleProps, Da
     }
 
     protected renderOptions() {
+        const {
+            allowSingleDayRange,
+            closeOnSelection,
+            contiguousCalendarMonths,
+            enableTimePicker,
+            disabled,
+            fill,
+            reverseMonthAndYearMenus,
+            selectAllOnFocus,
+            shortcuts,
+            showFooterElement,
+            showTimeArrowButtons,
+            singleMonthOnly,
+            timePrecision,
+        } = this.state;
         return (
             <>
-                <H5>Props</H5>
-                <Switch
-                    checked={this.state.allowSingleDayRange}
-                    label="Allow single day range"
-                    onChange={this.toggleSingleDay}
-                />
-                <Switch
-                    checked={this.state.singleMonthOnly}
-                    label="Single month only"
-                    onChange={this.toggleSingleMonth}
-                />
-                <Switch checked={this.state.shortcuts} label="Show shortcuts" onChange={this.toggleShortcuts} />
+                <H5>Behavior props</H5>
+                <PropCodeTooltip snippet={`closeOnSelection={${closeOnSelection.toString()}}`}>
+                    <Switch checked={closeOnSelection} label="Close on selection" onChange={this.toggleSelection} />
+                </PropCodeTooltip>
+                <PropCodeTooltip snippet={`selectAllOnFocus={${selectAllOnFocus.toString()}}`}>
+                    <Switch
+                        checked={selectAllOnFocus}
+                        label="Select all text on input focus"
+                        onChange={this.toggleSelectAllOnFocus}
+                    />
+                </PropCodeTooltip>
+
+                <H5>Date range picker props</H5>
+                <PropCodeTooltip snippet={`shortcuts={${shortcuts.toString()}}`}>
+                    <Switch checked={shortcuts} label="Show shortcuts" onChange={this.toggleShortcuts} />
+                </PropCodeTooltip>
+                <PropCodeTooltip snippet={`allowSingleDayRange={${allowSingleDayRange.toString()}}`}>
+                    <Switch
+                        checked={allowSingleDayRange}
+                        label="Allow single day range"
+                        onChange={this.toggleSingleDay}
+                    />
+                </PropCodeTooltip>
+                <PropCodeTooltip snippet={`singleMonthOnly={${singleMonthOnly.toString()}}`}>
+                    <Switch checked={singleMonthOnly} label="Single month only" onChange={this.toggleSingleMonth} />
+                </PropCodeTooltip>
+                <PropCodeTooltip snippet={`contiguousCalendarMonths={${contiguousCalendarMonths.toString()}}`}>
+                    <Switch
+                        checked={contiguousCalendarMonths}
+                        label="Constrain calendar to contiguous months"
+                        onChange={this.toggleContiguous}
+                    />
+                </PropCodeTooltip>
                 <Switch
-                    checked={this.state.closeOnSelection}
-                    label="Close on selection"
-                    onChange={this.toggleSelection}
-                />
-                <Switch
-                    checked={this.state.contiguousCalendarMonths}
-                    label="Constrain calendar to contiguous months"
-                    onChange={this.toggleContiguous}
-                />
-                <Switch checked={this.state.disabled} label="Disabled" onChange={this.toggleDisabled} />
-                <Switch
-                    checked={this.state.selectAllOnFocus}
-                    label="Select all on focus"
-                    onChange={this.toggleSelectAllOnFocus}
-                />
-                <Switch
-                    checked={this.state.reverseMonthAndYearMenus}
+                    checked={reverseMonthAndYearMenus}
                     label="Reverse month and year menus"
                     onChange={this.toggleReverseMonthAndYearMenus}
                 />
                 <Switch
-                    checked={this.state.showFooterElement}
+                    checked={showFooterElement}
                     label="Show custom footer element"
                     onChange={this.toggleShowFooterElement}
                 />
-                <Switch
-                    checked={this.state.enableTimePicker}
-                    label="Enable time picker"
-                    onChange={this.toggleTimePicker}
-                />
-                <Switch
-                    disabled={!this.state.enableTimePicker}
-                    checked={this.state.showTimeArrowButtons}
-                    label="Show timepicker arrow buttons"
-                    onChange={this.toggleTimepickerArrowButtons}
-                />
+
+                <H5>Input appearance props</H5>
+                <PropCodeTooltip snippet={`disabled={${disabled.toString()}}`}>
+                    <Switch checked={disabled} label="Disabled" onChange={this.toggleDisabled} />
+                </PropCodeTooltip>
+                <PropCodeTooltip snippet={`fill={${fill.toString()}}`}>
+                    <Switch label="Fill container width" checked={fill} onChange={this.toggleFill} />
+                </PropCodeTooltip>
+                <DateFnsFormatSelector format={this.state.format} onChange={this.handleFormatChange} />
+
+                <H5>Time picker props</H5>
+                <Switch checked={enableTimePicker} label="Enable time picker" onChange={this.toggleTimePicker} />
                 <PrecisionSelect
                     allowNone={false}
-                    disabled={!this.state.enableTimePicker}
+                    disabled={!enableTimePicker}
                     label="Time precision"
                     onChange={this.handleTimePrecisionChange}
-                    value={this.state.timePrecision}
+                    value={timePrecision}
                 />
-                <DateFnsFormatSelector key="Format" format={this.state.format} onChange={this.handleFormatChange} />
+                <PropCodeTooltip
+                    snippet={`timePickerProps={{ showArrowButtons: ${showTimeArrowButtons.toString()} }}`}
+                    disabled={!enableTimePicker}
+                >
+                    <Switch
+                        disabled={!enableTimePicker}
+                        checked={showTimeArrowButtons}
+                        label="Show timepicker arrow buttons"
+                        onChange={this.toggleTimepickerArrowButtons}
+                    />
+                </PropCodeTooltip>
             </>
         );
     }
diff --git a/packages/docs-app/src/styles/_examples.scss b/packages/docs-app/src/styles/_examples.scss
index e252a384e7..9fff8d4798 100644
--- a/packages/docs-app/src/styles/_examples.scss
+++ b/packages/docs-app/src/styles/_examples.scss
@@ -10,9 +10,9 @@
   @return '[data-page-id#{$comparator}"#{$ref}"]';
 }
 
-// Generate a selector for a React example by name
-@function example($NameExample, $comparator: "=") {
-  @return '[data-example-id#{$comparator}"#{$NameExample}"]';
+// Generate a selector for a React component example by name
+@function example($ComponentName, $comparator: "=") {
+  @return '[data-example-id#{$comparator}"#{$ComponentName}Example"]';
 }
 
 // Specific example customizations
@@ -32,13 +32,13 @@
   width: $pt-grid-size * 35;
 }
 
-#{example("ButtonsExample")} {
+#{example("Buttons")} {
   .docs-wiggle {
     animation: docs-wiggle-rotate $pt-transition-duration $pt-transition-ease infinite;
   }
 }
 
-#{example("EditableTextExample")} {
+#{example("EditableText")} {
   .docs-example {
     display: block;
   }
@@ -48,7 +48,7 @@
   }
 }
 
-#{example("FormGroupExample")} {
+#{example("FormGroup")} {
   .docs-example {
     flex-direction: column;
   }
@@ -58,11 +58,11 @@
   }
 }
 
-#{example("MenuExample")} .#{$ns}-menu {
+#{example("Menu")} .#{$ns}-menu {
   max-width: 280px;
 }
 
-#{example("DialogExample")} .docs-example-options {
+#{example("Dialog")} .docs-example-options {
   max-width: 260px;
 }
 
@@ -70,7 +70,7 @@
   min-height: 150px;
 }
 
-#{example("TagExample")} {
+#{example("Tag")} {
   .docs-example {
     flex-direction: column;
   }
@@ -214,7 +214,7 @@
   }
 }
 
-#{example("OverflowListExample")} {
+#{example("OverflowList")} {
   .#{$ns}-card {
     margin: 0;
     min-width: $pt-grid-size * 7;
@@ -261,8 +261,8 @@
   height: 200%;
 }
 
-#{example("Popover2Example")},
-#{example("PopoverExample")} {
+#{example("Popover2")},
+#{example("Popover")} {
   .docs-example {
     display: block;
     max-height: 785px;
@@ -287,8 +287,8 @@
   }
 }
 
-#{example("Popover2DismissExample")},
-#{example("PopoverDismissExample")} {
+#{example("Popover2Dismiss")},
+#{example("PopoverDismiss")} {
   height: 220px;
 
   .docs-reopen-message {
@@ -311,8 +311,8 @@
   }
 }
 
-#{example("PanelStack2Example")},
-#{example("PanelStackExample")} {
+#{example("PanelStack2")},
+#{example("PanelStack")} {
   .docs-panel-stack-example {
     box-shadow: $pt-elevation-shadow-0;
     height: 240px;
@@ -486,8 +486,8 @@
   line-height: $pt-navbar-height;
 }
 
-#{example("Tooltip2Example")},
-#{example("TooltipExample")} {
+#{example("Tooltip2")},
+#{example("Tooltip")} {
   .docs-example {
     flex-direction: column;
 
@@ -497,14 +497,14 @@
   }
 }
 
-#{example("ButtonGroupExample")},
-#{example("ButtonGroupPopoverExample")} {
+#{example("ButtonGroup")},
+#{example("ButtonGroupPopover")} {
   .docs-example > * {
     margin: 0;
   }
 }
 
-#{example("ToastExample")} {
+#{example("Toast")} {
   .docs-example {
     // necessary for inline Toaster (usePortal={false})
     position: relative;
@@ -523,7 +523,7 @@
     justify-content: center;
   }
 
-  #{example("TimezoneSelectExample")} .docs-example {
+  #{example("TimezoneSelect")} .docs-example {
     flex-direction: row;
   }
 }
@@ -533,7 +533,7 @@
   align-items: center;
 }
 
-#{example("DateInputExample")} {
+#{example("DateInput")} {
   .docs-example > * {
     margin: 0 0 20px;
   }
@@ -543,15 +543,22 @@
 // DATETIME2
 //
 
-#{example("DateInput2Example")} {
+#{example("DateInput2")} {
   .#{$ns}-date-input {
     // should not grow in vertical direction when fill={true}
     flex-grow: 0;
-    margin: 0;
     min-width: 300px;
   }
 }
 
+// these component examples have a "fill" prop option, which doesn't work nicely with the default margin
+#{example("DateInput2")}, #{example("DateRangeInput2")} {
+  .docs-example > * {
+    margin: 0;
+  }
+}
+
+
 //
 // TABLE
 //