@leafygreen-ui/icon-button - npm Package Compare versions

Comparing version 4.1.6 to 5.0.0

CHANGELOG.md

 # @leafygreen-ui/icon-button
 
+## 5.0.0
+
+### Major Changes
+
+- 5aafd72: IconButton now accepts `aria-label` instead of `ariaLabel`
+  When an Icon is a child of IconButton, the Icon's title will be unset unless explicitly set on Icon, and its size will be inherited from IconButton unless its explicitly set.
+  Previously, IconButton required that `ariaLabel` exists as a prop to IconButton. Now IconButton is more flexible, and requires that one of `aria-label` or `aria-labelledby` are set.
+
+### Patch Changes
+
+- Updated dependencies [5aafd72]
+- Updated dependencies [5aafd72]
+  - @leafygreen-ui/icon@5.0.2
+  - @leafygreen-ui/lib@4.4.1
+
 ## 4.1.6
@@ -4,0 +19,0 @@

dist/IconButton.d.ts

@@ -19,2 +19,4 @@ import React from 'react';
      * Determines color of `IconButton`. Can be `light` or `dark`.
+     *
+     * default: `'light'`
      */
@@ -32,10 +34,10 @@ variant?: Variant;
      * Determines whether or not `IconButton` is disabled.
+     *
+     * default: `false`
      */
     disabled?: boolean;
     /**
-     * Required prop which will be passed to `aria-label` attribute
-     */
-    ariaLabel: string;
-    /**
      * Determines size of IconButton can be: default, large, xlarge
+     *
+     * default: `'default'`
      */
@@ -45,6 +47,8 @@ size?: Size;
      * Determines whether `IconButton` will appear `active`
+     *
+     * default: `false`
      */
     active?: boolean;
 }
