@instructure/ui-buttons 10.16.0 → 10.16.1-pr-snapshot-1744893671793

package/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [10.16.1-pr-snapshot-1744893671793](https://github.com/instructure/instructure-ui/compare/v10.16.0...v10.16.1-pr-snapshot-1744893671793) (2025-04-17)
+
+**Note:** Version bump only for package @instructure/ui-buttons
+
+
+
+
+
 # [10.16.0](https://github.com/instructure/instructure-ui/compare/v10.15.2...v10.16.0) (2025-04-11)
 
 

package/es/BaseButton/__new-tests__/BaseButton.test.js

@@ -23,13 +23,13 @@ var _BaseButton, _BaseButton2, _BaseButton3, _BaseButton4, _BaseButton5, _svg, _
  * SOFTWARE.
  */
 
-import React from 'react';
 import { render, screen, waitFor } from '@testing-library/react';
 import { vi } from 'vitest';
 import userEvent from '@testing-library/user-event';
 import '@testing-library/jest-dom';
 import { BaseButton } from '../index';
 import { runAxeCheck } from '@instructure/ui-axe-check';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@emotion/react/jsx-runtime";
 describe('<BaseButton/>', () => {
   let consoleWarningMock;
   let consoleErrorMock;
@@ -43,21 +43,26 @@ describe('<BaseButton/>', () => {
     consoleErrorMock.mockRestore();
   });
   it('should render a button and the children as button text', () => {
-    render(_BaseButton || (_BaseButton = /*#__PURE__*/React.createElement(BaseButton, null, "Hello World")));
+    render(_BaseButton || (_BaseButton = _jsx(BaseButton, {
+      children: "Hello World"
+    })));
     const button = document.querySelector('button');
     expect(button).toBeInTheDocument();
     expect(button).toHaveTextContent('Hello World');
   });
   it('should not error with a null child', () => {
-    render(_BaseButton2 || (_BaseButton2 = /*#__PURE__*/React.createElement(BaseButton, null, "Hello World", null)));
+    render(_BaseButton2 || (_BaseButton2 = _jsxs(BaseButton, {
+      children: ["Hello World", null]
+    })));
     const button = document.querySelector('button');
     expect(button).toBeInTheDocument();
     expect(button).toHaveTextContent('Hello World');
   });
   it('should render a link styled as a button if href is provided', () => {
-    render(_BaseButton3 || (_BaseButton3 = /*#__PURE__*/React.createElement(BaseButton, {
-      href: "example.html"
-    }, "Hello World")));
+    render(_BaseButton3 || (_BaseButton3 = _jsx(BaseButton, {
+      href: "example.html",
+      children: "Hello World"
+    })));
     const linkButton = screen.getByRole('link', {
       name: 'Hello World'
     });
@@ -65,17 +70,19 @@ describe('<BaseButton/>', () => {
     expect(linkButton).toHaveAttribute('href', 'example.html');
   });
   it('should render as a link when `to` prop is provided', () => {
-    const _render = render(_BaseButton4 || (_BaseButton4 = /*#__PURE__*/React.createElement(BaseButton, {
-        to: "/example"
-      }, "Test"))),
+    const _render = render(_BaseButton4 || (_BaseButton4 = _jsx(BaseButton, {
+        to: "/example",
+        children: "Test"
+      }))),
       container = _render.container;
     const linkButton = container.querySelector('a');
     expect(linkButton.getAttribute('to')).toBe('/example');
   });
   it('should render designated tag if `as` prop is specified', () => {
-    const _render2 = render(_BaseButton5 || (_BaseButton5 = /*#__PURE__*/React.createElement(BaseButton, {
-        as: "span"
-      }, "Hello World"))),
+    const _render2 = render(_BaseButton5 || (_BaseButton5 = _jsx(BaseButton, {
+        as: "span",
+        children: "Hello World"
+      }))),
       container = _render2.container;
     const button = container.querySelector('[type="button"]');
     expect(button).toBeInTheDocument();
@@ -84,10 +91,11 @@ describe('<BaseButton/>', () => {
   });
   it('should set role="button"', () => {
     const onClick = vi.fn();
-    const _render3 = render(/*#__PURE__*/React.createElement(BaseButton, {
+    const _render3 = render(_jsx(BaseButton, {
         as: "span",
-        onClick: onClick
-      }, "Hello World")),
+        onClick: onClick,
+        children: "Hello World"
+      })),
       container = _render3.container;
     const button = container.querySelector('span[type="button"]');
     expect(button).toBeInTheDocument();
@@ -95,10 +103,11 @@ describe('<BaseButton/>', () => {
   });
   it('should set tabIndex="0"', () => {
     const onClick = vi.fn();
-    render(/*#__PURE__*/React.createElement(BaseButton, {
+    render(_jsx(BaseButton, {
       as: "span",
-      onClick: onClick
-    }, "Hello World"));
+      onClick: onClick,
+      children: "Hello World"
+    }));
     const button = screen.getByRole('button', {
       name: 'Hello World'
     });
@@ -107,13 +116,17 @@ describe('<BaseButton/>', () => {
   });
   it('should not set tabIndex="0" when the element has it by default', () => {
     const onClick = vi.fn();
-    render(/*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(BaseButton, {
-      as: "button",
-      onClick: onClick
-    }, "Hello Button"), /*#__PURE__*/React.createElement(BaseButton, {
-      onClick: onClick,
-      href: "example.html"
-    }, "Hello link")));
+    render(_jsxs(_Fragment, {
+      children: [_jsx(BaseButton, {
+        as: "button",
+        onClick: onClick,
+        children: "Hello Button"
+      }), _jsx(BaseButton, {
+        onClick: onClick,
+        href: "example.html",
+        children: "Hello link"
+      })]
+    }));
     const button = screen.getByRole('button', {
       name: 'Hello Button'
     });
@@ -127,10 +140,11 @@ describe('<BaseButton/>', () => {
   });
   it('should pass down the type prop to the button element', async () => {
     const onClick = vi.fn();
-    render(/*#__PURE__*/React.createElement(BaseButton, {
+    render(_jsx(BaseButton, {
       type: "submit",
-      onClick: onClick
-    }, "Hello World"));
+      onClick: onClick,
+      children: "Hello World"
+    }));
     const button = screen.getByRole('button', {
       name: 'Hello World'
     });
@@ -138,19 +152,24 @@ describe('<BaseButton/>', () => {
     expect(button).toHaveAttribute('type', 'submit');
   });
   it('should pass down an icon via the icon property', () => {
-    const SomeIcon = () => _svg || (_svg = /*#__PURE__*/React.createElement("svg", null, /*#__PURE__*/React.createElement("circle", {
-      cx: "25",
-      cy: "75",
-      r: "20"
-    })));
-    render(/*#__PURE__*/React.createElement(BaseButton, {
-      renderIcon: SomeIcon
-    }, "Hello World"));
+    const SomeIcon = () => _svg || (_svg = _jsx("svg", {
+      children: _jsx("circle", {
+        cx: "25",
+        cy: "75",
+        r: "20"
+      })
+    }));
+    render(_jsx(BaseButton, {
+      renderIcon: SomeIcon,
+      children: "Hello World"
+    }));
     const icon = document.querySelector('svg');
     expect(icon).toBeInTheDocument();
   });
   it('focuses with the focus helper', async () => {
-    render(_BaseButton6 || (_BaseButton6 = /*#__PURE__*/React.createElement(BaseButton, null, "Hello World")));
+    render(_BaseButton6 || (_BaseButton6 = _jsx(BaseButton, {
+      children: "Hello World"
+    })));
     const button = screen.getByRole('button', {
       name: 'Hello World'
     });
@@ -159,9 +178,10 @@ describe('<BaseButton/>', () => {
   });
   it('should provide an elementRef prop', async () => {
     const elementRef = vi.fn();
-    render(/*#__PURE__*/React.createElement(BaseButton, {
-      elementRef: elementRef
-    }, "Hello World"));
+    render(_jsx(BaseButton, {
+      elementRef: elementRef,
+      children: "Hello World"
+    }));
     const button = screen.getByRole('button', {
       name: 'Hello World'
     });
@@ -170,9 +190,10 @@ describe('<BaseButton/>', () => {
   describe('onClick', () => {
     it('should call onClick when clicked', async () => {
       const onClick = vi.fn();
-      render(/*#__PURE__*/React.createElement(BaseButton, {
-        onClick: onClick
-      }, "Hello World"));
+      render(_jsx(BaseButton, {
+        onClick: onClick,
+        children: "Hello World"
+      }));
       const button = screen.getByRole('button', {
         name: 'Hello World'
       });
@@ -183,10 +204,11 @@ describe('<BaseButton/>', () => {
     });
     it('should not call onClick when interaction is "disabled"', async () => {
       const onClick = vi.fn();
-      render(/*#__PURE__*/React.createElement(BaseButton, {
+      render(_jsx(BaseButton, {
         interaction: "disabled",
-        onClick: onClick
-      }, "Hello World"));
+        onClick: onClick,
+        children: "Hello World"
+      }));
       const button = screen.getByRole('button', {
         name: 'Hello World'
       });
@@ -197,10 +219,11 @@ describe('<BaseButton/>', () => {
     });
     it('should not call onClick when disabled is set"', async () => {
       const onClick = vi.fn();
-      render(/*#__PURE__*/React.createElement(BaseButton, {
+      render(_jsx(BaseButton, {
         disabled: true,
-        onClick: onClick
-      }, "Hello World"));
+        onClick: onClick,
+        children: "Hello World"
+      }));
       const button = screen.getByRole('button', {
         name: 'Hello World'
       });
@@ -211,10 +234,11 @@ describe('<BaseButton/>', () => {
     });
     it('should not call onClick when interaction is "readonly"', async () => {
       const onClick = vi.fn();
-      render(/*#__PURE__*/React.createElement(BaseButton, {
+      render(_jsx(BaseButton, {
         interaction: "readonly",
-        onClick: onClick
-      }, "Hello World"));
+        onClick: onClick,
+        children: "Hello World"
+      }));
       const button = screen.getByRole('button', {
         name: 'Hello World'
       });
@@ -225,10 +249,11 @@ describe('<BaseButton/>', () => {
     });
     it('should not call onClick when readOnly is set', async () => {
       const onClick = vi.fn();
-      render(/*#__PURE__*/React.createElement(BaseButton, {
+      render(_jsx(BaseButton, {
         readOnly: true,
-        onClick: onClick
-      }, "Hello World"));
+        onClick: onClick,
+        children: "Hello World"
+      }));
       const button = screen.getByRole('button', {
         name: 'Hello World'
       });
@@ -239,9 +264,10 @@ describe('<BaseButton/>', () => {
     });
     it('should not call onClick when button is disabled and an href prop is provided', async () => {
       const onClick = vi.fn();
-      render(_BaseButton7 || (_BaseButton7 = /*#__PURE__*/React.createElement(BaseButton, {
-        href: "#"
-      }, "Hello World")));
+      render(_BaseButton7 || (_BaseButton7 = _jsx(BaseButton, {
+        href: "#",
+        children: "Hello World"
+      })));
       const button = screen.getByRole('link', {
         name: 'Hello World'
       });
@@ -252,11 +278,12 @@ describe('<BaseButton/>', () => {
     });
     it('should not call onClick when interaction is "readonly" and an href prop is provided', async () => {
       const onClick = vi.fn();
-      render(/*#__PURE__*/React.createElement(BaseButton, {
+      render(_jsx(BaseButton, {
         interaction: "readonly",
         onClick: onClick,
-        href: "#"
-      }, "Hello World"));
+        href: "#",
+        children: "Hello World"
+      }));
       const button = screen.getByRole('link', {
         name: 'Hello World'
       });
@@ -267,10 +294,11 @@ describe('<BaseButton/>', () => {
     });
     it('should call onClick when space key is pressed if href is provided', async () => {
       const onClick = vi.fn();
-      render(/*#__PURE__*/React.createElement(BaseButton, {
+      render(_jsx(BaseButton, {
         onClick: onClick,
-        href: "#"
-      }, "Hello World"));
+        href: "#",
+        children: "Hello World"
+      }));
       const button = screen.getByRole('link', {
         name: 'Hello World'
       });
@@ -281,10 +309,11 @@ describe('<BaseButton/>', () => {
     });
     it('should call onClick when enter key is pressed when not a button or link', async () => {
       const onClick = vi.fn();
-      render(/*#__PURE__*/React.createElement(BaseButton, {
+      render(_jsx(BaseButton, {
         as: "span",
-        onClick: onClick
-      }, "Hello World"));
+        onClick: onClick,
+        children: "Hello World"
+      }));
       const button = screen.getByRole('button', {
         name: 'Hello World'
       });
@@ -295,11 +324,12 @@ describe('<BaseButton/>', () => {
     });
     it('should not call onClick when interaction is "disabled" and space key is pressed', async () => {
       const onClick = vi.fn();
-      render(/*#__PURE__*/React.createElement(BaseButton, {
+      render(_jsx(BaseButton, {
         interaction: "disabled",
         onClick: onClick,
-        href: "#"
-      }, "Hello World"));
+        href: "#",
+        children: "Hello World"
+      }));
       const button = screen.getByRole('link', {
         name: 'Hello World'
       });
@@ -310,11 +340,12 @@ describe('<BaseButton/>', () => {
     });
     it('should not call onClick when interaction is "readonly" and space key is pressed', async () => {
       const onClick = vi.fn();
-      render(/*#__PURE__*/React.createElement(BaseButton, {
+      render(_jsx(BaseButton, {
         interaction: "readonly",
         onClick: onClick,
-        href: "#"
-      }, "Hello World"));
+        href: "#",
+        children: "Hello World"
+      }));
       const button = screen.getByRole('link', {
         name: 'Hello World'
       });
@@ -326,7 +357,9 @@ describe('<BaseButton/>', () => {
   });
   describe('when passing down props to View', () => {
     it("passes cursor='pointer' to View by default", async () => {
-      render(_BaseButton8 || (_BaseButton8 = /*#__PURE__*/React.createElement(BaseButton, null, "Hello World")));
+      render(_BaseButton8 || (_BaseButton8 = _jsx(BaseButton, {
+        children: "Hello World"
+      })));
       const button = screen.getByRole('button', {
         name: 'Hello World'
       });
@@ -334,9 +367,10 @@ describe('<BaseButton/>', () => {
       expect(style.cursor).toBe('pointer');
     });
     it("passes cursor='not-allowed' to View when disabled", async () => {
-      render(_BaseButton9 || (_BaseButton9 = /*#__PURE__*/React.createElement(BaseButton, {
-        interaction: "disabled"
-      }, "Hello World")));
+      render(_BaseButton9 || (_BaseButton9 = _jsx(BaseButton, {
+        interaction: "disabled",
+        children: "Hello World"
+      })));
       const button = screen.getByRole('button', {
         name: 'Hello World'
       });
@@ -347,9 +381,10 @@ describe('<BaseButton/>', () => {
   describe('for a11y', () => {
     it('should meet standards when onClick is given', async () => {
       const onClick = vi.fn();
-      render(/*#__PURE__*/React.createElement(BaseButton, {
-        onClick: onClick
-      }, "Hello World"));
+      render(_jsx(BaseButton, {
+        onClick: onClick,
+        children: "Hello World"
+      }));
       const button = screen.getByRole('button', {
         name: 'Hello World'
       });
@@ -361,9 +396,10 @@ describe('<BaseButton/>', () => {
     });
     describe('when disabled', () => {
       it('sets the disabled attribute so that the button is not in tab order', () => {
-        render(_BaseButton10 || (_BaseButton10 = /*#__PURE__*/React.createElement(BaseButton, {
-          interaction: "disabled"
-        }, "Hello World")));
+        render(_BaseButton10 || (_BaseButton10 = _jsx(BaseButton, {
+          interaction: "disabled",
+          children: "Hello World"
+        })));
         const button = screen.getByRole('button', {
           name: 'Hello World'
         });
@@ -372,9 +408,10 @@ describe('<BaseButton/>', () => {
     });
     describe('when readonly', () => {
       it('sets the disabled attribute so that the button is not in tab order', async () => {
-        render(_BaseButton11 || (_BaseButton11 = /*#__PURE__*/React.createElement(BaseButton, {
-          interaction: "readonly"
-        }, "Hello World")));
+        render(_BaseButton11 || (_BaseButton11 = _jsx(BaseButton, {
+          interaction: "readonly",
+          children: "Hello World"
+        })));
         const button = screen.getByRole('button', {
           name: 'Hello World'
         });

package/es/BaseButton/index.js

@@ -25,18 +25,18 @@ var _dec, _dec2, _class, _BaseButton;
  * SOFTWARE.
  */
 
-/** @jsx jsx */
-import React, { Component } from 'react';
+import { Component } from 'react';
 import keycode from 'keycode';
 import { testable } from '@instructure/ui-testable';
 import { getElementType, getInteraction, passthroughProps, callRenderProp } from '@instructure/ui-react-utils';
 import { isActiveElement } from '@instructure/ui-dom-utils';
 import { hasVisibleChildren } from '@instructure/ui-a11y-utils';
 import { View } from '@instructure/ui-view';
-import { withStyle, jsx } from '@instructure/emotion';
+import { withStyle } from '@instructure/emotion';
 import generateStyles from './styles';
 import generateComponentTheme from './theme';
 import { propTypes, allowedProps } from './props';
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 /**
 ---
 category: components/utilities
@@ -159,28 +159,32 @@ let BaseButton = (_dec = withStyle(generateStyles, generateComponentTheme), _dec
       renderIcon = _this$props6.renderIcon,
       children = _this$props6.children,
       styles = _this$props6.styles;
-    const wrappedChildren = jsx("span", {
-      css: styles === null || styles === void 0 ? void 0 : styles.children
-    }, children);
+    const wrappedChildren = _jsx("span", {
+      css: styles === null || styles === void 0 ? void 0 : styles.children,
+      children: children
+    });
     if (!renderIcon) {
       return wrappedChildren;
     }
     const hasOnlyIconVisible = this.hasOnlyIconVisible;
-    const wrappedIcon = jsx("span", {
-      css: styles === null || styles === void 0 ? void 0 : styles.iconSVG
-    }, callRenderProp(renderIcon));
-    const flexChildren = hasOnlyIconVisible ? jsx("span", {
-      css: styles === null || styles === void 0 ? void 0 : styles.iconOnly
-    }, wrappedIcon, children) : [jsx("span", {
-      key: "icon",
-      css: styles === null || styles === void 0 ? void 0 : styles.iconWrapper
-    }, wrappedIcon), jsx("span", {
-      key: "children",
-      css: styles === null || styles === void 0 ? void 0 : styles.childrenWrapper
-    }, wrappedChildren)];
-    return jsx("span", {
-      css: styles === null || styles === void 0 ? void 0 : styles.childrenLayout
-    }, flexChildren);
+    const wrappedIcon = _jsx("span", {
+      css: styles === null || styles === void 0 ? void 0 : styles.iconSVG,
+      children: callRenderProp(renderIcon)
+    });
+    const flexChildren = hasOnlyIconVisible ? _jsxs("span", {
+      css: styles === null || styles === void 0 ? void 0 : styles.iconOnly,
+      children: [wrappedIcon, children]
+    }) : [_jsx("span", {
+      css: styles === null || styles === void 0 ? void 0 : styles.iconWrapper,
+      children: wrappedIcon
+    }, "icon"), _jsx("span", {
+      css: styles === null || styles === void 0 ? void 0 : styles.childrenWrapper,
+      children: wrappedChildren
+    }, "children")];
+    return _jsx("span", {
+      css: styles === null || styles === void 0 ? void 0 : styles.childrenLayout,
+      children: flexChildren
+    });
   }
   render() {
     var _styles$content;
@@ -225,7 +229,8 @@ let BaseButton = (_dec = withStyle(generateStyles, generateComponentTheme), _dec
     if (onClick && as && needsZeroTabIndex) {
       tabIndexValue = tabIndex || 0;
     }
-    return jsx(View, Object.assign({}, passthroughProps(props), {
+    return _jsx(View, {
+      ...passthroughProps(props),
       as: elementType,
       focusColor: this.focusColor,
       position: "relative",
@@ -246,10 +251,12 @@ let BaseButton = (_dec = withStyle(generateStyles, generateComponentTheme), _dec
       tabIndex: tabIndexValue,
       disabled: isDisabled || isReadOnly,
       css: isEnabled ? styles === null || styles === void 0 ? void 0 : styles.baseButton : null,
-      focusRingBorderRadius: String(styles === null || styles === void 0 ? void 0 : (_styles$content = styles.content) === null || _styles$content === void 0 ? void 0 : _styles$content.borderRadius)
-    }), jsx("span", {
-      css: styles === null || styles === void 0 ? void 0 : styles.content
-    }, this.renderChildren()));
+      focusRingBorderRadius: String(styles === null || styles === void 0 ? void 0 : (_styles$content = styles.content) === null || _styles$content === void 0 ? void 0 : _styles$content.borderRadius),
+      children: _jsx("span", {
+        css: styles === null || styles === void 0 ? void 0 : styles.content,
+        children: this.renderChildren()
+      })
+    });
   }
 }, _BaseButton.displayName = "BaseButton", _BaseButton.componentId = 'BaseButton', _BaseButton.propTypes = propTypes, _BaseButton.allowedProps = allowedProps, _BaseButton.defaultProps = {
   type: 'button',