@atlaskit/button 16.17.0 → 16.17.2

package/dist/esm/new-button/containers/split-button/split-button.js

@@ -1,16 +1,14 @@
 /** @jsx jsx */
 
 import { css, jsx } from '@emotion/react';
-import { fontSize as getFontSize } from '@atlaskit/theme/constants';
 import { SplitButtonContext } from './split-button-context';
 import { getActions } from './utils';
-var fontSize = getFontSize();
-var defaultDividerHeight = 20 / fontSize + 'em';
+var defaultDividerHeight = '16px';
 var defaultDividerStyles = css({
   height: defaultDividerHeight,
   margin: "var(--ds-space-075, 6px)".concat(" -0.5px")
 });
-var compactDividerHeight = 16 / fontSize + 'em';
+var compactDividerHeight = '12px';
 var compactDividerStyles = css({
   height: compactDividerHeight,
   margin: "var(--ds-space-050, 4px)".concat(" -0.5px")
@@ -21,27 +19,32 @@ var baseDividerStyles = css({
   position: 'relative',
   zIndex: 2
 });
-var disabledStyles = css({
-  backgroundColor: "var(--ds-border, #091E4224)",
+var dividerDisabledStyles = css({
+  backgroundColor: "var(--ds-text-disabled, #091E4224)",
   cursor: 'not-allowed'
 });
 var navigationDividerStyles = css({
   height: compactDividerHeight,
   margin: "var(--ds-space-100, 8px)".concat(" -0.5px"),
-  backgroundColor: "var(--ds-border, #0052cc)"
+  backgroundColor: "var(--ds-text-subtle, #0052cc)",
+  opacity: 0.62
 });
 var dividerAppearance = {
   default: css({
-    backgroundColor: "var(--ds-text, #172B4D)"
+    backgroundColor: "var(--ds-text, #172B4D)",
+    opacity: 0.51
   }),
   primary: css({
-    backgroundColor: "var(--ds-text-inverse, #FFF)"
+    backgroundColor: "var(--ds-text-inverse, #FFF)",
+    opacity: 0.64
   }),
   danger: css({
-    backgroundColor: "var(--ds-text-inverse, #FFF)"
+    backgroundColor: "var(--ds-text-inverse, #FFF)",
+    opacity: 0.66
   }),
   warning: css({
-    backgroundColor: "var(--ds-text-warning-inverse, #172B4D)"
+    backgroundColor: "var(--ds-text-warning-inverse, #172B4D)",
+    opacity: 0.52
   }),
   navigation: navigationDividerStyles
 };
@@ -60,13 +63,14 @@ export var Divider = function Divider(_ref) {
   return (
     // I find it funny to provide a div for Divider
     jsx("div", {
-      css: [baseDividerStyles, dividerAppearance[appearance], dividerHeight[spacing], isDisabled ? disabledStyles : undefined]
+      css: [baseDividerStyles, dividerAppearance[appearance], dividerHeight[spacing], isDisabled ? dividerDisabledStyles : undefined]
     })
   );
 };
 var splitButtonStyles = css({
   display: 'inline-flex',
   position: 'relative',
+  alignItems: 'center',
   whiteSpace: 'nowrap'
 });
 

package/dist/esm/new-button/variants/icon/button.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["analyticsContext", "autoFocus", "appearance", "spacing", "isDisabled", "isSelected", "icon", "children", "interactionName", "overlay", "onClick", "onMouseDownCapture", "onMouseUpCapture", "onKeyDownCapture", "onKeyUpCapture", "onTouchStartCapture", "onTouchEndCapture", "onPointerDownCapture", "onPointerUpCapture", "onClickCapture", "type", "testId"];
+var _excluded = ["analyticsContext", "autoFocus", "appearance", "spacing", "isDisabled", "isSelected", "icon", "interactionName", "label", "overlay", "onClick", "onMouseDownCapture", "onMouseUpCapture", "onKeyDownCapture", "onKeyUpCapture", "onTouchStartCapture", "onTouchEndCapture", "onPointerDownCapture", "onPointerUpCapture", "onClickCapture", "type", "testId", "UNSAFE_size"];
 import React from 'react';
 import UNSAFE_PRESSABLE from '@atlaskit/primitives/pressable';
 import useIconButton from './use-icon-button';
@@ -23,8 +23,8 @@ var IconButton = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
     isDisabled = _ref.isDisabled,
     isSelected = _ref.isSelected,
     icon = _ref.icon,
-    children = _ref.children,
     interactionName = _ref.interactionName,
+    label = _ref.label,
     overlay = _ref.overlay,
     onClick = _ref.onClick,
     onMouseDownCapture = _ref.onMouseDownCapture,
@@ -39,6 +39,7 @@ var IconButton = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
     _ref$type = _ref.type,
     type = _ref$type === void 0 ? 'button' : _ref$type,
     testId = _ref.testId,
+    UNSAFE_size = _ref.UNSAFE_size,
     rest = _objectWithoutProperties(_ref, _excluded);
   /**
    * TODO: At some stage I'll look into re-using more logic across 'default' and 'icon'
@@ -49,11 +50,13 @@ var IconButton = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
     appearance: appearance,
     autoFocus: autoFocus,
     buttonType: 'button',
-    children: children,
+    children: null,
+    // Set in hook.
     icon: icon,
     interactionName: interactionName,
     isDisabled: isDisabled,
     isSelected: isSelected,
+    label: label,
     onClick: onClick,
     onMouseDownCapture: onMouseDownCapture,
     onMouseUpCapture: onMouseUpCapture,
@@ -66,7 +69,8 @@ var IconButton = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
     onClickCapture: onClickCapture,
     overlay: overlay,
     ref: ref,
-    spacing: spacing
+    spacing: spacing,
+    UNSAFE_size: UNSAFE_size
   });
   return /*#__PURE__*/React.createElement(UNSAFE_PRESSABLE, _extends({}, rest, {
     ref: baseProps.ref,

package/dist/esm/new-button/variants/icon/link.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["analyticsContext", "autoFocus", "appearance", "spacing", "isDisabled", "isSelected", "icon", "children", "interactionName", "overlay", "onClick", "onMouseDownCapture", "onMouseUpCapture", "onKeyDownCapture", "onKeyUpCapture", "onTouchStartCapture", "onTouchEndCapture", "onPointerDownCapture", "onPointerUpCapture", "onClickCapture", "testId", "href"];
+var _excluded = ["analyticsContext", "autoFocus", "appearance", "spacing", "isDisabled", "isSelected", "icon", "interactionName", "label", "overlay", "onClick", "onMouseDownCapture", "onMouseUpCapture", "onKeyDownCapture", "onKeyUpCapture", "onTouchStartCapture", "onTouchEndCapture", "onPointerDownCapture", "onPointerUpCapture", "onClickCapture", "testId", "href"];
 import React, { forwardRef, memo } from 'react';
 import UNSAFE_LINK from '@atlaskit/primitives/link';
 import useIconButton from './use-icon-button';
@@ -12,8 +12,8 @@ var LinkIconButtonBase = function LinkIconButtonBase(_ref, ref) {
     isDisabled = _ref.isDisabled,
     isSelected = _ref.isSelected,
     icon = _ref.icon,
-    children = _ref.children,
     interactionName = _ref.interactionName,
+    label = _ref.label,
     overlay = _ref.overlay,
     onClick = _ref.onClick,
     onMouseDownCapture = _ref.onMouseDownCapture,
@@ -33,11 +33,13 @@ var LinkIconButtonBase = function LinkIconButtonBase(_ref, ref) {
     appearance: appearance,
     autoFocus: autoFocus,
     buttonType: 'link',
-    children: children,
+    children: null,
+    // Set in hook.
     icon: icon,
     interactionName: interactionName,
     isDisabled: isDisabled,
     isSelected: isSelected,
+    label: label,
     onClick: onClick,
     onMouseDownCapture: onMouseDownCapture,
     onMouseUpCapture: onMouseUpCapture,

package/dist/esm/new-button/variants/icon/use-icon-button.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import VisuallyHidden from '@atlaskit/visually-hidden';
 import Content from '../shared/content';
 import useButtonBase from '../shared/use-button-base';
 /**
@@ -15,10 +16,11 @@ var useIconButton = function useIconButton(_ref) {
     appearance = _ref.appearance,
     autoFocus = _ref.autoFocus,
     buttonType = _ref.buttonType,
-    icon = _ref.icon,
+    Icon = _ref.icon,
     interactionName = _ref.interactionName,
     isDisabled = _ref.isDisabled,
     isSelected = _ref.isSelected,
+    label = _ref.label,
     onClick = _ref.onClick,
     onMouseDownCapture = _ref.onMouseDownCapture,
     onMouseUpCapture = _ref.onMouseUpCapture,
@@ -32,7 +34,8 @@ var useIconButton = function useIconButton(_ref) {
     overlay = _ref.overlay,
     ref = _ref.ref,
     shouldFitContainer = _ref.shouldFitContainer,
-    spacing = _ref.spacing;
+    spacing = _ref.spacing,
+    UNSAFE_size = _ref.UNSAFE_size;
   var hasOverlay = Boolean(overlay);
   var baseProps = useButtonBase({
     analyticsContext: analyticsContext,
@@ -46,7 +49,10 @@ var useIconButton = function useIconButton(_ref) {
     children: /*#__PURE__*/React.createElement(Content, {
       type: "icon",
       hasOverlay: hasOverlay
-    }, icon),
+    }, /*#__PURE__*/React.createElement(Icon, {
+      label: "",
+      size: UNSAFE_size
+    }), /*#__PURE__*/React.createElement(VisuallyHidden, null, label)),
     interactionName: interactionName,
     isDisabled: isDisabled,
     isSelected: isSelected,

package/dist/esm/new-button/variants/shared/use-button-base.js

@@ -107,7 +107,7 @@ var useButtonBase = function useButtonBase(_ref) {
     action: 'clicked',
     componentName: 'button',
     packageName: "@atlaskit/button",
-    packageVersion: "16.17.0",
+    packageVersion: "16.17.2",
     analyticsData: analyticsContext,
     actionSubject: buttonType
   });

package/dist/esm/old-button/shared/button-base.js

@@ -109,7 +109,7 @@ export default /*#__PURE__*/React.forwardRef(function ButtonBase(props, ref) {
     action: 'clicked',
     componentName: 'button',
     packageName: "@atlaskit/button",
-    packageVersion: "16.17.0",
+    packageVersion: "16.17.2",
     analyticsData: analyticsContext
   });
 

package/dist/esm/utils/variants.js

@@ -1,18 +1,10 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["href", "children"],
-  _excluded2 = ["href", "children", "icon"];
+var _excluded = ["href", "children"];
 import React, { forwardRef } from 'react';
-
-// eslint-disable-next-line import/no-extraneous-dependencies
-import AddIcon from '@atlaskit/icon/glyph/add';
 import Button from '../new-button/variants/default/button';
 import LinkButton from '../new-button/variants/default/link';
-// import IconButton, {
-//   IconButtonProps,
-// } from '../new-button/variants/icon/button';
-import LinkIconButton from '../new-button/variants/icon/link';
-import { buttonAppearances, linkButtonAppearances } from '../utils/appearances';
+import { buttonAppearances, linkButtonAppearances } from './appearances';
 // Add required default props to variants
 var LinkButtonRender = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var _ref$href = _ref.href,
@@ -24,51 +16,11 @@ var LinkButtonRender = /*#__PURE__*/forwardRef(function (_ref, ref) {
     href: href
   }, rest), children);
 });
-
-// TODO: Enable icon button in tests once it's ready
-// const IconButtonRender = forwardRef(
-//   (
-//     {
-//       children,
-//       icon = <AddIcon label="" />,
-//       ...rest
-//     }: Omit<IconButtonProps, 'icon'> & {
-//       icon?: IconButtonProps['icon'];
-//     },
-//     ref: React.Ref<HTMLButtonElement>,
-//   ) => (
-//     <IconButton ref={ref} icon={icon} {...rest}>
-//       {children}
-//     </IconButton>
-//   ),
-// );
-
-var LinkIconButtonRender = /*#__PURE__*/forwardRef(function (_ref2, ref) {
-  var _ref2$href = _ref2.href,
-    href = _ref2$href === void 0 ? '/home' : _ref2$href,
-    children = _ref2.children,
-    _ref2$icon = _ref2.icon,
-    icon = _ref2$icon === void 0 ? /*#__PURE__*/React.createElement(AddIcon, {
-      label: ""
-    }) : _ref2$icon,
-    rest = _objectWithoutProperties(_ref2, _excluded2);
-  return /*#__PURE__*/React.createElement(LinkIconButton, _extends({
-    ref: ref,
-    icon: icon,
-    href: href
-  }, rest), children);
-});
 export var linkButtonVariants = [{
   name: 'LinkButton',
   Component: LinkButtonRender,
   elementType: HTMLAnchorElement,
   appearances: linkButtonAppearances
-}, {
-  name: 'LinkIconButton',
-  Component: LinkIconButtonRender,
-  elementType: HTMLAnchorElement,
-  // TODO: Make specific to icon button
-  appearances: linkButtonAppearances
 }];
 var variants = [{
   name: 'Button',
@@ -80,18 +32,5 @@ var variants = [{
   Component: LinkButtonRender,
   elementType: HTMLAnchorElement,
   appearances: linkButtonAppearances
-}
-// TODO: Enable icon buttons in tests once it's ready
-// {
-//   name: 'IconButton',
-//   Component: IconButtonRender,
-//   elementType: HTMLButtonElement,
-// },
-// {
-//   name: 'LinkIconButton',
-//   Component: LinkIconButtonRender,
-//   elementType: HTMLAnchorElement,
-// },
-];
-
+}];
 export default variants;

package/dist/types/new-button/variants/icon/button.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { type CommonButtonVariantProps } from '../types';
 import { type CommonIconButtonProps } from './types';
-export type IconButtonProps = CommonIconButtonProps & CommonButtonVariantProps;
+export type IconButtonProps = CommonIconButtonProps & Omit<CommonButtonVariantProps, 'children' | 'appearance'>;
 /**
  * __Icon Button__
  *
@@ -13,5 +13,5 @@ export type IconButtonProps = CommonIconButtonProps & CommonButtonVariantProps;
  * - [Code](https://atlassian.design/components/button/code)
  * - [Usage](https://atlassian.design/components/button/usage)
  */
-declare const IconButton: React.MemoExoticComponent<React.ForwardRefExoticComponent<CommonIconButtonProps & import("../types").AdditionalButtonVariantProps & Omit<import("../types").AdditionalHTMLElementPropsExtender<React.ButtonHTMLAttributes<HTMLButtonElement>>, keyof import("../types").CommonButtonProps<TagName>> & import("../types").CommonButtonProps<HTMLButtonElement> & React.RefAttributes<HTMLButtonElement>>>;
+declare const IconButton: React.MemoExoticComponent<React.ForwardRefExoticComponent<CommonIconButtonProps & Omit<CommonButtonVariantProps, "children" | "appearance"> & React.RefAttributes<HTMLButtonElement>>>;
 export default IconButton;

package/dist/types/new-button/variants/icon/link.d.ts

@@ -1,8 +1,8 @@
 import React, { type Ref } from 'react';
 import { type CommonLinkVariantProps } from '../types';
 import { type CommonIconButtonProps } from './types';
-export type LinkIconButtonProps<RouterLinkConfig extends Record<string, any> = never> = CommonIconButtonProps & CommonLinkVariantProps<RouterLinkConfig>;
-declare const LinkIconButtonBase: <RouterLinkConfig extends Record<string, any> = never>({ analyticsContext, autoFocus, appearance, spacing, isDisabled, isSelected, icon, children, interactionName, overlay, onClick, onMouseDownCapture, onMouseUpCapture, onKeyDownCapture, onKeyUpCapture, onTouchStartCapture, onTouchEndCapture, onPointerDownCapture, onPointerUpCapture, onClickCapture, testId, href, ...rest }: LinkIconButtonProps<RouterLinkConfig>, ref: Ref<HTMLAnchorElement>) => JSX.Element;
+export type LinkIconButtonProps<RouterLinkConfig extends Record<string, any> = never> = CommonIconButtonProps & Omit<CommonLinkVariantProps<RouterLinkConfig>, 'children' | 'appearance'>;
+declare const LinkIconButtonBase: <RouterLinkConfig extends Record<string, any> = never>({ analyticsContext, autoFocus, appearance, spacing, isDisabled, isSelected, icon, interactionName, label, overlay, onClick, onMouseDownCapture, onMouseUpCapture, onKeyDownCapture, onKeyUpCapture, onTouchStartCapture, onTouchEndCapture, onPointerDownCapture, onPointerUpCapture, onClickCapture, testId, href, ...rest }: LinkIconButtonProps<RouterLinkConfig>, ref: Ref<HTMLAnchorElement>) => JSX.Element;
 /**
  * __Link Icon Button__
  *
@@ -14,7 +14,7 @@ declare const LinkIconButtonBase: <RouterLinkConfig extends Record<string, any>
  * - [Code](https://atlassian.design/components/button/code)
  * - [Usage](https://atlassian.design/components/button/usage)
  */
-declare const LinkIconButton: <RouterLinkConfig extends Record<string, any> = never>(props: CommonIconButtonProps & import("../types").AdditionalLinkVariantProps<RouterLinkConfig> & Omit<import("../types").AdditionalHTMLElementPropsExtender<Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, "href">>, keyof import("../types").CommonButtonProps<TagName>> & import("../types").CommonButtonProps<HTMLAnchorElement> & {
+declare const LinkIconButton: <RouterLinkConfig extends Record<string, any> = never>(props: CommonIconButtonProps & Omit<CommonLinkVariantProps<RouterLinkConfig>, "children" | "appearance"> & {
     ref?: React.Ref<HTMLAnchorElement> | undefined;
 }) => ReturnType<typeof LinkIconButtonBase>;
 export default LinkIconButton;

package/dist/types/new-button/variants/icon/types.d.ts

@@ -1,8 +1,23 @@
-/// <reference types="react" />
+import React from 'react';
+import { type IconProps, type Size } from '@atlaskit/icon/types';
+import { type IconButtonAppearance } from '../types';
 export type CommonIconButtonProps = {
     /**
-     * TODO: Consider locking-down icon props by converting from slot props to component props
-     * Places an icon within the button, after the button's text
+     * The button style variation
      */
-    icon: React.ReactChild;
+    appearance?: IconButtonAppearance;
+    /**
+     * Places an icon within the button
+     */
+    icon: React.ComponentType<IconProps>;
+    /**
+     * Provide an accessible label, often used by screen readers
+     */
+    label: string;
+    /**
+     * Set the size of the icon
+     *
+     * Set to UNSAFE as it will be removed in future in favour of a 100% bounded API
+     */
+    UNSAFE_size?: Size;
 };

package/dist/types/new-button/variants/icon/use-icon-button.d.ts

@@ -11,5 +11,5 @@ type UseIconButtonReturn<TagName extends HTMLElement> = UseButtonBaseReturn<TagN
  *
  * @private
  */
-declare const useIconButton: <TagName extends HTMLElement>({ analyticsContext, appearance, autoFocus, buttonType, icon, interactionName, isDisabled, isSelected, onClick, onMouseDownCapture, onMouseUpCapture, onKeyDownCapture, onKeyUpCapture, onTouchStartCapture, onTouchEndCapture, onPointerDownCapture, onPointerUpCapture, onClickCapture, overlay, ref, shouldFitContainer, spacing, }: UseIconButtonArgs<TagName>) => UseIconButtonReturn<TagName>;
+declare const useIconButton: <TagName extends HTMLElement>({ analyticsContext, appearance, autoFocus, buttonType, icon: Icon, interactionName, isDisabled, isSelected, label, onClick, onMouseDownCapture, onMouseUpCapture, onKeyDownCapture, onKeyUpCapture, onTouchStartCapture, onTouchEndCapture, onPointerDownCapture, onPointerUpCapture, onClickCapture, overlay, ref, shouldFitContainer, spacing, UNSAFE_size, }: UseIconButtonArgs<TagName>) => UseIconButtonReturn<TagName>;
 export default useIconButton;

package/dist/types/new-button/variants/types.d.ts

@@ -2,7 +2,8 @@ import React from 'react';
 import { UIAnalyticsEvent } from '@atlaskit/analytics-next';
 export type ButtonAppearance = 'default' | 'danger' | 'primary' | 'subtle' | 'warning';
 export type LinkButtonAppearance = 'default' | 'danger' | 'link' | 'primary' | 'subtle' | 'subtle-link' | 'warning';
-export type Appearance = ButtonAppearance | LinkButtonAppearance;
+export type IconButtonAppearance = 'default' | 'primary' | 'subtle';
+export type Appearance = ButtonAppearance | LinkButtonAppearance | IconButtonAppearance;
 export type Spacing = 'compact' | 'default' | 'none';
 type Combine<First, Second> = Omit<First, keyof Second> & Second;
 export type CommonButtonProps<TagName extends HTMLElement> = {
@@ -39,11 +40,11 @@ export type CommonButtonProps<TagName extends HTMLElement> = {
      */
     spacing?: Spacing;
     /**
-     * Text content to be rendered in the button. Required so that screen readers always have an accessible label provided for the button.
+     * Text content to be rendered in the button. Required so that screen readers always have an accessible label provided for the button
      */
     children: React.ReactNode;
     /**
-     * A unique string that appears as data attribute `data-testid` in the rendered code, serving as a hook for automated tests.
+     * A unique string that appears as data attribute `data-testid` in the rendered code, serving as a hook for automated tests
      */
     testId?: string;
     /**
@@ -71,7 +72,7 @@ export type AdditionalButtonVariantProps = {
     appearance?: ButtonAppearance;
 };
 /**
- * Combines common button props with additional HTML attributes.
+ * Combines common button props with additional HTML attributes
  */
 export type CombinedButtonProps<TagName extends HTMLElement, HTMLAttributes extends SupportedElementAttributes> = Combine<HTMLAttributes, CommonButtonProps<TagName>>;
 /**

package/dist/types/utils/variants.d.ts

@@ -1,8 +1,7 @@
 import React from 'react';
 import Button from '../new-button/variants/default/button';
 import { LinkButtonProps } from '../new-button/variants/default/link';
-import { LinkIconButtonProps } from '../new-button/variants/icon/link';
-import { buttonAppearances, linkButtonAppearances } from '../utils/appearances';
+import { buttonAppearances, linkButtonAppearances } from './appearances';
 export type Variant = {
     name: 'Button';
     Component: typeof Button;
@@ -17,7 +16,7 @@ export type Variant = {
 declare const LinkButtonRender: React.ForwardRefExoticComponent<Omit<LinkButtonProps<never>, "href"> & {
     href?: string | undefined;
 } & React.RefAttributes<HTMLAnchorElement>>;
-export declare const linkButtonVariants: ({
+export declare const linkButtonVariants: {
     name: string;
     Component: React.ForwardRefExoticComponent<Omit<LinkButtonProps<never>, "href"> & {
         href?: string | undefined;
@@ -27,17 +26,6 @@ export declare const linkButtonVariants: ({
         prototype: HTMLAnchorElement;
     };
     appearances: import("../new-button/variants/types").LinkButtonAppearance[];
-} | {
-    name: string;
-    Component: React.ForwardRefExoticComponent<Omit<LinkIconButtonProps<never>, "href" | "icon"> & {
-        href?: string | undefined;
-        icon?: React.ReactChild | undefined;
-    } & React.RefAttributes<HTMLAnchorElement>>;
-    elementType: {
-        new (): HTMLAnchorElement;
-        prototype: HTMLAnchorElement;
-    };
-    appearances: import("../new-button/variants/types").LinkButtonAppearance[];
-})[];
+}[];
 declare const variants: Variant[];
 export default variants;

package/dist/types-ts4.5/new-button/variants/icon/button.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { type CommonButtonVariantProps } from '../types';
 import { type CommonIconButtonProps } from './types';
-export type IconButtonProps = CommonIconButtonProps & CommonButtonVariantProps;
+export type IconButtonProps = CommonIconButtonProps & Omit<CommonButtonVariantProps, 'children' | 'appearance'>;
 /**
  * __Icon Button__
  *
@@ -13,5 +13,5 @@ export type IconButtonProps = CommonIconButtonProps & CommonButtonVariantProps;
  * - [Code](https://atlassian.design/components/button/code)
  * - [Usage](https://atlassian.design/components/button/usage)
  */
-declare const IconButton: React.MemoExoticComponent<React.ForwardRefExoticComponent<CommonIconButtonProps & import("../types").AdditionalButtonVariantProps & Omit<import("../types").AdditionalHTMLElementPropsExtender<React.ButtonHTMLAttributes<HTMLButtonElement>>, keyof import("../types").CommonButtonProps<TagName>> & import("../types").CommonButtonProps<HTMLButtonElement> & React.RefAttributes<HTMLButtonElement>>>;
+declare const IconButton: React.MemoExoticComponent<React.ForwardRefExoticComponent<CommonIconButtonProps & Omit<CommonButtonVariantProps, "children" | "appearance"> & React.RefAttributes<HTMLButtonElement>>>;
 export default IconButton;

package/dist/types-ts4.5/new-button/variants/icon/link.d.ts

@@ -1,8 +1,8 @@
 import React, { type Ref } from 'react';
 import { type CommonLinkVariantProps } from '../types';
 import { type CommonIconButtonProps } from './types';
-export type LinkIconButtonProps<RouterLinkConfig extends Record<string, any> = never> = CommonIconButtonProps & CommonLinkVariantProps<RouterLinkConfig>;
-declare const LinkIconButtonBase: <RouterLinkConfig extends Record<string, any> = never>({ analyticsContext, autoFocus, appearance, spacing, isDisabled, isSelected, icon, children, interactionName, overlay, onClick, onMouseDownCapture, onMouseUpCapture, onKeyDownCapture, onKeyUpCapture, onTouchStartCapture, onTouchEndCapture, onPointerDownCapture, onPointerUpCapture, onClickCapture, testId, href, ...rest }: LinkIconButtonProps<RouterLinkConfig>, ref: Ref<HTMLAnchorElement>) => JSX.Element;
+export type LinkIconButtonProps<RouterLinkConfig extends Record<string, any> = never> = CommonIconButtonProps & Omit<CommonLinkVariantProps<RouterLinkConfig>, 'children' | 'appearance'>;
+declare const LinkIconButtonBase: <RouterLinkConfig extends Record<string, any> = never>({ analyticsContext, autoFocus, appearance, spacing, isDisabled, isSelected, icon, interactionName, label, overlay, onClick, onMouseDownCapture, onMouseUpCapture, onKeyDownCapture, onKeyUpCapture, onTouchStartCapture, onTouchEndCapture, onPointerDownCapture, onPointerUpCapture, onClickCapture, testId, href, ...rest }: LinkIconButtonProps<RouterLinkConfig>, ref: Ref<HTMLAnchorElement>) => JSX.Element;
 /**
  * __Link Icon Button__
  *
@@ -14,7 +14,7 @@ declare const LinkIconButtonBase: <RouterLinkConfig extends Record<string, any>
  * - [Code](https://atlassian.design/components/button/code)
  * - [Usage](https://atlassian.design/components/button/usage)
  */
-declare const LinkIconButton: <RouterLinkConfig extends Record<string, any> = never>(props: CommonIconButtonProps & import("../types").AdditionalLinkVariantProps<RouterLinkConfig> & Omit<import("../types").AdditionalHTMLElementPropsExtender<Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, "href">>, keyof import("../types").CommonButtonProps<TagName>> & import("../types").CommonButtonProps<HTMLAnchorElement> & {
+declare const LinkIconButton: <RouterLinkConfig extends Record<string, any> = never>(props: CommonIconButtonProps & Omit<CommonLinkVariantProps<RouterLinkConfig>, "children" | "appearance"> & {
     ref?: React.Ref<HTMLAnchorElement> | undefined;
 }) => ReturnType<typeof LinkIconButtonBase>;
 export default LinkIconButton;

package/dist/types-ts4.5/new-button/variants/icon/types.d.ts

@@ -1,8 +1,23 @@
-/// <reference types="react" />
+import React from 'react';
+import { type IconProps, type Size } from '@atlaskit/icon/types';
+import { type IconButtonAppearance } from '../types';
 export type CommonIconButtonProps = {
     /**
-     * TODO: Consider locking-down icon props by converting from slot props to component props
-     * Places an icon within the button, after the button's text
+     * The button style variation
      */
-    icon: React.ReactChild;
+    appearance?: IconButtonAppearance;
+    /**
+     * Places an icon within the button
+     */
+    icon: React.ComponentType<IconProps>;
+    /**
+     * Provide an accessible label, often used by screen readers
+     */
+    label: string;
+    /**
+     * Set the size of the icon
+     *
+     * Set to UNSAFE as it will be removed in future in favour of a 100% bounded API
+     */
+    UNSAFE_size?: Size;
 };

package/dist/types-ts4.5/new-button/variants/icon/use-icon-button.d.ts

@@ -11,5 +11,5 @@ type UseIconButtonReturn<TagName extends HTMLElement> = UseButtonBaseReturn<TagN
  *
  * @private
  */
-declare const useIconButton: <TagName extends HTMLElement>({ analyticsContext, appearance, autoFocus, buttonType, icon, interactionName, isDisabled, isSelected, onClick, onMouseDownCapture, onMouseUpCapture, onKeyDownCapture, onKeyUpCapture, onTouchStartCapture, onTouchEndCapture, onPointerDownCapture, onPointerUpCapture, onClickCapture, overlay, ref, shouldFitContainer, spacing, }: UseIconButtonArgs<TagName>) => UseIconButtonReturn<TagName>;
+declare const useIconButton: <TagName extends HTMLElement>({ analyticsContext, appearance, autoFocus, buttonType, icon: Icon, interactionName, isDisabled, isSelected, label, onClick, onMouseDownCapture, onMouseUpCapture, onKeyDownCapture, onKeyUpCapture, onTouchStartCapture, onTouchEndCapture, onPointerDownCapture, onPointerUpCapture, onClickCapture, overlay, ref, shouldFitContainer, spacing, UNSAFE_size, }: UseIconButtonArgs<TagName>) => UseIconButtonReturn<TagName>;
 export default useIconButton;

package/dist/types-ts4.5/new-button/variants/types.d.ts

@@ -2,7 +2,8 @@ import React from 'react';
 import { UIAnalyticsEvent } from '@atlaskit/analytics-next';
 export type ButtonAppearance = 'default' | 'danger' | 'primary' | 'subtle' | 'warning';
 export type LinkButtonAppearance = 'default' | 'danger' | 'link' | 'primary' | 'subtle' | 'subtle-link' | 'warning';
-export type Appearance = ButtonAppearance | LinkButtonAppearance;
+export type IconButtonAppearance = 'default' | 'primary' | 'subtle';
+export type Appearance = ButtonAppearance | LinkButtonAppearance | IconButtonAppearance;
 export type Spacing = 'compact' | 'default' | 'none';
 type Combine<First, Second> = Omit<First, keyof Second> & Second;
 export type CommonButtonProps<TagName extends HTMLElement> = {
@@ -39,11 +40,11 @@ export type CommonButtonProps<TagName extends HTMLElement> = {
      */
     spacing?: Spacing;
     /**
-     * Text content to be rendered in the button. Required so that screen readers always have an accessible label provided for the button.
+     * Text content to be rendered in the button. Required so that screen readers always have an accessible label provided for the button
      */
     children: React.ReactNode;
     /**
-     * A unique string that appears as data attribute `data-testid` in the rendered code, serving as a hook for automated tests.
+     * A unique string that appears as data attribute `data-testid` in the rendered code, serving as a hook for automated tests
      */
     testId?: string;
     /**
@@ -71,7 +72,7 @@ export type AdditionalButtonVariantProps = {
     appearance?: ButtonAppearance;
 };
 /**
- * Combines common button props with additional HTML attributes.
+ * Combines common button props with additional HTML attributes
  */
 export type CombinedButtonProps<TagName extends HTMLElement, HTMLAttributes extends SupportedElementAttributes> = Combine<HTMLAttributes, CommonButtonProps<TagName>>;
 /**

package/dist/types-ts4.5/utils/variants.d.ts

@@ -1,8 +1,7 @@
 import React from 'react';
 import Button from '../new-button/variants/default/button';
 import { LinkButtonProps } from '../new-button/variants/default/link';
-import { LinkIconButtonProps } from '../new-button/variants/icon/link';
-import { buttonAppearances, linkButtonAppearances } from '../utils/appearances';
+import { buttonAppearances, linkButtonAppearances } from './appearances';
 export type Variant = {
     name: 'Button';
     Component: typeof Button;
@@ -17,7 +16,7 @@ export type Variant = {
 declare const LinkButtonRender: React.ForwardRefExoticComponent<Omit<LinkButtonProps<never>, "href"> & {
     href?: string | undefined;
 } & React.RefAttributes<HTMLAnchorElement>>;
-export declare const linkButtonVariants: ({
+export declare const linkButtonVariants: {
     name: string;
     Component: React.ForwardRefExoticComponent<Omit<LinkButtonProps<never>, "href"> & {
         href?: string | undefined;
@@ -27,17 +26,6 @@ export declare const linkButtonVariants: ({
         prototype: HTMLAnchorElement;
     };
     appearances: import("../new-button/variants/types").LinkButtonAppearance[];
-} | {
-    name: string;
-    Component: React.ForwardRefExoticComponent<Omit<LinkIconButtonProps<never>, "href" | "icon"> & {
-        href?: string | undefined;
-        icon?: React.ReactChild | undefined;
-    } & React.RefAttributes<HTMLAnchorElement>>;
-    elementType: {
-        new (): HTMLAnchorElement;
-        prototype: HTMLAnchorElement;
-    };
-    appearances: import("../new-button/variants/types").LinkButtonAppearance[];
-})[];
+}[];
 declare const variants: Variant[];
 export default variants;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/button",
-  "version": "16.17.0",
+  "version": "16.17.2",
   "description": "A button triggers an event or action. They let users know what will happen next.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -79,9 +79,10 @@
     "@atlaskit/analytics-next": "^9.1.0",
     "@atlaskit/ds-lib": "^2.2.0",
     "@atlaskit/focus-ring": "^1.3.0",
+    "@atlaskit/icon": "^22.0.0",
     "@atlaskit/interaction-context": "^2.1.0",
     "@atlaskit/platform-feature-flags": "^0.2.0",
-    "@atlaskit/primitives": "^1.11.0",
+    "@atlaskit/primitives": "^1.12.0",
     "@atlaskit/spinner": "^16.0.0",
     "@atlaskit/theme": "^12.6.0",
     "@atlaskit/tokens": "^1.28.0",
@@ -97,7 +98,6 @@
     "@af/integration-testing": "*",
     "@af/visual-regression": "*",
     "@atlaskit/app-provider": "^0.4.0",
-    "@atlaskit/icon": "^22.0.0",
     "@atlaskit/ssr": "*",
     "@atlaskit/visual-regression": "*",
     "@atlaskit/webdriver-runner": "*",