-interface LinkIconButtonProps extends HTMLElementProps<'a'>, SharedIconButtonProps {
+interface LinkIconButtonProps extends Omit<HTMLElementProps<'a'>, 'css'>, SharedIconButtonProps {
     /**
@@ -55,3 +59,3 @@ * Destination URL, if supplied `IconButton` will render in `a` tags, rather than `button` tags.
 }
-interface ButtonIconButtonProps extends HTMLElementProps<'button'>, SharedIconButtonProps {
+interface ButtonIconButtonProps extends Omit<HTMLElementProps<'button'>, 'css'>, SharedIconButtonProps {
     href?: null;
@@ -66,3 +70,3 @@ }
 <IconButton variant='dark'>
-  <Icon glyph={copy} />
+  <Icon glyph='Copy' />
 </IconButton>
@@ -76,7 +80,6 @@ ```
  * @param props.onClick Callback fired when `IconButton` is clicked.
- * @param props.ariaLabel Required prop that will be passed to `aria-label` attribute
  * @param props.active Determines whether `IconButton` will appear `active`
  *
  */
-declare const IconButton: React.ForwardRefExoticComponent<(LinkIconButtonProps & React.RefAttributes<unknown>) | (ButtonIconButtonProps & React.RefAttributes<unknown>)>;
+declare const IconButton: React.ForwardRefExoticComponent<(Pick<LinkIconButtonProps, "hidden" | "color" | "size" | "style" | "active" | "disabled" | "title" | "children" | "contextMenu" | "dir" | "ping" | "download" | "href" | "hrefLang" | "media" | "rel" | "target" | "type" | "referrerPolicy" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "draggable" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "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-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" | "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" | "variant"> & Required<Pick<LinkIconButtonProps, "aria-label">> & Partial<Pick<LinkIconButtonProps, "aria-labelledby">> & React.RefAttributes<unknown>) | (Pick<LinkIconButtonProps, "hidden" | "color" | "size" | "style" | "active" | "disabled" | "title" | "children" | "contextMenu" | "dir" | "ping" | "download" | "href" | "hrefLang" | "media" | "rel" | "target" | "type" | "referrerPolicy" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "draggable" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "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-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" | "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" | "variant"> & Required<Pick<LinkIconButtonProps, "aria-labelledby">> & Partial<Pick<LinkIconButtonProps, "aria-label">> & React.RefAttributes<unknown>) | (Pick<ButtonIconButtonProps, "hidden" | "color" | "size" | "style" | "active" | "disabled" | "form" | "title" | "children" | "contextMenu" | "dir" | "href" | "type" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "draggable" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "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-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" | "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" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "name" | "value" | "variant"> & Required<Pick<ButtonIconButtonProps, "aria-label">> & Partial<Pick<ButtonIconButtonProps, "aria-labelledby">> & React.RefAttributes<unknown>) | (Pick<ButtonIconButtonProps, "hidden" | "color" | "size" | "style" | "active" | "disabled" | "form" | "title" | "children" | "contextMenu" | "dir" | "href" | "type" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "draggable" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "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-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" | "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" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "name" | "value" | "variant"> & Required<Pick<ButtonIconButtonProps, "aria-labelledby">> & Partial<Pick<ButtonIconButtonProps, "aria-label">> & React.RefAttributes<unknown>)>;
 export default IconButton;

dist/index.node.js

@@ -1,2 +0,2 @@
-!function(e,r){if("object"==typeof exports&&"object"==typeof module)module.exports=r(require("react"),require("prop-types"),require("@leafygreen-ui/emotion"),require("@leafygreen-ui/palette"));else if("function"==typeof define&&define.amd)define(["react","prop-types","@leafygreen-ui/emotion","@leafygreen-ui/palette"],r);else{var n="object"==typeof exports?r(require("react"),require("prop-types"),require("@leafygreen-ui/emotion"),require("@leafygreen-ui/palette")):r(e.react,e["prop-types"],e["@leafygreen-ui/emotion"],e["@leafygreen-ui/palette"]);for(var t in n)("object"==typeof exports?exports:e)[t]=n[t]}}(global,(function(e,r,n,t){return function(e){var r={};function n(t){if(r[t])return r[t].exports;var o=r[t]={i:t,l:!1,exports:{}};return e[t].call(o.exports,o,o.exports,n),o.l=!0,o.exports}return n.m=e,n.c=r,n.d=function(e,r,t){n.o(e,r)||Object.defineProperty(e,r,{enumerable:!0,get:t})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,r){if(1&r&&(e=n(e)),8&r)return e;if(4&r&&"object"==typeof e&&e&&e.__esModule)return e;var t=Object.create(null);if(n.r(t),Object.defineProperty(t,"default",{enumerable:!0,value:e}),2&r&&"string"!=typeof e)for(var o in e)n.d(t,o,function(r){return e[r]}.bind(null,o));return t},n.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(r,"a",r),r},n.o=function(e,r){return Object.prototype.hasOwnProperty.call(e,r)},n.p="",n(n.s=0)}([function(e,r,n){"use strict";var t;Object.defineProperty(r,"__esModule",{value:!0}),r.default=void 0;var o=((t=n(1))&&t.__esModule?t:{default:t}).default;r.default=o},function(e,r,n){"use strict";Object.defineProperty(r,"__esModule",{value:!0}),r.default=r.Size=r.Variant=void 0;var t,o,a,u,i=s(n(2)),l=s(n(3)),c=n(4),f=n(5);function s(e){return e&&e.__esModule?e:{default:e}}function d(){return(d=Object.assign||function(e){for(var r=1;r<arguments.length;r++){var n=arguments[r];for(var t in n)Object.prototype.hasOwnProperty.call(n,t)&&(e[t]=n[t])}return e}).apply(this,arguments)}function p(e,r){if(null==e)return{};var n,t,o=function(e,r){if(null==e)return{};var n,t,o={},a=Object.keys(e);for(t=0;t<a.length;t++)n=a[t],r.indexOf(n)>=0||(o[n]=e[n]);return o}(e,r);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(t=0;t<a.length;t++)n=a[t],r.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}function b(){var e=P(["\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  margin: auto;\n  height: ","px;\n  width: ","px;\n"]);return b=function(){return e},e}function g(){var e=P(["\n    color: ",";\n    background-color: ",";\n\n    &:before {\n      background-color: ",";\n    }\n  "]);return g=function(){return e},e}function v(){var e=P(["\n    color: ",";\n    background-color: ",";\n\n    &:before {\n      background-color: ",";\n    }\n  "]);return v=function(){return e},e}function y(){var e=P(["\n    color: ",";\n    pointer-events: none;\n  "]);return y=function(){return e},e}function h(){var e=P(["\n    color: ",";\n    pointer-events: none;\n  "]);return h=function(){return e},e}function m(){var e=P(["\n    &:hover {\n      &:before {\n        background-color: ",";\n      }\n      color: ",";\n    }\n    &:focus:before {\n      background-color: ",";\n    }\n  "]);return m=function(){return e},e}function x(){var e=P(["\n    &:hover {\n      color: ",";\n\n      &:before {\n        background-color: ",";\n      }\n    }\n\n    &:focus {\n      color: ",";\n\n      &:before {\n        background-color: ",";\n      }\n    }\n  "]);return x=function(){return e},e}function O(e,r,n){return r in e?Object.defineProperty(e,r,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[r]=n,e}function j(){var e=P(["\n    height: 42px;\n    width: 42px;\n  "]);return j=function(){return e},e}function k(){var e=P(["\n    height: 35px;\n    width: 35px;\n  "]);return k=function(){return e},e}function C(){var e=P(["\n    height: 28px;\n    width: 28px;\n  "]);return C=function(){return e},e}function w(){var e=P(["\n  display: inline-block;\n  border-radius: 100px;\n  color: ",";\n  position: relative;\n  cursor: pointer;\n  // added for cross-browser compatability\n  background-color: rgba(255, 255, 255, 0);\n\n  &:before {\n    content: '';\n    transition: 150ms all ease-in-out;\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    border-radius: 100%;\n    opacity: 0;\n    transform: scale(0.8);\n  }\n\n  &:hover:before,\n  &:focus:before {\n    opacity: 1;\n    transform: scale(1);\n  }\n\n  &:focus {\n    outline: none;\n  }\n"]);return w=function(){return e},e}function _(){var e=P(["\n  border: none;\n  -webkit-appearance: unset;\n  padding: unset;\n"]);return _=function(){return e},e}function P(e,r){return r||(r=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(r)}}))}var L={Light:"light",Dark:"dark"};r.Variant=L;var q={Default:"default",Large:"large",XLarge:"xlarge"};r.Size=q;var S={default:16,large:20,xlarge:24};var M=(0,c.css)(_()),z=(0,c.css)(w(),f.uiColors.gray.base),D=(O(t={},q.Default,(0,c.css)(C())),O(t,q.Large,(0,c.css)(k())),O(t,q.XLarge,(0,c.css)(j())),t),N=(O(o={},L.Light,(0,c.css)(x(),f.uiColors.gray.dark2,f.uiColors.gray.light2,f.uiColors.blue.base,f.uiColors.blue.light2)),O(o,L.Dark,(0,c.css)(m(),f.uiColors.gray.dark2,f.uiColors.white,f.uiColors.blue.dark2)),o),E=(O(a={},L.Light,(0,c.css)(h(),f.uiColors.gray.light2)),O(a,L.Dark,(0,c.css)(y(),f.uiColors.gray.dark2)),a),I=(O(u={},L.Light,(0,c.css)(v(),f.uiColors.gray.dark2,f.uiColors.gray.light2,f.uiColors.gray.light2)),O(u,L.Dark,(0,c.css)(g(),f.uiColors.white,f.uiColors.gray.dark2,f.uiColors.gray.dark2)),u),T=function(e){return(0,c.css)(b(),S[e],S[e])},R=i.default.forwardRef((function(e,r){var n=e.variant,t=void 0===n?"light":n,o=e.disabled,a=void 0!==o&&o,u=e.size,l=void 0===u?"default":u,f=e.active,s=void 0!==f&&f,b=e.className,g=e.href,v=e.children,y=e.ariaLabel,h=p(e,["variant","disabled","size","active","className","href","children","ariaLabel"]),m=function(){var e,n=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"button";return i.default.createElement(n,d({},h,{href:g||void 0,"aria-disabled":a,"aria-label":y,ref:r,className:(0,c.cx)(M,z,D[l],N[t],(e={},O(e,E[t],a),O(e,I[t],s),e),b),tabIndex:a?-1:0}),i.default.createElement("span",{className:T(l)},v))};return function(e){return null!=e.href}(e)?m("a"):m()}));R.displayName="IconButton",R.propTypes={variant:l.default.oneOf(Object.values(L)),className:l.default.string,children:l.default.node,disabled:l.default.bool,href:l.default.string,ariaLabel:l.default.string.isRequired,active:l.default.bool};var V=R;r.default=V},function(r,n){r.exports=e},function(e,n){e.exports=r},function(e,r){e.exports=n},function(e,r){e.exports=t}])}));
+!function(e,r){if("object"==typeof exports&&"object"==typeof module)module.exports=r(require("react"),require("@leafygreen-ui/emotion"),require("prop-types"),require("@leafygreen-ui/lib"),require("@leafygreen-ui/palette"));else if("function"==typeof define&&define.amd)define(["react","@leafygreen-ui/emotion","prop-types","@leafygreen-ui/lib","@leafygreen-ui/palette"],r);else{var n="object"==typeof exports?r(require("react"),require("@leafygreen-ui/emotion"),require("prop-types"),require("@leafygreen-ui/lib"),require("@leafygreen-ui/palette")):r(e.react,e["@leafygreen-ui/emotion"],e["prop-types"],e["@leafygreen-ui/lib"],e["@leafygreen-ui/palette"]);for(var t in n)("object"==typeof exports?exports:e)[t]=n[t]}}(global,(function(e,r,n,t,o){return function(e){var r={};function n(t){if(r[t])return r[t].exports;var o=r[t]={i:t,l:!1,exports:{}};return e[t].call(o.exports,o,o.exports,n),o.l=!0,o.exports}return n.m=e,n.c=r,n.d=function(e,r,t){n.o(e,r)||Object.defineProperty(e,r,{enumerable:!0,get:t})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,r){if(1&r&&(e=n(e)),8&r)return e;if(4&r&&"object"==typeof e&&e&&e.__esModule)return e;var t=Object.create(null);if(n.r(t),Object.defineProperty(t,"default",{enumerable:!0,value:e}),2&r&&"string"!=typeof e)for(var o in e)n.d(t,o,function(r){return e[r]}.bind(null,o));return t},n.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(r,"a",r),r},n.o=function(e,r){return Object.prototype.hasOwnProperty.call(e,r)},n.p="",n(n.s=0)}([function(e,r,n){"use strict";var t;Object.defineProperty(r,"__esModule",{value:!0}),r.default=void 0;var o=((t=n(1))&&t.__esModule?t:{default:t}).default;r.default=o},function(e,r,n){"use strict";Object.defineProperty(r,"__esModule",{value:!0}),r.default=r.Size=r.Variant=void 0;var t,o,a,i,u=d(n(2)),l=n(3),c=d(n(4)),f=n(5),s=n(6);function d(e){return e&&e.__esModule?e:{default:e}}function b(){return(b=Object.assign||function(e){for(var r=1;r<arguments.length;r++){var n=arguments[r];for(var t in n)Object.prototype.hasOwnProperty.call(n,t)&&(e[t]=n[t])}return e}).apply(this,arguments)}function p(e,r){if(null==e)return{};var n,t,o=function(e,r){if(null==e)return{};var n,t,o={},a=Object.keys(e);for(t=0;t<a.length;t++)n=a[t],r.indexOf(n)>=0||(o[n]=e[n]);return o}(e,r);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(t=0;t<a.length;t++)n=a[t],r.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}function g(){var e=P(["\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"]);return g=function(){return e},e}function y(){var e=P(["\n    color: ",";\n    background-color: ",";\n\n    &:before {\n      background-color: ",";\n    }\n  "]);return y=function(){return e},e}function v(){var e=P(["\n    color: ",";\n    background-color: ",";\n\n    &:before {\n      background-color: ",";\n    }\n  "]);return v=function(){return e},e}function h(){var e=P(["\n    color: ",";\n    pointer-events: none;\n  "]);return h=function(){return e},e}function m(){var e=P(["\n    color: ",";\n    pointer-events: none;\n  "]);return m=function(){return e},e}function x(){var e=P(["\n    &:hover {\n      &:before {\n        background-color: ",";\n      }\n      color: ",";\n    }\n    &:focus:before {\n      background-color: ",";\n    }\n  "]);return x=function(){return e},e}function O(){var e=P(["\n    &:hover {\n      color: ",";\n\n      &:before {\n        background-color: ",";\n      }\n    }\n\n    &:focus {\n      color: ",";\n\n      &:before {\n        background-color: ",";\n      }\n    }\n  "]);return O=function(){return e},e}function k(e,r,n){return r in e?Object.defineProperty(e,r,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[r]=n,e}function j(){var e=P(["\n    height: 42px;\n    width: 42px;\n  "]);return j=function(){return e},e}function w(){var e=P(["\n    height: 35px;\n    width: 35px;\n  "]);return w=function(){return e},e}function C(){var e=P(["\n    height: 28px;\n    width: 28px;\n  "]);return C=function(){return e},e}function S(){var e=P(["\n  display: inline-block;\n  border-radius: 100px;\n  color: ",";\n  position: relative;\n  cursor: pointer;\n\n  // Set background to fully-transparent white for cross-browser compatability with Safari\n  //\n  // Safari treats \"transparent\" values in CSS as transparent black instead of white\n  // which can make things render differently across browsers if not defined explicitly.\n  background-color: rgba(255, 255, 255, 0);\n\n  &:before {\n    content: '';\n    transition: 150ms all ease-in-out;\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    border-radius: 100%;\n    opacity: 0;\n    transform: scale(0.8);\n  }\n\n  &:hover:before,\n  &:focus:before {\n    opacity: 1;\n    transform: scale(1);\n  }\n\n  &:focus {\n    outline: none;\n  }\n"]);return S=function(){return e},e}function _(){var e=P(["\n  border: none;\n  -webkit-appearance: unset;\n  padding: unset;\n"]);return _=function(){return e},e}function P(e,r){return r||(r=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(r)}}))}var q={Light:"light",Dark:"dark"};r.Variant=q;var z={Default:"default",Large:"large",XLarge:"xlarge"};r.Size=z;var L=(0,l.css)(_()),M=(0,l.css)(S(),s.uiColors.gray.base),D=(k(t={},z.Default,(0,l.css)(C())),k(t,z.Large,(0,l.css)(w())),k(t,z.XLarge,(0,l.css)(j())),t),N=(k(o={},q.Light,(0,l.css)(O(),s.uiColors.gray.dark2,s.uiColors.gray.light2,s.uiColors.blue.base,s.uiColors.blue.light2)),k(o,q.Dark,(0,l.css)(x(),s.uiColors.gray.dark2,s.uiColors.white,s.uiColors.blue.dark2)),o),I=(k(a={},q.Light,(0,l.css)(m(),s.uiColors.gray.light2)),k(a,q.Dark,(0,l.css)(h(),s.uiColors.gray.dark2)),a),E=(k(i={},q.Light,(0,l.css)(v(),s.uiColors.gray.dark2,s.uiColors.gray.light2,s.uiColors.gray.light2)),k(i,q.Dark,(0,l.css)(y(),s.uiColors.white,s.uiColors.gray.dark2,s.uiColors.gray.dark2)),i),T=(0,l.css)(g());var B=u.default.forwardRef((function(e,r){var n=e.variant,t=void 0===n?q.Light:n,o=e.size,a=void 0===o?z.Default:o,i=e.disabled,c=void 0!==i&&i,s=e.active,d=void 0!==s&&s,g=e.className,y=e.href,v=e.children,h=e["aria-label"],m=e["aria-labelledby"],x=p(e,["variant","size","disabled","active","className","href","children","aria-label","aria-labelledby"]);h||m||console.error("For screen-reader accessibility, aria-label or aria-labelledby must be provided to IconButton.");var O=u.default.Children.map(v,(function(e){if((0,f.isComponentType)(e,"Icon")){var r=e.props,n=r.size,t=r.title,o={size:n||a};return"string"==typeof t&&0!==t.length||(o.title=!1),u.default.cloneElement(e,o)}return e})),j=function(){var e,n=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"button";return u.default.createElement(n,b({},x,{ref:r,href:y,tabIndex:c?-1:0,"aria-disabled":c,"aria-label":h,"aria-labelledby":m,className:(0,l.cx)(L,M,D[a],N[t],(e={},k(e,I[t],c),k(e,E[t],d),e),g)}),u.default.createElement("div",{className:T},O))};return function(e){return null!=e.href}(e)?j("a"):j()}));B.displayName="IconButton",B.propTypes={variant:c.default.oneOf(Object.values(q)),size:c.default.oneOf(Object.values(z)),className:c.default.string,children:c.default.node,disabled:c.default.bool,href:c.default.string,active:c.default.bool};var V=B;r.default=V},function(r,n){r.exports=e},function(e,n){e.exports=r},function(e,r){e.exports=n},function(e,r){e.exports=t},function(e,r){e.exports=o}])}));
 //# sourceMappingURL=index.node.js.map

