draft-components 1.0.0-beta.8 → 1.0.0-beta.9

package/cjs/components/button/button.cjs

@@ -5,23 +5,25 @@ const react = require('react');
 const reactHelpers = require('../../lib/react-helpers.cjs');
 const spinner = require('../spinner/spinner.cjs');
 
-const Button = react.forwardRef(function Button({ isBlock = false, disabled = false, loading = false, type = 'button', size = 'sm', variant = 'filled', appearance = 'default', icon = null, caption = null, renderAs, className, children, ...props }, ref) {
-    const shouldRenderIcon = Boolean(icon);
-    const shouldRenderLabel = Boolean(children);
-    const shouldRenderCaption = Boolean(caption);
-    let leadingAddOn = null;
+const Button = react.forwardRef(function Button({ isBlock = false, disabled = false, loading = false, type = 'button', size = 'sm', variant = 'filled', appearance = 'default', iconLeft = null, iconRight = null, caption = null, renderAs, className, children, ...props }, ref) {
+    let addOnLeft = null;
     if (loading) {
-        leadingAddOn = (jsxRuntime.jsx("span", { "data-testid": "button-spinner", className: "dc-button__spinner", children: jsxRuntime.jsx(spinner.Spinner, { size: "1.15em" }) }));
+        addOnLeft = (jsxRuntime.jsx("span", { "data-testid": "button-spinner", className: "dc-button__spinner", children: jsxRuntime.jsx(spinner.Spinner, { size: "1.15em" }) }));
+    }
+    else if (iconLeft) {
+        addOnLeft = (jsxRuntime.jsx("span", { "data-testid": "button-icon", className: "dc-button__icon", children: iconLeft }));
     }
-    else if (shouldRenderIcon) {
-        leadingAddOn = (jsxRuntime.jsx("span", { "data-testid": "button-icon", className: "dc-button__icon", children: icon }));
+    let addOnRight = null;
+    if (iconRight) {
+        addOnRight = (jsxRuntime.jsx("span", { "data-testid": "button-icon", className: "dc-button__icon", children: iconRight }));
     }
-    const content = (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [leadingAddOn, shouldRenderLabel && (jsxRuntime.jsxs("span", { className: "dc-button__body", children: [jsxRuntime.jsx("span", { className: "dc-button__label", children: children }), shouldRenderCaption && (jsxRuntime.jsx("small", { className: "dc-button__caption", children: caption }))] }))] }));
+    const shouldRenderLabel = Boolean(children);
+    const shouldRenderCaption = Boolean(caption);
+    const content = (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [addOnLeft, shouldRenderLabel && (jsxRuntime.jsxs("span", { className: "dc-button__body", children: [jsxRuntime.jsx("span", { className: "dc-button__label", children: children }), shouldRenderCaption && (jsxRuntime.jsx("small", { className: "dc-button__caption", children: caption }))] })), addOnRight] }));
     className = reactHelpers.classNames(className, {
         'dc-button': true,
         'dc-button_block': isBlock,
         'dc-button_loading': loading,
-        'dc-button_has_icon': shouldRenderIcon,
         'dc-button_has_caption': shouldRenderCaption,
         [`dc-button_${size}`]: size,
         [`dc-button_appearance_${appearance}`]: appearance,

package/cjs/components/button/icon-button.cjs

@@ -5,8 +5,8 @@ const react = require('react');
 const reactHelpers = require('../../lib/react-helpers.cjs');
 const button = require('./button.cjs');
 
-const IconButton = react.forwardRef(function IconButton({ className, ...props }, ref) {
-    return jsxRuntime.jsx(button.Button, { ref: ref, className: reactHelpers.classNames('dc-button_icon-only', className), ...props });
+const IconButton = react.forwardRef(function IconButton({ className, icon, ...props }, ref) {
+    return jsxRuntime.jsx(button.Button, { ...props, ref: ref, iconLeft: icon, className: reactHelpers.classNames('dc-button_icon-only', className) });
 });
 
 exports.IconButton = IconButton;

package/css/draft-components.css

@@ -751,12 +751,20 @@
   justify-content: center;
 }
 
-.dc-button__icon,
-.dc-button__spinner {
+.dc-button__spinner,
+.dc-button__icon {
   flex: none;
+}
+
+.dc-button__spinner,
+.dc-button__icon:first-child {
   margin-right: 0.5em;
 }
 
+.dc-button__icon:last-child {
+  margin-left: 0.5em;
+}
+
 .dc-button__body {
   flex: auto;
   flex-direction: column;
@@ -771,6 +779,7 @@
 .dc-button_icon-only .dc-button__icon,
 .dc-button_icon-only .dc-button__spinner {
   margin-right: 0;
+  margin-left: 0;
 }
 
 .dc-button_has_caption .dc-button__icon,

package/esm/components/button/button.js

@@ -3,23 +3,25 @@ import { forwardRef } from 'react';
 import { classNames } from '../../lib/react-helpers.js';
 import { Spinner } from '../spinner/spinner.js';
 
-const Button = forwardRef(function Button({ isBlock = false, disabled = false, loading = false, type = 'button', size = 'sm', variant = 'filled', appearance = 'default', icon = null, caption = null, renderAs, className, children, ...props }, ref) {
-    const shouldRenderIcon = Boolean(icon);
-    const shouldRenderLabel = Boolean(children);
-    const shouldRenderCaption = Boolean(caption);
-    let leadingAddOn = null;
+const Button = forwardRef(function Button({ isBlock = false, disabled = false, loading = false, type = 'button', size = 'sm', variant = 'filled', appearance = 'default', iconLeft = null, iconRight = null, caption = null, renderAs, className, children, ...props }, ref) {
+    let addOnLeft = null;
     if (loading) {
-        leadingAddOn = (jsx("span", { "data-testid": "button-spinner", className: "dc-button__spinner", children: jsx(Spinner, { size: "1.15em" }) }));
+        addOnLeft = (jsx("span", { "data-testid": "button-spinner", className: "dc-button__spinner", children: jsx(Spinner, { size: "1.15em" }) }));
+    }
+    else if (iconLeft) {
+        addOnLeft = (jsx("span", { "data-testid": "button-icon", className: "dc-button__icon", children: iconLeft }));
     }
-    else if (shouldRenderIcon) {
-        leadingAddOn = (jsx("span", { "data-testid": "button-icon", className: "dc-button__icon", children: icon }));
+    let addOnRight = null;
+    if (iconRight) {
+        addOnRight = (jsx("span", { "data-testid": "button-icon", className: "dc-button__icon", children: iconRight }));
     }
-    const content = (jsxs(Fragment, { children: [leadingAddOn, shouldRenderLabel && (jsxs("span", { className: "dc-button__body", children: [jsx("span", { className: "dc-button__label", children: children }), shouldRenderCaption && (jsx("small", { className: "dc-button__caption", children: caption }))] }))] }));
+    const shouldRenderLabel = Boolean(children);
+    const shouldRenderCaption = Boolean(caption);
+    const content = (jsxs(Fragment, { children: [addOnLeft, shouldRenderLabel && (jsxs("span", { className: "dc-button__body", children: [jsx("span", { className: "dc-button__label", children: children }), shouldRenderCaption && (jsx("small", { className: "dc-button__caption", children: caption }))] })), addOnRight] }));
     className = classNames(className, {
         'dc-button': true,
         'dc-button_block': isBlock,
         'dc-button_loading': loading,
-        'dc-button_has_icon': shouldRenderIcon,
         'dc-button_has_caption': shouldRenderCaption,
         [`dc-button_${size}`]: size,
         [`dc-button_appearance_${appearance}`]: appearance,

package/esm/components/button/icon-button.js

@@ -3,8 +3,8 @@ import { forwardRef } from 'react';
 import { classNames } from '../../lib/react-helpers.js';
 import { Button } from './button.js';
 
-const IconButton = forwardRef(function IconButton({ className, ...props }, ref) {
-    return jsx(Button, { ref: ref, className: classNames('dc-button_icon-only', className), ...props });
+const IconButton = forwardRef(function IconButton({ className, icon, ...props }, ref) {
+    return jsx(Button, { ...props, ref: ref, iconLeft: icon, className: classNames('dc-button_icon-only', className) });
 });
 
 export { IconButton };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "draft-components",
-  "version": "1.0.0-beta.8",
+  "version": "1.0.0-beta.9",
   "description": "The React based UI components library.",
   "type": "module",
   "exports": {

package/types/components/button/button.d.ts

@@ -6,14 +6,15 @@ export type ButtonRenderFn = (props: {
     className: string;
     children: JSX.Element;
 }) => JSX.Element;
-export type ButtonProps = ComponentPropsWithRef<'button'> & {
+export type ButtonProps = {
     isBlock?: boolean;
     loading?: boolean;
     size?: ButtonSize;
     variant?: ButtonVariant;
     appearance?: ButtonAppearance;
-    icon?: ReactNode;
+    iconLeft?: ReactNode;
+    iconRight?: ReactNode;
     caption?: ReactNode;
     renderAs?: ButtonRenderFn;
-};
-export declare const Button: import("react").ForwardRefExoticComponent<Pick<ButtonProps, "caption" | "key" | "icon" | "variant" | "appearance" | "size" | "renderAs" | keyof import("react").ButtonHTMLAttributes<HTMLButtonElement> | "isBlock" | "loading"> & import("react").RefAttributes<HTMLButtonElement>>;
+} & ComponentPropsWithRef<'button'>;
+export declare const Button: import("react").ForwardRefExoticComponent<Pick<ButtonProps, "caption" | "key" | "variant" | "appearance" | "size" | "renderAs" | keyof import("react").ButtonHTMLAttributes<HTMLButtonElement> | "isBlock" | "loading" | "iconLeft" | "iconRight"> & import("react").RefAttributes<HTMLButtonElement>>;

package/types/components/button/icon-button.d.ts

@@ -1,6 +1,7 @@
 import { type ReactNode } from 'react';
 import { type ButtonProps } from './button';
-export type IconButtonProps = Omit<ButtonProps, 'children' | 'caption'> & {
+export type IconButtonBaseProps = Omit<ButtonProps, 'children' | 'caption' | 'iconLeft' | 'iconRight'>;
+export type IconButtonProps = {
     icon: ReactNode;
-};
+} & IconButtonBaseProps;
 export declare const IconButton: import("react").ForwardRefExoticComponent<Pick<IconButtonProps, "hidden" | "form" | "slot" | "style" | "title" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "nonce" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onResize" | "onResizeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "icon" | "variant" | "appearance" | "size" | "value" | "type" | "renderAs" | "name" | "autoFocus" | "disabled" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "isBlock" | "loading"> & import("react").RefAttributes<HTMLButtonElement>>;