@itwin/itwinui-react 3.5.0 → 3.6.1

package/CHANGELOG.md

@@ -1,5 +1,39 @@
 # Changelog
 
+## 3.6.1
+
+### Patch Changes
+
+- [#1909](https://github.com/iTwin/iTwinUI/pull/1909): Remove `margin-block` from `Badge`.
+
+## 3.6.0
+
+### Minor Changes
+
+- [#1879](https://github.com/iTwin/iTwinUI/pull/1879): Added a new `native` prop to `Select` and `LabeledSelect`. When true, a native `<select>` element will be rendered.
+- [#1886](https://github.com/iTwin/iTwinUI/pull/1886): Native `Select` (`<Select native>`) offers a new `styleType` prop that accepts the values: `default` (pre-existing) and `borderless` (new).
+- [#1877](https://github.com/iTwin/iTwinUI/pull/1877): Fixed a bug in `LabeledSelect` where nested `<StatusMessage>`s were rendered when using `message={<StatusMessage>}`. As a result, non-string `message` values are no longer automatically wrapped in `<StatusMessage>`.
+  - If you were passing a custom `ReactNode`, you might need to wrap it with `<StatusMessage>` for proper styling of `message`.
+- [#1881](https://github.com/iTwin/iTwinUI/pull/1881): Added a new subcomponent `InputWithDecorations.Icon` to replace direct usage of `Icon` inside `InputWithDecorations`.
+- Visual changes:
+  - [#1828](https://github.com/iTwin/iTwinUI/pull/1828): Inline padding of `Icon` no longer changes with the icon size. It is now a constant of `--iui-size-xs`.
+  - [#1881](https://github.com/iTwin/iTwinUI/pull/1881): `Input`'s and `Textarea`'s start/end inline padding when inside `InputWithDecorations` is now collapsed when it is preceded/followed by a `InputWithDecorations.Icon` or `InputWithDecorations.Button`. This prevents unnecessary empty space in `InputWithDecorations`.
+  - [#1888](https://github.com/iTwin/iTwinUI/pull/1888): The expandable `SearchBox` now shows a regular-sized button in the collapsed state. Previously, it used to incorrectly be a square button.
+  - [#1828](https://github.com/iTwin/iTwinUI/pull/1828): `SearchBox.Icon` no longer has the same width as `SearchBox.Button`. Its width also no longer changes with the `SearchBox` size. This is because its padding behavior is now similar to `Icon`'s padding behavior, where it uses a constant padding.
+  - [#1897](https://github.com/iTwin/iTwinUI/pull/1897): All instances of `<SvgStatusError>` have been updated to reflect the new octagon shape from the latest version of iTwinUI-icons. Some components affected: `Icon`, `Alert`, `Toast`, `StatusMessage`.
+  - [#1888](https://github.com/iTwin/iTwinUI/pull/1888): The expandable `SearchBox`'s animation/transition between the expanded and the collapsed states is now removed.
+
+### Patch Changes
+
+- [#1865](https://github.com/iTwin/iTwinUI/pull/1865): `Dialog`/`Modal` will no longer keep its wrapper in the DOM when `isOpen=false`.
+- [#1889](https://github.com/iTwin/iTwinUI/pull/1889): `Dialog`/`Modal`'s close button will now be visually aligned based on the icon inside it, excluding the padding.
+- [#1906](https://github.com/iTwin/iTwinUI/pull/1906): `Dialog`/`Modal` title will now wrap to multiple lines instead of getting clippped.
+- [#1873](https://github.com/iTwin/iTwinUI/pull/1873): Fixed `Tab` stripe size and position calculation that sometimes used to cause unnecessary overflow and thus cause a horizontal scrollbar in `TabList`.
+- [#1884](https://github.com/iTwin/iTwinUI/pull/1884): Fixed a bug that caused the `Tabs.Wrapper` to change size dependent on which `Tabs.Tab` was active.
+- [#1901](https://github.com/iTwin/iTwinUI/pull/1901): Fixed a bug in `Table` where `initialState.columnOrder` was not being respected.
+- [#1894](https://github.com/iTwin/iTwinUI/pull/1894): All instances of `box-sizing: content-box` have been reinforced with `!important` to prevent accidental overrides from application styles.
+- [#1828](https://github.com/iTwin/iTwinUI/pull/1828): `InputWithDecorations` now has an inline padding of `1px` to account for the `1px` border's inline edges. This prevents content that touches the border's inline edges from being overlapped by the border by `1px`. Slightly modified expandable `SearchBox` styles to account for the new padding.
+
 ## 3.5.0
 
 ### Minor Changes

package/cjs/core/Carousel/Carousel.d.ts

@@ -48,7 +48,7 @@ export declare const Carousel: PolymorphicForwardRefComponent<"section", Carouse
             labelProps?: Omit<Omit<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
                 ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
             }, "as" | "children" | "content" | "portal" | keyof {
-                placement?: import("@floating-ui/utils").Placement | undefined;
+                placement?: import("@floating-ui/core").Placement | undefined;
                 visible?: boolean | undefined;
                 onVisibleChange?: ((visible: boolean) => void) | undefined;
                 autoUpdateOptions?: {
@@ -92,7 +92,7 @@ export declare const Carousel: PolymorphicForwardRefComponent<"section", Carouse
                  */
                 children?: React.ReactNode;
             } & import("../utils/index.js").PortalProps & {
-                placement?: import("@floating-ui/utils").Placement | undefined;
+                placement?: import("@floating-ui/core").Placement | undefined;
                 visible?: boolean | undefined;
                 onVisibleChange?: ((visible: boolean) => void) | undefined;
                 autoUpdateOptions?: {
@@ -129,7 +129,7 @@ export declare const Carousel: PolymorphicForwardRefComponent<"section", Carouse
             labelProps?: Omit<Omit<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
                 ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
             }, "as" | "children" | "content" | "portal" | keyof {
-                placement?: import("@floating-ui/utils").Placement | undefined;
+                placement?: import("@floating-ui/core").Placement | undefined;
                 visible?: boolean | undefined;
                 onVisibleChange?: ((visible: boolean) => void) | undefined;
                 autoUpdateOptions?: {
@@ -173,7 +173,7 @@ export declare const Carousel: PolymorphicForwardRefComponent<"section", Carouse
                  */
                 children?: React.ReactNode;
             } & import("../utils/index.js").PortalProps & {
-                placement?: import("@floating-ui/utils").Placement | undefined;
+                placement?: import("@floating-ui/core").Placement | undefined;
                 visible?: boolean | undefined;
                 onVisibleChange?: ((visible: boolean) => void) | undefined;
                 autoUpdateOptions?: {

package/cjs/core/Carousel/CarouselNavigation.d.ts

@@ -15,7 +15,7 @@ export declare const CarouselNavigation: PolymorphicForwardRefComponent<"div", {
         labelProps?: Omit<Omit<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
             ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
         }, "as" | "children" | "content" | "portal" | keyof {
-            placement?: import("@floating-ui/utils").Placement | undefined;
+            placement?: import("@floating-ui/core").Placement | undefined;
             visible?: boolean | undefined;
             onVisibleChange?: ((visible: boolean) => void) | undefined;
             autoUpdateOptions?: {
@@ -41,7 +41,7 @@ export declare const CarouselNavigation: PolymorphicForwardRefComponent<"div", {
             content: React.ReactNode;
             children?: React.ReactNode;
         } & import("../utils/index.js").PortalProps & {
-            placement?: import("@floating-ui/utils").Placement | undefined;
+            placement?: import("@floating-ui/core").Placement | undefined;
             visible?: boolean | undefined;
             onVisibleChange?: ((visible: boolean) => void) | undefined;
             autoUpdateOptions?: {
@@ -78,7 +78,7 @@ export declare const CarouselNavigation: PolymorphicForwardRefComponent<"div", {
         labelProps?: Omit<Omit<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
             ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
         }, "as" | "children" | "content" | "portal" | keyof {
-            placement?: import("@floating-ui/utils").Placement | undefined;
+            placement?: import("@floating-ui/core").Placement | undefined;
             visible?: boolean | undefined;
             onVisibleChange?: ((visible: boolean) => void) | undefined;
             autoUpdateOptions?: {
@@ -104,7 +104,7 @@ export declare const CarouselNavigation: PolymorphicForwardRefComponent<"div", {
             content: React.ReactNode;
             children?: React.ReactNode;
         } & import("../utils/index.js").PortalProps & {
-            placement?: import("@floating-ui/utils").Placement | undefined;
+            placement?: import("@floating-ui/core").Placement | undefined;
             visible?: boolean | undefined;
             onVisibleChange?: ((visible: boolean) => void) | undefined;
             autoUpdateOptions?: {

package/cjs/core/Dialog/Dialog.js

@@ -40,26 +40,28 @@ const DialogContext_js_1 = require("./DialogContext.js");
 const DialogButtonBar_js_1 = require("./DialogButtonBar.js");
 const DialogMain_js_1 = require("./DialogMain.js");
 const index_js_1 = require("../utils/index.js");
+const react_transition_group_1 = require("react-transition-group");
 const DialogComponent = React.forwardRef((props, ref) => {
     const { trapFocus = false, setFocus = false, preventDocumentScroll = false, isOpen = false, isDismissible = true, closeOnEsc = true, closeOnExternalClick = false, onClose, isDraggable = false, isResizable = false, relativeTo = 'viewport', placement, className, portal = false, ...rest } = props;
     const dialogRootRef = React.useRef(null);
-    return (React.createElement(DialogContext_js_1.DialogContext.Provider, { value: {
-            isOpen,
-            onClose,
-            closeOnEsc,
-            closeOnExternalClick,
-            isDismissible,
-            preventDocumentScroll,
-            trapFocus,
-            setFocus,
-            isDraggable,
-            isResizable,
-            relativeTo,
-            dialogRootRef,
-            placement,
-        } },
-        React.createElement(index_js_1.Portal, { portal: portal },
-            React.createElement(index_js_1.Box, { className: (0, classnames_1.default)('iui-dialog-wrapper', className), "data-iui-relative": relativeTo === 'container', ref: (0, index_js_1.useMergedRefs)(ref, dialogRootRef), ...rest }))));
+    return (React.createElement(react_transition_group_1.Transition, { in: isOpen, timeout: { exit: 600 }, mountOnEnter: true, unmountOnExit: true },
+        React.createElement(DialogContext_js_1.DialogContext.Provider, { value: {
+                isOpen,
+                onClose,
+                closeOnEsc,
+                closeOnExternalClick,
+                isDismissible,
+                preventDocumentScroll,
+                trapFocus,
+                setFocus,
+                isDraggable,
+                isResizable,
+                relativeTo,
+                dialogRootRef,
+                placement,
+            } },
+            React.createElement(index_js_1.Portal, { portal: portal },
+                React.createElement(index_js_1.Box, { className: (0, classnames_1.default)('iui-dialog-wrapper', className), "data-iui-relative": relativeTo === 'container', ref: (0, index_js_1.useMergedRefs)(ref, dialogRootRef), ...rest })))));
 });
 /**
  * Dialog component.

package/cjs/core/Dialog/DialogContext.d.ts

@@ -3,6 +3,10 @@ import type { PortalProps } from '../utils/index.js';
 export type DialogContextProps = {
     /**
      * Flag whether dialog should be shown.
+     *
+     * It is recommended to directly pass the boolean condition to this prop instead of rendering the `Dialog`
+     * conditionally with `isOpen` hard-coded to `true`. One benefit of this is getting an exit animation.
+     *
      * @default false
      */
     isOpen?: boolean;

package/cjs/core/Dialog/DialogMain.js

@@ -149,7 +149,7 @@ exports.DialogMain = React.forwardRef((props, ref) => {
                     }
                 }, onResizeEnd: setResizeStyle }))),
         children));
-    return (React.createElement(react_transition_group_1.Transition, { in: isOpen, timeout: { exit: 600 }, 
+    return (React.createElement(react_transition_group_1.Transition, { in: isOpen, appear: true, timeout: { exit: 600 }, 
         // Focuses dialog when opened
         onEntered: () => {
             previousFocusedElement.current = dialogRef.current?.ownerDocument

package/cjs/core/Dialog/DialogTitleBar.js

@@ -63,7 +63,7 @@ exports.DialogTitleBar = Object.assign(React.forwardRef((props, ref) => {
             'iui-dialog-title-bar-filled': isDraggable,
         }), ref: ref, onPointerDown: (0, index_js_1.mergeEventHandlers)(onPointerDownProp, onPointerDown), ...rest }, children ? (children) : (React.createElement(React.Fragment, null,
         React.createElement(DialogTitleBarTitle_js_1.DialogTitleBarTitle, null, titleText),
-        isDismissible && (React.createElement(IconButton_js_1.IconButton, { size: 'small', styleType: 'borderless', onClick: onClose, "aria-label": 'Close' },
+        isDismissible && (React.createElement(IconButton_js_1.IconButton, { size: 'small', styleType: 'borderless', onClick: onClose, "aria-label": 'Close', "data-iui-shift": 'right' },
             React.createElement(index_js_1.SvgClose, null)))))));
 }), {
     Title: DialogTitleBarTitle_js_1.DialogTitleBarTitle,

package/cjs/core/InputGroup/InputGroup.d.ts

@@ -12,6 +12,10 @@ type InputGroupProps = {
     status?: 'positive' | 'warning' | 'negative';
     /**
      * Message below the group. Does not apply to 'inline' group.
+     *
+     * When `typeof message === "string"`, it is automatically wrapped with {@link StatusMessage}.
+     * If you are passing a non-string message that is not `<StatusMessage>`, you may need to wrap it with
+     * `<StatusMessage>` yourself for proper styling of `message`.
      */
     message?: React.ReactNode;
     /**

package/cjs/core/InputGroup/InputGroup.js

@@ -53,11 +53,27 @@ const StatusMessage_js_1 = require("../StatusMessage/StatusMessage.js");
  * </InputGroup>
  */
 exports.InputGroup = React.forwardRef((props, forwardedRef) => {
-    const { className, children, disabled = false, displayStyle = 'default', label, message, status, svgIcon, required = false, labelProps, messageProps, innerProps, ...rest } = props;
+    const { className, children, disabled = false, displayStyle = 'default', label, status, required = false, labelProps, innerProps, message, svgIcon, messageProps, ...rest } = props;
     return (React.createElement(InputGrid_js_1.InputGrid, { ref: forwardedRef, as: 'div', labelPlacement: displayStyle, className: (0, classnames_1.default)('iui-input-group-wrapper', className), "data-iui-status": status, ...rest },
         label && (React.createElement(Label_js_1.Label, { as: 'label', required: required, disabled: disabled, ...labelProps }, label)),
         React.createElement(index_js_1.Box, { as: 'div', ...innerProps, className: (0, classnames_1.default)('iui-input-group', innerProps?.className) }, children),
-        (message || status || svgIcon) && (React.createElement(StatusMessage_js_1.StatusMessage, { iconProps: {
-                'aria-hidden': true,
-            }, startIcon: svgIcon, status: status, ...messageProps }, displayStyle !== 'inline' && message))));
+        React.createElement(BottomMessage, { message: message, status: status, svgIcon: svgIcon, displayStyle: displayStyle, messageProps: messageProps })));
 });
+// ------------------------------------------------------------------------------------------------
+/**
+ * @private
+ * - When `typeof message !== 'string'`, `message` is returned as-is (e.g. when `message=<StatusMessage />`).
+ * - Else, it is wrapped in a `<StatusMessage />`.
+ */
+const BottomMessage = (props) => {
+    const { message, status, svgIcon, displayStyle, messageProps } = props;
+    if (message && typeof message !== 'string') {
+        return message;
+    }
+    if (message || status || svgIcon) {
+        return (React.createElement(StatusMessage_js_1.StatusMessage, { iconProps: {
+                'aria-hidden': true,
+            }, startIcon: svgIcon, status: status, ...messageProps }, displayStyle !== 'inline' && message));
+    }
+    return undefined;
+};

package/cjs/core/InputWithDecorations/InputWithDecorations.d.ts

@@ -5,9 +5,9 @@ import type { InputProps } from '../Input/Input.js';
  * Input component with various additional decorations.
  * You can add icons, buttons and other various subcomponents to it.
  *
- * If you are not using default InputWithDecorations.Icon and InputWithDecorations.Button, use borderless versions of other components.
+ * If you are not using default `InputWithDecorations.Icon` and `InputWithDecorations.Button`, use borderless versions of other components.
  *
- * @usage
+ * @example
  * <InputWithDecorations>
  *    <InputWithDecorations.Input />
  *    <InputWithDecorations.Icon>
@@ -26,68 +26,24 @@ export declare const InputWithDecorations: PolymorphicForwardRefComponent<"div",
     Input: PolymorphicForwardRefComponent<"input", InputProps>;
     /**
      * Subcomponent to include button in your InputWithDecorations
+     *
+     * Although similar to `IconButton`, this subcomponent additionally collapses the padding between the button and the input/textarea
+     * in `InputWithDecorations`.
      */
-    Button: PolymorphicForwardRefComponent<"span", Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
+    Button: PolymorphicForwardRefComponent<"button", Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
         ref?: ((instance: HTMLButtonElement | null) => void) | React.RefObject<HTMLButtonElement> | null | undefined;
-    }, "label" | "as" | "size" | "htmlDisabled" | "styleType" | "labelProps" | "isActive" | "iconProps"> & {
-        isActive?: boolean | undefined;
-        label?: React.ReactNode;
-        labelProps?: Omit<Omit<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-            ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
-        }, "as" | "children" | "content" | "portal" | keyof {
-            placement?: import("@floating-ui/utils").Placement | undefined;
-            visible?: boolean | undefined;
-            onVisibleChange?: ((visible: boolean) => void) | undefined;
-            autoUpdateOptions?: {
-                ancestorScroll?: boolean | undefined;
-                ancestorResize?: boolean | undefined;
-                elementResize?: boolean | undefined;
-                animationFrame?: boolean | undefined;
-                layoutShift?: boolean | undefined;
-            } | undefined;
-            middleware?: {
-                offset?: number | undefined;
-                flip?: boolean | undefined;
-                shift?: boolean | undefined;
-                size?: boolean | undefined;
-                autoPlacement?: boolean | undefined;
-                hide?: boolean | undefined;
-                inline?: boolean | undefined;
-            } | undefined;
-            reference?: HTMLElement | null | undefined;
-            ariaStrategy?: "label" | "description" | "none" | undefined;
-            id?: string | undefined;
-        }> & {
-            content: React.ReactNode;
-            children?: React.ReactNode;
-        } & import("../utils/index.js").PortalProps & {
-            placement?: import("@floating-ui/utils").Placement | undefined;
-            visible?: boolean | undefined;
-            onVisibleChange?: ((visible: boolean) => void) | undefined;
-            autoUpdateOptions?: {
-                ancestorScroll?: boolean | undefined;
-                ancestorResize?: boolean | undefined;
-                elementResize?: boolean | undefined;
-                animationFrame?: boolean | undefined;
-                layoutShift?: boolean | undefined;
-            } | undefined;
-            middleware?: {
-                offset?: number | undefined;
-                flip?: boolean | undefined;
-                shift?: boolean | undefined;
-                size?: boolean | undefined;
-                autoPlacement?: boolean | undefined;
-                hide?: boolean | undefined;
-                inline?: boolean | undefined;
-            } | undefined;
-            reference?: HTMLElement | null | undefined;
-            ariaStrategy?: "label" | "description" | "none" | undefined;
-            id?: string | undefined;
-        } & {
-            as?: "div" | undefined;
-        }, "ref">, "children" | "content" | "reference" | "ariaStrategy"> | undefined;
-        iconProps?: React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement> | undefined;
-    } & Omit<import("../Buttons/Button.js").ButtonProps, "startIcon" | "endIcon" | "labelProps" | "startIconProps" | "endIconProps"> & {
+    }, "label" | "as" | "size" | "htmlDisabled" | "styleType" | "labelProps" | "isActive" | "iconProps"> & Omit<import("../Buttons/IconButton.js").IconButtonProps, "styleType"> & {
+        styleType?: "default" | "cta" | "high-visibility" | "borderless" | undefined;
+    } & {
         as?: "button" | undefined;
     }>;
+    /**
+     * Subcomponent to include button in your InputWithDecorations.
+     *
+     * Although similar to `Icon`, this subcomponent additionally collapses the padding between the icon and the input/textarea
+     * in `InputWithDecorations`.
+     */
+    Icon: PolymorphicForwardRefComponent<"span", Omit<import("../Icon/Icon.js").IconProps, "padded"> & {
+        padded?: boolean | undefined;
+    }>;
 };

package/cjs/core/InputWithDecorations/InputWithDecorations.js

@@ -30,32 +30,37 @@ exports.InputWithDecorations = void 0;
  *--------------------------------------------------------------------------------------------*/
 const React = __importStar(require("react"));
 const index_js_1 = require("../utils/index.js");
-const IconButton_js_1 = require("../Buttons/IconButton.js");
 const InputWithDecorationsContext = React.createContext(undefined);
 const InputWithDecorationsComponent = React.forwardRef((props, ref) => {
     const { children, size, isDisabled, ...rest } = props;
     return (React.createElement(InputWithDecorationsContext.Provider, { value: { size, isDisabled } },
         React.createElement(index_js_1.InputFlexContainer, { isDisabled: isDisabled, size: size, ref: ref, ...rest }, children)));
 });
-//-------------------------------------------------------------------------------
+// ----------------------------------------------------------------------------
 const InputWithDecorationsInput = React.forwardRef((props, ref) => {
     const { id: idProp, size, disabled: localDisabled, ...rest } = props;
     const { size: contextSize, isDisabled } = (0, index_js_1.useSafeContext)(InputWithDecorationsContext);
     return (React.createElement(index_js_1.Box, { as: 'input', ref: ref, "data-iui-size": size ?? contextSize, disabled: localDisabled ?? isDisabled, id: idProp, ...rest }));
 });
-//-------------------------------------------------------------------------------
+InputWithDecorationsInput.displayName = 'InputWithDecorations.Input';
+// ----------------------------------------------------------------------------
 const InputWithDecorationsButton = React.forwardRef((props, ref) => {
     const { children, size, disabled: localDisabled, ...rest } = props;
     const { size: contextSize, isDisabled } = (0, index_js_1.useSafeContext)(InputWithDecorationsContext);
-    return (React.createElement(IconButton_js_1.IconButton, { ref: ref, size: size ?? contextSize, styleType: 'borderless', disabled: localDisabled ?? isDisabled, ...rest }, children));
+    return (React.createElement(index_js_1.InputFlexContainerButton, { ref: ref, size: size ?? contextSize, disabled: localDisabled ?? isDisabled, ...rest }, children));
 });
+InputWithDecorationsButton.displayName = 'InputWithDecorations.Button';
+// ----------------------------------------------------------------------------
+const InputWithDecorationsIcon = index_js_1.InputFlexContainerIcon;
+InputWithDecorationsIcon.displayName = 'InputWithDecorations.Icon';
+// ----------------------------------------------------------------------------
 /**
  * Input component with various additional decorations.
  * You can add icons, buttons and other various subcomponents to it.
  *
- * If you are not using default InputWithDecorations.Icon and InputWithDecorations.Button, use borderless versions of other components.
+ * If you are not using default `InputWithDecorations.Icon` and `InputWithDecorations.Button`, use borderless versions of other components.
  *
- * @usage
+ * @example
  * <InputWithDecorations>
  *    <InputWithDecorations.Input />
  *    <InputWithDecorations.Icon>
@@ -70,6 +75,16 @@ exports.InputWithDecorations = Object.assign(InputWithDecorationsComponent, {
     Input: InputWithDecorationsInput,
     /**
      * Subcomponent to include button in your InputWithDecorations
+     *
+     * Although similar to `IconButton`, this subcomponent additionally collapses the padding between the button and the input/textarea
+     * in `InputWithDecorations`.
      */
     Button: InputWithDecorationsButton,
+    /**
+     * Subcomponent to include button in your InputWithDecorations.
+     *
+     * Although similar to `Icon`, this subcomponent additionally collapses the padding between the icon and the input/textarea
+     * in `InputWithDecorations`.
+     */
+    Icon: InputWithDecorationsIcon,
 });