dist/index.web.js

@@ -1,2 +0,2 @@
-!function(e,n){if("object"==typeof exports&&"object"==typeof module)module.exports=n(require("react"),require("prop-types"),require("@leafygreen-ui/emotion"),require("@leafygreen-ui/palette"));else if("function"==typeof define&&define.amd)define(["react","prop-types","@leafygreen-ui/emotion","@leafygreen-ui/palette"],n);else{var r="object"==typeof exports?n(require("react"),require("prop-types"),require("@leafygreen-ui/emotion"),require("@leafygreen-ui/palette")):n(e.react,e["prop-types"],e["@leafygreen-ui/emotion"],e["@leafygreen-ui/palette"]);for(var t in r)("object"==typeof exports?exports:e)[t]=r[t]}}(window,(function(e,n,r,t){return function(e){var n={};function r(t){if(n[t])return n[t].exports;var o=n[t]={i:t,l:!1,exports:{}};return e[t].call(o.exports,o,o.exports,r),o.l=!0,o.exports}return r.m=e,r.c=n,r.d=function(e,n,t){r.o(e,n)||Object.defineProperty(e,n,{enumerable:!0,get:t})},r.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.t=function(e,n){if(1&n&&(e=r(e)),8&n)return e;if(4&n&&"object"==typeof e&&e&&e.__esModule)return e;var t=Object.create(null);if(r.r(t),Object.defineProperty(t,"default",{enumerable:!0,value:e}),2&n&&"string"!=typeof e)for(var o in e)r.d(t,o,function(n){return e[n]}.bind(null,o));return t},r.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(n,"a",n),n},r.o=function(e,n){return Object.prototype.hasOwnProperty.call(e,n)},r.p="",r(r.s=0)}([function(e,n,r){"use strict";var t;Object.defineProperty(n,"__esModule",{value:!0}),n.default=void 0;var o=((t=r(1))&&t.__esModule?t:{default:t}).default;n.default=o},function(e,n,r){"use strict";Object.defineProperty(n,"__esModule",{value:!0}),n.default=n.Size=n.Variant=void 0;var t,o,a,u,i=s(r(2)),l=s(r(3)),c=r(4),f=r(5);function s(e){return e&&e.__esModule?e:{default:e}}function d(){return(d=Object.assign||function(e){for(var n=1;n<arguments.length;n++){var r=arguments[n];for(var t in r)Object.prototype.hasOwnProperty.call(r,t)&&(e[t]=r[t])}return e}).apply(this,arguments)}function p(e,n){if(null==e)return{};var r,t,o=function(e,n){if(null==e)return{};var r,t,o={},a=Object.keys(e);for(t=0;t<a.length;t++)r=a[t],n.indexOf(r)>=0||(o[r]=e[r]);return o}(e,n);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(t=0;t<a.length;t++)r=a[t],n.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}function b(){var e=P(["\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  margin: auto;\n  height: ","px;\n  width: ","px;\n"]);return b=function(){return e},e}function g(){var e=P(["\n    color: ",";\n    background-color: ",";\n\n    &:before {\n      background-color: ",";\n    }\n  "]);return g=function(){return e},e}function v(){var e=P(["\n    color: ",";\n    background-color: ",";\n\n    &:before {\n      background-color: ",";\n    }\n  "]);return v=function(){return e},e}function y(){var e=P(["\n    color: ",";\n    pointer-events: none;\n  "]);return y=function(){return e},e}function h(){var e=P(["\n    color: ",";\n    pointer-events: none;\n  "]);return h=function(){return e},e}function m(){var e=P(["\n    &:hover {\n      &:before {\n        background-color: ",";\n      }\n      color: ",";\n    }\n    &:focus:before {\n      background-color: ",";\n    }\n  "]);return m=function(){return e},e}function x(){var e=P(["\n    &:hover {\n      color: ",";\n\n      &:before {\n        background-color: ",";\n      }\n    }\n\n    &:focus {\n      color: ",";\n\n      &:before {\n        background-color: ",";\n      }\n    }\n  "]);return x=function(){return e},e}function O(e,n,r){return n in e?Object.defineProperty(e,n,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[n]=r,e}function j(){var e=P(["\n    height: 42px;\n    width: 42px;\n  "]);return j=function(){return e},e}function k(){var e=P(["\n    height: 35px;\n    width: 35px;\n  "]);return k=function(){return e},e}function w(){var e=P(["\n    height: 28px;\n    width: 28px;\n  "]);return w=function(){return e},e}function C(){var e=P(["\n  display: inline-block;\n  border-radius: 100px;\n  color: ",";\n  position: relative;\n  cursor: pointer;\n  // added for cross-browser compatability\n  background-color: rgba(255, 255, 255, 0);\n\n  &:before {\n    content: '';\n    transition: 150ms all ease-in-out;\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    border-radius: 100%;\n    opacity: 0;\n    transform: scale(0.8);\n  }\n\n  &:hover:before,\n  &:focus:before {\n    opacity: 1;\n    transform: scale(1);\n  }\n\n  &:focus {\n    outline: none;\n  }\n"]);return C=function(){return e},e}function _(){var e=P(["\n  border: none;\n  -webkit-appearance: unset;\n  padding: unset;\n"]);return _=function(){return e},e}function P(e,n){return n||(n=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(n)}}))}var L={Light:"light",Dark:"dark"};n.Variant=L;var q={Default:"default",Large:"large",XLarge:"xlarge"};n.Size=q;var S={default:16,large:20,xlarge:24};var M=(0,c.css)(_()),z=(0,c.css)(C(),f.uiColors.gray.base),D=(O(t={},q.Default,(0,c.css)(w())),O(t,q.Large,(0,c.css)(k())),O(t,q.XLarge,(0,c.css)(j())),t),N=(O(o={},L.Light,(0,c.css)(x(),f.uiColors.gray.dark2,f.uiColors.gray.light2,f.uiColors.blue.base,f.uiColors.blue.light2)),O(o,L.Dark,(0,c.css)(m(),f.uiColors.gray.dark2,f.uiColors.white,f.uiColors.blue.dark2)),o),E=(O(a={},L.Light,(0,c.css)(h(),f.uiColors.gray.light2)),O(a,L.Dark,(0,c.css)(y(),f.uiColors.gray.dark2)),a),I=(O(u={},L.Light,(0,c.css)(v(),f.uiColors.gray.dark2,f.uiColors.gray.light2,f.uiColors.gray.light2)),O(u,L.Dark,(0,c.css)(g(),f.uiColors.white,f.uiColors.gray.dark2,f.uiColors.gray.dark2)),u),T=function(e){return(0,c.css)(b(),S[e],S[e])},R=i.default.forwardRef((function(e,n){var r=e.variant,t=void 0===r?"light":r,o=e.disabled,a=void 0!==o&&o,u=e.size,l=void 0===u?"default":u,f=e.active,s=void 0!==f&&f,b=e.className,g=e.href,v=e.children,y=e.ariaLabel,h=p(e,["variant","disabled","size","active","className","href","children","ariaLabel"]),m=function(){var e,r=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"button";return i.default.createElement(r,d({},h,{href:g||void 0,"aria-disabled":a,"aria-label":y,ref:n,className:(0,c.cx)(M,z,D[l],N[t],(e={},O(e,E[t],a),O(e,I[t],s),e),b),tabIndex:a?-1:0}),i.default.createElement("span",{className:T(l)},v))};return function(e){return null!=e.href}(e)?m("a"):m()}));R.displayName="IconButton",R.propTypes={variant:l.default.oneOf(Object.values(L)),className:l.default.string,children:l.default.node,disabled:l.default.bool,href:l.default.string,ariaLabel:l.default.string.isRequired,active:l.default.bool};var V=R;n.default=V},function(n,r){n.exports=e},function(e,r){e.exports=n},function(e,n){e.exports=r},function(e,n){e.exports=t}])}));
+!function(e,r){if("object"==typeof exports&&"object"==typeof module)module.exports=r(require("react"),require("@leafygreen-ui/emotion"),require("prop-types"),require("@leafygreen-ui/lib"),require("@leafygreen-ui/palette"));else if("function"==typeof define&&define.amd)define(["react","@leafygreen-ui/emotion","prop-types","@leafygreen-ui/lib","@leafygreen-ui/palette"],r);else{var n="object"==typeof exports?r(require("react"),require("@leafygreen-ui/emotion"),require("prop-types"),require("@leafygreen-ui/lib"),require("@leafygreen-ui/palette")):r(e.react,e["@leafygreen-ui/emotion"],e["prop-types"],e["@leafygreen-ui/lib"],e["@leafygreen-ui/palette"]);for(var t in n)("object"==typeof exports?exports:e)[t]=n[t]}}(window,(function(e,r,n,t,o){return function(e){var r={};function n(t){if(r[t])return r[t].exports;var o=r[t]={i:t,l:!1,exports:{}};return e[t].call(o.exports,o,o.exports,n),o.l=!0,o.exports}return n.m=e,n.c=r,n.d=function(e,r,t){n.o(e,r)||Object.defineProperty(e,r,{enumerable:!0,get:t})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,r){if(1&r&&(e=n(e)),8&r)return e;if(4&r&&"object"==typeof e&&e&&e.__esModule)return e;var t=Object.create(null);if(n.r(t),Object.defineProperty(t,"default",{enumerable:!0,value:e}),2&r&&"string"!=typeof e)for(var o in e)n.d(t,o,function(r){return e[r]}.bind(null,o));return t},n.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(r,"a",r),r},n.o=function(e,r){return Object.prototype.hasOwnProperty.call(e,r)},n.p="",n(n.s=0)}([function(e,r,n){"use strict";var t;Object.defineProperty(r,"__esModule",{value:!0}),r.default=void 0;var o=((t=n(1))&&t.__esModule?t:{default:t}).default;r.default=o},function(e,r,n){"use strict";Object.defineProperty(r,"__esModule",{value:!0}),r.default=r.Size=r.Variant=void 0;var t,o,i,a,u=d(n(2)),l=n(3),c=d(n(4)),f=n(5),s=n(6);function d(e){return e&&e.__esModule?e:{default:e}}function b(){return(b=Object.assign||function(e){for(var r=1;r<arguments.length;r++){var n=arguments[r];for(var t in n)Object.prototype.hasOwnProperty.call(n,t)&&(e[t]=n[t])}return e}).apply(this,arguments)}function p(e,r){if(null==e)return{};var n,t,o=function(e,r){if(null==e)return{};var n,t,o={},i=Object.keys(e);for(t=0;t<i.length;t++)n=i[t],r.indexOf(n)>=0||(o[n]=e[n]);return o}(e,r);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(t=0;t<i.length;t++)n=i[t],r.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}function g(){var e=P(["\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"]);return g=function(){return e},e}function y(){var e=P(["\n    color: ",";\n    background-color: ",";\n\n    &:before {\n      background-color: ",";\n    }\n  "]);return y=function(){return e},e}function v(){var e=P(["\n    color: ",";\n    background-color: ",";\n\n    &:before {\n      background-color: ",";\n    }\n  "]);return v=function(){return e},e}function h(){var e=P(["\n    color: ",";\n    pointer-events: none;\n  "]);return h=function(){return e},e}function m(){var e=P(["\n    color: ",";\n    pointer-events: none;\n  "]);return m=function(){return e},e}function x(){var e=P(["\n    &:hover {\n      &:before {\n        background-color: ",";\n      }\n      color: ",";\n    }\n    &:focus:before {\n      background-color: ",";\n    }\n  "]);return x=function(){return e},e}function O(){var e=P(["\n    &:hover {\n      color: ",";\n\n      &:before {\n        background-color: ",";\n      }\n    }\n\n    &:focus {\n      color: ",";\n\n      &:before {\n        background-color: ",";\n      }\n    }\n  "]);return O=function(){return e},e}function k(e,r,n){return r in e?Object.defineProperty(e,r,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[r]=n,e}function j(){var e=P(["\n    height: 42px;\n    width: 42px;\n  "]);return j=function(){return e},e}function w(){var e=P(["\n    height: 35px;\n    width: 35px;\n  "]);return w=function(){return e},e}function C(){var e=P(["\n    height: 28px;\n    width: 28px;\n  "]);return C=function(){return e},e}function S(){var e=P(["\n  display: inline-block;\n  border-radius: 100px;\n  color: ",";\n  position: relative;\n  cursor: pointer;\n\n  // Set background to fully-transparent white for cross-browser compatability with Safari\n  //\n  // Safari treats \"transparent\" values in CSS as transparent black instead of white\n  // which can make things render differently across browsers if not defined explicitly.\n  background-color: rgba(255, 255, 255, 0);\n\n  &:before {\n    content: '';\n    transition: 150ms all ease-in-out;\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    border-radius: 100%;\n    opacity: 0;\n    transform: scale(0.8);\n  }\n\n  &:hover:before,\n  &:focus:before {\n    opacity: 1;\n    transform: scale(1);\n  }\n\n  &:focus {\n    outline: none;\n  }\n"]);return S=function(){return e},e}function _(){var e=P(["\n  border: none;\n  -webkit-appearance: unset;\n  padding: unset;\n"]);return _=function(){return e},e}function P(e,r){return r||(r=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(r)}}))}var q={Light:"light",Dark:"dark"};r.Variant=q;var z={Default:"default",Large:"large",XLarge:"xlarge"};r.Size=z;var L=(0,l.css)(_()),M=(0,l.css)(S(),s.uiColors.gray.base),D=(k(t={},z.Default,(0,l.css)(C())),k(t,z.Large,(0,l.css)(w())),k(t,z.XLarge,(0,l.css)(j())),t),N=(k(o={},q.Light,(0,l.css)(O(),s.uiColors.gray.dark2,s.uiColors.gray.light2,s.uiColors.blue.base,s.uiColors.blue.light2)),k(o,q.Dark,(0,l.css)(x(),s.uiColors.gray.dark2,s.uiColors.white,s.uiColors.blue.dark2)),o),I=(k(i={},q.Light,(0,l.css)(m(),s.uiColors.gray.light2)),k(i,q.Dark,(0,l.css)(h(),s.uiColors.gray.dark2)),i),E=(k(a={},q.Light,(0,l.css)(v(),s.uiColors.gray.dark2,s.uiColors.gray.light2,s.uiColors.gray.light2)),k(a,q.Dark,(0,l.css)(y(),s.uiColors.white,s.uiColors.gray.dark2,s.uiColors.gray.dark2)),a),T=(0,l.css)(g());var B=u.default.forwardRef((function(e,r){var n=e.variant,t=void 0===n?q.Light:n,o=e.size,i=void 0===o?z.Default:o,a=e.disabled,c=void 0!==a&&a,s=e.active,d=void 0!==s&&s,g=e.className,y=e.href,v=e.children,h=e["aria-label"],m=e["aria-labelledby"],x=p(e,["variant","size","disabled","active","className","href","children","aria-label","aria-labelledby"]);h||m||console.error("For screen-reader accessibility, aria-label or aria-labelledby must be provided to IconButton.");var O=u.default.Children.map(v,(function(e){if((0,f.isComponentType)(e,"Icon")){var r=e.props,n=r.size,t=r.title,o={size:n||i};return"string"==typeof t&&0!==t.length||(o.title=!1),u.default.cloneElement(e,o)}return e})),j=function(){var e,n=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"button";return u.default.createElement(n,b({},x,{ref:r,href:y,tabIndex:c?-1:0,"aria-disabled":c,"aria-label":h,"aria-labelledby":m,className:(0,l.cx)(L,M,D[i],N[t],(e={},k(e,I[t],c),k(e,E[t],d),e),g)}),u.default.createElement("div",{className:T},O))};return function(e){return null!=e.href}(e)?j("a"):j()}));B.displayName="IconButton",B.propTypes={variant:c.default.oneOf(Object.values(q)),size:c.default.oneOf(Object.values(z)),className:c.default.string,children:c.default.node,disabled:c.default.bool,href:c.default.string,active:c.default.bool};var V=B;r.default=V},function(r,n){r.exports=e},function(e,n){e.exports=r},function(e,r){e.exports=n},function(e,r){e.exports=t},function(e,r){e.exports=o}])}));
 //# sourceMappingURL=index.web.js.map

