[select] feat(Select): new prop "fill" (#4843)

Co-authored-by: Adi Dahiya <adahiya@palantir.com>
palantir · Aug 24, 2021 · 2db16b0 · 2db16b0 · blueprint-bot · Aug 24, 2021
1 parent f8a11af
commit 2db16b0
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 1 deletion.
diff --git a/packages/docs-app/src/common/filmSelect.tsx b/packages/docs-app/src/common/filmSelect.tsx
@@ -46,7 +46,7 @@ type Props = Omit<
 };
 
 // eslint-disable-next-line import/no-default-export
-export default function ({ allowCreate = false, ...restProps }: Props) {
+export default function ({ allowCreate = false, fill, ...restProps }: Props) {
     const maybeCreateNewItemFromQuery = allowCreate ? createFilm : undefined;
     const maybeCreateNewItemRenderer = allowCreate ? renderCreateFilmOption : null;
 
@@ -72,13 +72,15 @@ export default function ({ allowCreate = false, ...restProps }: Props) {
             noResults={<MenuItem disabled={true} text="No results." />}
             onItemSelect={handleItemSelect}
             items={items}
+            fill={fill}
             {...restProps}
         >
             <Button
                 icon="film"
                 rightIcon="caret-down"
                 text={film ? `${film.title} (${film.year})` : "(No selection)"}
                 disabled={restProps.disabled}
+                fill={fill}
             />
         </FilmSelect>
     );

diff --git a/packages/docs-app/src/examples/select-examples/selectExample.tsx b/packages/docs-app/src/examples/select-examples/selectExample.tsx
@@ -26,6 +26,7 @@ export interface ISelectExampleState {
     allowCreate: boolean;
     createFirst: boolean;
     createdItems: IFilm[];
+    fill: boolean;
     filterable: boolean;
     hasInitialContent: boolean;
     minimal: boolean;
@@ -44,6 +45,7 @@ export class SelectExample extends React.PureComponent<IExampleProps, ISelectExa
         createdItems: [],
         disableItems: false,
         disabled: false,
+        fill: false,
         filterable: true,
         hasInitialContent: false,
         matchTargetWidth: false,
@@ -59,6 +61,8 @@ export class SelectExample extends React.PureComponent<IExampleProps, ISelectExa
 
     private handleDisabledChange = this.handleSwitchChange("disabled");
 
+    private handleFillChange = this.handleSwitchChange("fill");
+
     private handleFilterableChange = this.handleSwitchChange("filterable");
 
     private handleInitialContentChange = this.handleSwitchChange("hasInitialContent");
@@ -118,6 +122,7 @@ export class SelectExample extends React.PureComponent<IExampleProps, ISelectExa
                     checked={this.state.resetOnSelect}
                     onChange={this.handleResetOnSelectChange}
                 />
+                <Switch label="Fill container width" checked={this.state.fill} onChange={this.handleFillChange} />
                 <Switch
                     label="Use initial content"
                     checked={this.state.hasInitialContent}

diff --git a/packages/select/src/components/select/select.tsx b/packages/select/src/components/select/select.tsx
@@ -39,6 +39,13 @@ import { IQueryListRendererProps, QueryList } from "../query-list/queryList";
 export type SelectProps<T> = ISelectProps<T>;
 /** @deprecated use SelectProps */
 export interface ISelectProps<T> extends IListItemsProps<T> {
+    /**
+     * Whether the component should take up the full width of its container.
+     * This overrides `popoverProps.fill`. You also have to ensure that the child
+     * component has `fill` set to `true` or is styled appropriately.
+     */
+    fill?: boolean;
+
     /**
      * Whether the dropdown list can be filtered.
      * Disabling this option will remove the `InputGroup` and ignore `inputProps`.
@@ -140,13 +147,18 @@ export class Select<T> extends AbstractPureComponent2<SelectProps<T>, ISelectSta
     private renderQueryList = (listProps: IQueryListRendererProps<T>) => {
         // not using defaultProps cuz they're hard to type with generics (can't use <T> on static members)
         const {
+            fill,
             filterable = true,
             disabled = false,
             inputProps = {},
             popoverProps = {},
             matchTargetWidth,
         } = this.props;
 
+        if (fill) {
+            popoverProps.fill = true;
+        }
+
         if (matchTargetWidth) {
             if (popoverProps.modifiers == null) {
                 popoverProps.modifiers = {};