palantir · adidahiya · Dec 12, 2022 · Dec 12, 2022
diff --git a/packages/core/src/components/forms/_label.scss b/packages/core/src/components/forms/_label.scss
@@ -1,7 +1,7 @@
 // Copyright 2015 Palantir Technologies, Inc. All rights reserved.
 // Licensed under the Apache License, Version 2.0.
 
-@import "../../common/variables";
+@import "../../common/variables-extended";
 
 /*
 Labels
@@ -49,12 +49,12 @@ label.#{$ns}-label {
   .#{$ns}-slider,
   .#{$ns}-popover-wrapper {
     display: block;
-    margin-top: $pt-grid-size * 0.5;
+    margin-top: $half-grid-size;
     text-transform: none;
   }
 
   .#{$ns}-button-group {
-    margin-top: $pt-grid-size * 0.5;
+    margin-top: $half-grid-size;
   }
 
   .#{$ns}-select select,
@@ -64,6 +64,19 @@ label.#{$ns}-label {
     width: 100%;
   }
 
+  .#{$ns}-control-group {
+    margin-top: $half-grid-size;
+
+    > .#{$ns}-button-group,
+    > .#{$ns}-html-select,
+    > .#{$ns}-input,
+    > .#{$ns}-select,
+    > .#{$ns}-slider,
+    > .#{$ns}-popover-wrapper {
+      margin-top: 0;
+    }
+  }
+
   &.#{$ns}-disabled {
     &,
     .#{$ns}-text-muted {
@@ -80,12 +93,12 @@ label.#{$ns}-label {
     .#{$ns}-select,
     .#{$ns}-popover-wrapper {
       display: inline-block;
-      margin: 0 0 0 ($pt-grid-size * 0.5);
+      margin: 0 0 0 $half-grid-size;
       vertical-align: top;
     }
 
     .#{$ns}-button-group {
-      margin: 0 0 0 ($pt-grid-size * 0.5);
+      margin: 0 0 0 $half-grid-size;
     }
 
     .#{$ns}-input-group .#{$ns}-input {
@@ -95,6 +108,19 @@ label.#{$ns}-label {
     &.#{$ns}-large {
       line-height: $pt-input-height-large;
     }
+
+    .#{$ns}-control-group {
+      margin: 0 0 0 $half-grid-size;
+
+      > .#{$ns}-button-group,
+      > .#{$ns}-html-select,
+      > .#{$ns}-input,
+      > .#{$ns}-select,
+      > .#{$ns}-slider,
+      > .#{$ns}-popover-wrapper {
+        margin: 0;
+      }
+    }
   }
 
   &:not(.#{$ns}-inline) .#{$ns}-popover-target {

diff --git a/packages/docs-app/src/examples/core-examples/buttonGroupExample.tsx b/packages/docs-app/src/examples/core-examples/buttonGroupExample.tsx
@@ -17,7 +17,7 @@
 import * as React from "react";
 
 import { Alignment, AnchorButton, Button, ButtonGroup, Classes, H5, Icon, Intent, Switch } from "@blueprintjs/core";
-import { Example, ExampleProps, handleBooleanChange, handleValueChange } from "@blueprintjs/docs-theme";
+import { Example, ExampleProps, handleBooleanChange } from "@blueprintjs/docs-theme";
 import { Tooltip2 } from "@blueprintjs/popover2";
 
 import { AlignmentSelect } from "./common/alignmentSelect";
@@ -48,7 +48,7 @@ export class ButtonGroupExample extends React.PureComponent<ExampleProps, IButto
 
     private handleIconOnlyChange = handleBooleanChange(iconOnly => this.setState({ iconOnly }));
 
-    private handleIntentChange = handleValueChange((intent: Intent) => this.setState({ intent }));
+    private handleIntentChange = (intent: Intent) => this.setState({ intent });
 
     private handleLargeChange = handleBooleanChange(large => this.setState({ large }));
 

diff --git a/packages/docs-app/src/examples/core-examples/buttonsExample.tsx b/packages/docs-app/src/examples/core-examples/buttonsExample.tsx
@@ -17,7 +17,7 @@
 import * as React from "react";
 
 import { AnchorButton, Button, Code, H5, Intent, Switch } from "@blueprintjs/core";
-import { Example, ExampleProps, handleBooleanChange, handleValueChange } from "@blueprintjs/docs-theme";
+import { Example, ExampleProps, handleBooleanChange } from "@blueprintjs/docs-theme";
 
 import { IntentSelect } from "./common/intentSelect";
 import { Size, SizeSelect } from "./common/sizeSelect";
@@ -61,7 +61,7 @@ export class ButtonsExample extends React.PureComponent<ExampleProps, IButtonsEx
 
     private handleSizeChange = (size: Size) => this.setState({ size });
 
-    private handleIntentChange = handleValueChange((intent: Intent) => this.setState({ intent }));
+    private handleIntentChange = (intent: Intent) => this.setState({ intent });
 
     private wiggleTimeoutId: number;
 

diff --git a/packages/docs-app/src/examples/core-examples/calloutExample.tsx b/packages/docs-app/src/examples/core-examples/calloutExample.tsx
@@ -17,7 +17,7 @@
 import * as React from "react";
 
 import { Callout, Code, H5, Intent, Switch } from "@blueprintjs/core";
-import { Example, handleBooleanChange, handleValueChange, IDocsExampleProps } from "@blueprintjs/docs-theme";
+import { Example, handleBooleanChange, IDocsExampleProps } from "@blueprintjs/docs-theme";
 import { IconName } from "@blueprintjs/icons";
 
 import { IconSelect } from "./common/iconSelect";
@@ -36,7 +36,7 @@ export class CalloutExample extends React.PureComponent<IDocsExampleProps, ICall
 
     private handleIconNameChange = (icon: IconName) => this.setState({ icon });
 
-    private handleIntentChange = handleValueChange((intent: Intent) => this.setState({ intent }));
+    private handleIntentChange = (intent: Intent) => this.setState({ intent });
 
     public render() {
         const { showHeader, ...calloutProps } = this.state;

diff --git a/packages/docs-app/src/examples/core-examples/common/intentSelect.tsx b/packages/docs-app/src/examples/core-examples/common/intentSelect.tsx
@@ -16,7 +16,8 @@
 
 import * as React from "react";
 
-import { HTMLSelect, Intent, Label } from "@blueprintjs/core";
+import { Button, ControlGroup, HTMLSelect, Intent, Label } from "@blueprintjs/core";
+import { handleValueChange } from "@blueprintjs/docs-theme";
 
 const INTENTS = [
     { label: "None", value: Intent.NONE },
@@ -29,15 +30,26 @@ const INTENTS = [
 export interface IIntentSelectProps {
     intent: Intent;
     label?: React.ReactNode;
-    onChange: React.FormEventHandler<HTMLSelectElement>;
+    onChange: (intent: Intent) => void;
+    /** @default false */
+    showClearButton?: boolean;
 }
 