package.json

 {
   "name": "@leafygreen-ui/icon-button",
-  "version": "4.1.6",
+  "version": "5.0.0",
   "description": "LeafyGreen UI Kit Icon Buttons",
@@ -16,6 +16,6 @@ "browser": "./dist/index.web.js",
   "devDependencies": {
-    "@leafygreen-ui/icon": "5.0.1"
+    "@leafygreen-ui/icon": "5.0.2"
   },
   "dependencies": {
-    "@leafygreen-ui/lib": "^4.3.1",
+    "@leafygreen-ui/lib": "^4.4.1",
     "@leafygreen-ui/emotion": "2.0.1",
@@ -22,0 +22,0 @@ "@leafygreen-ui/palette": "2.0.0"

README.md

@@ -24,3 +24,3 @@ # IconButton
 
-<IconButton variant="light" ariaLabel="Ellipsis">
+<IconButton variant="light" aria-label="Some Menu">
   <Icon glyph="Ellipsis" />
@@ -33,6 +33,5 @@ </IconButton>;
 ```html
-<button aria-disabled="false" class="leafygreen-ui-194rp0y" aria-label="Ellipsis>
-  <span class="leafygreen-ui-1rvdyoi">
+<button aria-disabled="false" class="leafygreen-ui-194rp0y" aria-label="Some Menu>
+  <div class="leafygreen-ui-1rvdyoi">
     <svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1">
-      <title>Ellipsis</title>
       <g
@@ -48,3 +47,3 @@ id="Ellipsis-Copy"
     </svg>
-  </span>
+  </div>
 </button>
@@ -63,6 +62,9 @@ ```
 | `children`  | `node`                       | Content rendered inside of the `<IconButton />` component                                                         |           |
-| `ariaLabel` | **Required** `string`        | Value passed to `aria-label` attribute to ensure component's accessibility                                        |           |
 | `size`      | `default`, `large`, `xlarge` | Determines the size of the IconButton                                                                             | `default` |
 | `active`    | `boolean`                    | Determines whether the `<IconButton />` will appear `active`                                                      | `false`   |
 
+### Special Case: Aria Labels
+
+Either `aria-label` or `aria-labelledby` must be provided a string, or there will be a console error. This is to ensure that screenreaders have a description for what the button does, since the button itself doesn't contain any text.
+
 _Any other properties will be spread on the container element._

No alert changes

Improved metrics

Total package byte prevSize

441766

17.02%

Lines of code

656

24.95%

Number of lines in readme file

67

3.08%

Dependency changes

• Updated

  @leafygreen-ui/lib@^4.4.1