-export const IntentSelect: React.FC<IIntentSelectProps> = props => (
-    <Label>
-        {props.label}
-        <HTMLSelect value={props.intent} onChange={props.onChange} options={INTENTS} />
-    </Label>
-);
+export const IntentSelect: React.FC<IIntentSelectProps> = props => {
+    const handleChange = handleValueChange(props.onChange);
+    const handleClear = React.useCallback(() => props.onChange("none"), []);
+    return (
+        <Label>
+            {props.label}
+            <ControlGroup>
+                <HTMLSelect value={props.intent} onChange={handleChange} options={INTENTS} fill={true} />
+                {props.showClearButton && (
+                    <Button aria-label="Clear" disabled={props.intent === "none"} icon="cross" onClick={handleClear} />
+                )}
+            </ControlGroup>
+        </Label>
+    );
+};
 IntentSelect.defaultProps = {
     label: "Intent",
 };
diff --git a/packages/docs-app/src/examples/core-examples/editableTextExample.tsx b/packages/docs-app/src/examples/core-examples/editableTextExample.tsx
@@ -17,7 +17,7 @@
 import * as React from "react";
 
 import { Classes, EditableText, FormGroup, H1, H5, Intent, NumericInput, Switch } from "@blueprintjs/core";
-import { Example, ExampleProps, handleBooleanChange, handleValueChange } from "@blueprintjs/docs-theme";
+import { Example, ExampleProps, handleBooleanChange } from "@blueprintjs/docs-theme";
 
 import { IntentSelect } from "./common/intentSelect";
 
@@ -44,7 +44,7 @@ export class EditableTextExample extends React.PureComponent<ExampleProps, IEdit
 
     private toggleDisabled = handleBooleanChange((disabled: boolean) => this.setState({ disabled }));
 
-    private handleIntentChange = handleValueChange((intent: Intent) => this.setState({ intent }));
+    private handleIntentChange = (intent: Intent) => this.setState({ intent });
 
     private toggleSelectAll = handleBooleanChange(selectAllOnFocus => this.setState({ selectAllOnFocus }));
 

diff --git a/packages/docs-app/src/examples/core-examples/formGroupExample.tsx b/packages/docs-app/src/examples/core-examples/formGroupExample.tsx
@@ -17,7 +17,7 @@
 import * as React from "react";
 
 import { FormGroup, H5, InputGroup, Intent, Switch } from "@blueprintjs/core";
-import { Example, ExampleProps, handleBooleanChange, handleValueChange } from "@blueprintjs/docs-theme";
+import { Example, ExampleProps, handleBooleanChange } from "@blueprintjs/docs-theme";
 
 import { IntentSelect } from "./common/intentSelect";
 
@@ -54,7 +54,7 @@ export class FormGroupExample extends React.PureComponent<ExampleProps, IFormGro
 
     private handleSubLabelChange = handleBooleanChange(subLabel => this.setState({ subLabel }));
 
-    private handleIntentChange = handleValueChange((intent: Intent) => this.setState({ intent }));
+    private handleIntentChange = (intent: Intent) => this.setState({ intent });
 
     public render() {
         const { disabled, helperText, inline, intent, label, subLabel, requiredLabel } = this.state;

diff --git a/packages/docs-app/src/examples/core-examples/iconExample.tsx b/packages/docs-app/src/examples/core-examples/iconExample.tsx
@@ -17,7 +17,7 @@
 import * as React from "react";
 
 import { H5, Icon, IconSize, Intent, Label, Slider } from "@blueprintjs/core";
-import { Example, ExampleProps, handleValueChange } from "@blueprintjs/docs-theme";
+import { Example, ExampleProps } from "@blueprintjs/docs-theme";
 import { IconName } from "@blueprintjs/icons";
 
 import { IconSelect } from "./common/iconSelect";
@@ -36,7 +36,7 @@ export class IconExample extends React.PureComponent<ExampleProps, IIconExampleS
         intent: Intent.NONE,
     };
 
-    private handleIntentChange = handleValueChange((intent: Intent) => this.setState({ intent }));
+    private handleIntentChange = (intent: Intent) => this.setState({ intent });
 
     private handleIconSizeChange = (iconSize: number) => this.setState({ iconSize });
 

diff --git a/packages/docs-app/src/examples/core-examples/menuItemExample.tsx b/packages/docs-app/src/examples/core-examples/menuItemExample.tsx
@@ -17,7 +17,7 @@
 import * as React from "react";
 
 import { Classes, H5, Intent, Menu, MenuItem, Switch } from "@blueprintjs/core";
-import { Example, ExampleProps, handleBooleanChange, handleValueChange } from "@blueprintjs/docs-theme";
+import { Example, ExampleProps, handleBooleanChange } from "@blueprintjs/docs-theme";
 
 import { IntentSelect } from "./common/intentSelect";
 
@@ -37,7 +37,7 @@ export function MenuItemExample(props: ExampleProps) {
             <Switch label="Selected" checked={selected} onChange={handleBooleanChange(setSelected)} />
             <Switch label="Enable icon" checked={iconEnabled} onChange={handleBooleanChange(setIconEnabled)} />
             <Switch label="Enable submenu" checked={submenuEnabled} onChange={handleBooleanChange(setSubmenuEnabled)} />
-            <IntentSelect intent={intent} onChange={handleValueChange(setIntent)} />
+            <IntentSelect intent={intent} onChange={setIntent} />
         </>
     );
 

diff --git a/packages/docs-app/src/examples/core-examples/numericInputBasicExample.tsx b/packages/docs-app/src/examples/core-examples/numericInputBasicExample.tsx
@@ -85,7 +85,7 @@ export class NumericInputBasicExample extends React.PureComponent<ExampleProps,
 
     private handleMinChange = handleNumberChange(min => this.setState({ min }));
 
-    private handleIntentChange = handleValueChange((intent: Intent) => this.setState({ intent }));
+    private handleIntentChange = (intent: Intent) => this.setState({ intent });
 
     private handleButtonPositionChange = handleValueChange((buttonPosition: NumericInputProps["buttonPosition"]) =>
         this.setState({ buttonPosition }),

diff --git a/packages/docs-app/src/examples/core-examples/progressExample.tsx b/packages/docs-app/src/examples/core-examples/progressExample.tsx
@@ -17,7 +17,7 @@
 import * as React from "react";
 
 import { H5, Intent, ProgressBar, Slider, Switch } from "@blueprintjs/core";
-import { Example, ExampleProps, handleBooleanChange, handleValueChange } from "@blueprintjs/docs-theme";
+import { Example, ExampleProps, handleBooleanChange } from "@blueprintjs/docs-theme";
 
 import { IntentSelect } from "./common/intentSelect";
 
@@ -35,15 +35,15 @@ export class ProgressExample extends React.PureComponent<ExampleProps, IProgress
 
     private handleIndeterminateChange = handleBooleanChange(hasValue => this.setState({ hasValue }));
 
-    private handleModifierChange = handleValueChange((intent: Intent) => this.setState({ intent }));
+    private handleIntentChange = (intent: Intent) => this.setState({ intent });
 
     public render() {
         const { hasValue, intent, value } = this.state;
 
         const options = (
             <>
                 <H5>Props</H5>
-                <IntentSelect intent={intent} onChange={this.handleModifierChange} />
+                <IntentSelect intent={intent} onChange={this.handleIntentChange} />
                 <Switch checked={hasValue} label="Known value" onChange={this.handleIndeterminateChange} />
                 <Slider
                     disabled={!hasValue}

diff --git a/packages/docs-app/src/examples/core-examples/spinnerExample.tsx b/packages/docs-app/src/examples/core-examples/spinnerExample.tsx
@@ -17,7 +17,7 @@
 import * as React from "react";
 
 import { H5, Intent, Label, Slider, Spinner, SpinnerSize, Switch } from "@blueprintjs/core";
-import { Example, ExampleProps, handleBooleanChange, handleValueChange } from "@blueprintjs/docs-theme";
+import { Example, ExampleProps, handleBooleanChange } from "@blueprintjs/docs-theme";
 
 import { IntentSelect } from "./common/intentSelect";
 
@@ -37,7 +37,7 @@ export class SpinnerExample extends React.PureComponent<ExampleProps, ISpinnerEx
 
     private handleIndeterminateChange = handleBooleanChange(hasValue => this.setState({ hasValue }));
 
-    private handleModifierChange = handleValueChange((intent: Intent) => this.setState({ intent }));
+    private handleIntentChange = (intent: Intent) => this.setState({ intent });
 
     public render() {
         const { size, hasValue, intent, value } = this.state;
@@ -60,7 +60,7 @@ export class SpinnerExample extends React.PureComponent<ExampleProps, ISpinnerEx
         return (
             <>
                 <H5>Props</H5>
-                <IntentSelect intent={intent} onChange={this.handleModifierChange} />
+                <IntentSelect intent={intent} onChange={this.handleIntentChange} />
                 <Label id={this.spinnerSizeLabelId}>Size</Label>
                 <Slider
                     labelStepSize={50}

diff --git a/packages/docs-app/src/examples/core-examples/tagExample.tsx b/packages/docs-app/src/examples/core-examples/tagExample.tsx
@@ -17,7 +17,7 @@
 import * as React from "react";
 
 import { Button, H5, Intent, Switch, Tag } from "@blueprintjs/core";
-import { Example, ExampleProps, handleBooleanChange, handleValueChange } from "@blueprintjs/docs-theme";
+import { Example, ExampleProps, handleBooleanChange } from "@blueprintjs/docs-theme";
 
 import { IntentSelect } from "./common/intentSelect";
 
@@ -52,7 +52,7 @@ export class TagExample extends React.PureComponent<ExampleProps, ITagExampleSta
 
     private handleIconChange = handleBooleanChange(icon => this.setState({ icon }));
 
-    private handleIntentChange = handleValueChange((intent: Intent) => this.setState({ intent }));
+    private handleIntentChange = (intent: Intent) => this.setState({ intent });
 
     private handleInteractiveChange = handleBooleanChange(interactive => this.setState({ interactive }));
 

diff --git a/packages/docs-app/src/examples/core-examples/tagInputExample.tsx b/packages/docs-app/src/examples/core-examples/tagInputExample.tsx
@@ -17,7 +17,7 @@
 import * as React from "react";
 
 import { Button, H5, Intent, Switch, TagInput, TagProps } from "@blueprintjs/core";
-import { Example, ExampleProps, handleBooleanChange, handleValueChange } from "@blueprintjs/docs-theme";
+import { Example, ExampleProps, handleBooleanChange } from "@blueprintjs/docs-theme";
 
 import { IntentSelect } from "./common/intentSelect";
 
@@ -69,7 +69,7 @@ export class TagInputExample extends React.PureComponent<ExampleProps, ITagInput
 
     private handleFillChange = handleBooleanChange(fill => this.setState({ fill }));
 
-    private handleIntentChange = handleValueChange((intent: Intent) => this.setState({ intent }));
+    private handleIntentChange = (intent: Intent) => this.setState({ intent });
 
     private handleLargeChange = handleBooleanChange(large => this.setState({ large }));
 

diff --git a/packages/docs-app/src/examples/popover2-examples/menuItem2Example.tsx b/packages/docs-app/src/examples/popover2-examples/menuItem2Example.tsx
@@ -26,6 +26,7 @@ import { BooleanOrUndefinedSelect } from "./booleanOrUndefinedSelect";
 
 export function MenuItem2Example(props: ExampleProps) {
     const [large, setLarge] = React.useState(false);
+    const [active, setActive] = React.useState(false);
     const [disabled, setDisabled] = React.useState(false);
     const [selected, setSelected] = React.useState<boolean | undefined>(undefined);
     const [intent, setIntent] = React.useState<Intent>("none");
@@ -37,8 +38,10 @@ export function MenuItem2Example(props: ExampleProps) {
 
     const options = (
         <>
-            <H5>Props</H5>
+            <H5>Menu props</H5>
             <Switch label="Large" checked={large} onChange={handleBooleanChange(setLarge)} />
+            <H5>MenuItem2 props</H5>
+            <Switch label="Active" checked={active} onChange={handleBooleanChange(setActive)} />
             <Switch label="Disabled" checked={disabled} onChange={handleBooleanChange(setDisabled)} />
             <PropCodeTooltip
                 content={
@@ -59,7 +62,7 @@ export function MenuItem2Example(props: ExampleProps) {
             </PropCodeTooltip>
             <Switch label="Enable icon" checked={iconEnabled} onChange={handleBooleanChange(setIconEnabled)} />
             <Switch label="Enable submenu" checked={submenuEnabled} onChange={handleBooleanChange(setSubmenuEnabled)} />
-            <IntentSelect intent={intent} onChange={handleValueChange(setIntent)} />
+            <IntentSelect intent={intent} onChange={setIntent} showClearButton={true} />
             <Label>
                 Role structure
                 <HTMLSelect
@@ -75,6 +78,7 @@ export function MenuItem2Example(props: ExampleProps) {
         <Example className="docs-menu-example" options={options} {...props}>
             <Menu className={Classes.ELEVATION_1} large={large}>
                 <MenuItem2
+                    active={active}
                     disabled={disabled}
                     icon={iconEnabled ? "cog" : undefined}
                     intent={intent}