@workday/canvas-kit-react 7.0.0-alpha.0-next.7 → 7.0.0-alpha.78-next.6

package/dist/es6/text-input/lib/InputIconContainer.d.ts

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { GrowthBehavior } from '@workday/canvas-kit-react/common';
 import { SystemIcon } from '@workday/canvas-kit-react/icon';
 export interface InputIconContainerProps extends GrowthBehavior {
-    icon?: React.ReactElement<SystemIcon>;
+    icon?: React.ReactElement<typeof SystemIcon>;
 }
 declare const InputIconContainer: React.FunctionComponent<InputIconContainerProps>;
 export default InputIconContainer;

package/dist/es6/text-input/lib/InputIconContainer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"InputIconContainer.d.ts","sourceRoot":"","sources":["../../../../text-input/lib/InputIconContainer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAC,cAAc,EAAC,MAAM,kCAAkC,CAAC;AAEhE,OAAO,EAAC,UAAU,EAAC,MAAM,gCAAgC,CAAC;AAE1D,MAAM,WAAW,uBAAwB,SAAQ,cAAc;IAC7D,IAAI,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,UAAU,CAAC,CAAC;CACvC;AAaD,QAAA,MAAM,kBAAkB,EAAE,KAAK,CAAC,iBAAiB,CAAC,uBAAuB,CASxE,CAAC;AAEF,eAAe,kBAAkB,CAAC"}
+{"version":3,"file":"InputIconContainer.d.ts","sourceRoot":"","sources":["../../../../text-input/lib/InputIconContainer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAC,cAAc,EAAC,MAAM,kCAAkC,CAAC;AAEhE,OAAO,EAAC,UAAU,EAAC,MAAM,gCAAgC,CAAC;AAE1D,MAAM,WAAW,uBAAwB,SAAQ,cAAc;IAC7D,IAAI,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,OAAO,UAAU,CAAC,CAAC;CAC9C;AAaD,QAAA,MAAM,kBAAkB,EAAE,KAAK,CAAC,iBAAiB,CAAC,uBAAuB,CASxE,CAAC;AAEF,eAAe,kBAAkB,CAAC"}

package/dist/es6/tooltip/lib/Tooltip.d.ts

@@ -24,7 +24,7 @@ export interface TooltipProps extends Omit<React.HTMLAttributes<HTMLDivElement>,
      * Determines the tooltip type for accessibility.
      *
      * - `label`: Sets the accessible name for the wrapped element. Use for icons or if tooltip
-     *   `title` prop is the same as the text content of the wrapped element. E.g. IconButtons or
+     *   `title` prop is the same as the text content of the wrapped element. E.g. TertiaryButtons that render an icon or
      *   Ellipsis tooltips.
      * - `describe`: Sets `aria-describedby` of the wrapped element. Use if the tooltip has additional
      *   information about the target.

package/dist/es6/tooltip/lib/useTooltip.d.ts

@@ -8,7 +8,7 @@ export declare function useTooltip<T extends Element = Element>({ type, titleTex
      * Determines the tooltip type for accessibility.
      *
      * - `label`: Sets the accessible name for the wrapped element. Use for icons or if tooltip
-     *   `title` prop is the same as the text content of the wrapped element. E.g. IconButtons or
+     *   `title` prop is the same as the text content of the wrapped element. E.g. TertiaryButton that renders an icon or
      *   Ellipsis tooltips.
      * - `describe`: Sets `aria-describedby` of the wrapped element. Use if the tooltip has additional
      *   information about the target.

package/icon/README.md

@@ -82,12 +82,6 @@ Default: `false`
 
 ---
 
-#### `iconRef: React.Ref<HTMLSpanElement>`
-
-> Returns the ref to the rendered icon.
-
----
-
 #### `shouldMirror: boolean`
 
 > If set to `true`, transform the SVG's x-axis to mirror the graphic
@@ -177,12 +171,6 @@ Default: `92`
 
 ---
 
-#### `iconRef: React.Ref<HTMLSpanElement>`
-
-> Returns the ref to the rendered icon.
-
----
-
 #### `shouldMirror: boolean`
 
 > If set to `true`, transform the SVG's x-axis to mirror the graphic
@@ -292,12 +280,6 @@ Default: `'transparent'`
 
 ---
 
-#### `iconRef: React.Ref<HTMLSpanElement>`
-
-> Returns the ref to the rendered icon.
-
----
-
 #### `shouldMirror: boolean`
 
 > If set to `true`, transform the SVG's x-axis to mirror the graphic
@@ -358,12 +340,6 @@ Default: `SystemIconCircleSize.l` (`40`)
 
 ---
 
-#### `iconRef: React.Ref<HTMLSpanElement>`
-
-> Returns the ref to the rendered icon.
-
----
-
 #### `shouldMirror: boolean`
 
 > If set to `true`, transform the SVG's x-axis to mirror the graphic
@@ -443,12 +419,6 @@ Default: `height of graphic`
 
 Default: `false`
 
-#### `iconRef: React.Ref<HTMLSpanElement>`
-
-> Returns the ref to the rendered icon.
-
----
-
 #### `shouldMirror: boolean`
 
 > If set to `true`, transform the SVG's x-axis to mirror the graphic

package/icon/lib/AccentIcon.tsx

@@ -3,6 +3,7 @@ import {colors} from '@workday/canvas-kit-react/tokens';
 import {CanvasAccentIcon, CanvasIconTypes} from '@workday/design-assets-types';
 import {CSSObject} from '@emotion/styled';
 import Icon, {IconProps} from './Icon';
+import {createComponent} from '../../common';
 
 export interface AccentIconStyles {
   /**
@@ -17,7 +18,9 @@ export interface AccentIconStyles {
   transparent?: boolean;
 }
 
-export interface AccentIconProps extends AccentIconStyles, Omit<IconProps, 'src' | 'type'> {
+export interface AccentIconProps
+  extends AccentIconStyles,
+    Omit<IconProps, 'src' | 'type' | 'color'> {
   /**
    *  The icon to display from `@workday/canvas-accent-icons-web`.
    */
@@ -41,28 +44,26 @@ export const accentIconStyles = ({
   },
 });
 
-export default class AccentIcon extends React.Component<AccentIconProps> {
-  render() {
-    const {
-      transparent = false,
-      size = 56,
-      icon,
-      color,
-      iconRef,
-      shouldMirror,
-      ...elemProps
-    } = this.props;
-
+const AccentIcon = createComponent('span')({
+  displayName: 'AccentIcon',
+  Component: (
+    {transparent = false, size = 56, icon, color, shouldMirror, ...elemProps}: AccentIconProps,
+    ref,
+    Element
+  ) => {
     return (
       <Icon
         src={icon}
         type={CanvasIconTypes.Accent}
         styles={accentIconStyles({color, transparent})}
         size={size}
-        iconRef={iconRef}
+        as={Element}
+        ref={ref}
         shouldMirror={shouldMirror}
         {...elemProps}
       />
     );
-  }
-}
+  },
+});
+
+export default AccentIcon;

package/icon/lib/AppletIcon.tsx

@@ -3,6 +3,7 @@ import {colors, BrandingColor, CanvasColor} from '@workday/canvas-kit-react/toke
 import {CanvasAppletIcon, CanvasIconTypes} from '@workday/design-assets-types';
 import {CSSObject} from '@emotion/styled';
 import Icon, {IconProps} from './Icon';
+import {createComponent} from '../../common';
 
 export interface AppletIconStyles {
   /**
@@ -54,9 +55,7 @@ export const appletIconStyles = ({
   };
 };
 
-export interface AppletIconProps
-  extends AppletIconStyles,
-    Pick<IconProps, 'iconRef' | 'shouldMirror'> {
+export interface AppletIconProps extends AppletIconStyles, Pick<IconProps, 'shouldMirror'> {
   /**
    * The icon to display from `@workday/canvas-applet-icons-web`.
    */
@@ -68,22 +67,29 @@ export interface AppletIconProps
   size?: number;
 }
 
-export default class AppletIcon extends React.Component<AppletIconProps> {
-  public static Colors = BrandingColor;
-
-  public render() {
-    const {size = 92, icon, color, iconRef, shouldMirror, ...elemProps} = this.props;
-
+export const AppletIcon = createComponent('span')({
+  displayName: 'AppletIcon',
+  Component: (
+    {size = 92, icon, color, shouldMirror, ...elemProps}: AppletIconProps,
+    ref,
+    Element
+  ) => {
     return (
       <Icon
         src={icon}
         type={CanvasIconTypes.Applet}
         styles={appletIconStyles({color})}
+        as={Element}
         size={size}
-        iconRef={iconRef}
+        ref={ref}
         shouldMirror={shouldMirror}
         {...elemProps}
       />
     );
-  }
-}
+  },
+  subComponents: {
+    Colors: BrandingColor,
+  },
+});
+
+export default AppletIcon;

package/icon/lib/Graphic.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 import {CanvasGraphic, CanvasIconTypes} from '@workday/design-assets-types';
 import {CSSObject} from '@emotion/styled';
 import Svg, {SvgProps} from './Svg';
+import {createComponent} from '../../common';
 
 export interface GraphicStyles {
   /**
@@ -21,7 +22,7 @@ export interface GraphicStyles {
   grow?: boolean;
 }
 
-export interface GraphicProps extends GraphicStyles, Pick<SvgProps, 'iconRef' | 'shouldMirror'> {
+export interface GraphicProps extends GraphicStyles, Pick<SvgProps, 'shouldMirror'> {
   /**
    * The graphic to display from `@workday/canvas-graphics-web`.
    */
@@ -58,19 +59,25 @@ export const graphicStyles = ({width, height, grow}: GraphicStyles): CSSObject =
   return {};
 };
 
-export default class Graphic extends React.Component<GraphicProps> {
-  render() {
-    const {grow = false, src, width, height, iconRef, shouldMirror, ...elemProps} = this.props;
-
+const Graphic = createComponent('span')({
+  displayName: 'Graphic',
+  Component: (
+    {grow = false, src, width, height, shouldMirror, ...elemProps}: GraphicProps,
+    ref,
+    Element
+  ) => {
     return (
       <Svg
         src={src}
         styles={graphicStyles({width, height, grow})}
         type={CanvasIconTypes.Graphic}
-        iconRef={iconRef}
+        as={Element}
+        ref={ref}
         shouldMirror={shouldMirror}
         {...elemProps}
       />
     );
-  }
-}
+  },
+});
+
+export default Graphic;

package/icon/lib/Icon.tsx

@@ -2,18 +2,17 @@ import * as React from 'react';
 import {CSSObject} from '@emotion/styled';
 import {CanvasIcon, CanvasIconTypes} from '@workday/design-assets-types';
 import Svg, {SvgProps} from './Svg';
+import {createComponent} from '../../common';
 
 export interface IconProps extends SvgProps {
   src: CanvasIcon;
   size?: number;
   type: CanvasIconTypes.Accent | CanvasIconTypes.Applet | CanvasIconTypes.System;
-  iconRef?: React.Ref<HTMLSpanElement>;
 }
 
-export default class Icon extends React.Component<IconProps> {
-  public render() {
-    const {src, size, styles, type, iconRef, shouldMirror, ...elemProps} = this.props;
-
+export const Icon = createComponent('span')({
+  displayName: 'Icon',
+  Component: ({src, size, styles, type, shouldMirror, ...elemProps}: IconProps, ref, Element) => {
     const iconStyles: CSSObject = {...styles};
 
     if (size) {
@@ -28,10 +27,13 @@ export default class Icon extends React.Component<IconProps> {
         src={src}
         type={type}
         shouldMirror={shouldMirror}
+        as={Element}
         {...elemProps}
+        ref={ref}
         styles={iconStyles}
-        iconRef={iconRef}
       />
     );
-  }
-}
+  },
+});
+
+export default Icon;

package/icon/lib/Svg.tsx

@@ -2,13 +2,13 @@ import {CSSObject} from '@emotion/styled';
 import * as React from 'react';
 import {CanvasIcon, CanvasIconTypes} from '@workday/design-assets-types';
 import {validateIconType} from './utils';
-import {styled} from '@workday/canvas-kit-react/common';
+import {createComponent, styled} from '@workday/canvas-kit-react/common';
+import {Box, BoxProps} from '@workday/canvas-kit-react/layout';
 
-export interface SvgProps extends React.HTMLAttributes<HTMLSpanElement> {
+export interface SvgProps extends BoxProps {
   src: CanvasIcon;
   styles?: CSSObject;
   type: CanvasIconTypes;
-  iconRef?: React.Ref<HTMLSpanElement>;
   /**
    * If set to `true`, transform the SVG's x-axis to mirror the graphic
    * @default false
@@ -16,7 +16,7 @@ export interface SvgProps extends React.HTMLAttributes<HTMLSpanElement> {
   shouldMirror?: boolean;
 }
 
-const StyledIconSpan = styled('span')<Pick<SvgProps, 'shouldMirror' | 'styles'>>(
+const StyledIconSpan = styled(Box.as('span'))<Pick<SvgProps, 'shouldMirror' | 'styles'>>(
   {
     display: 'inline-block',
     '> svg': {display: 'block'},
@@ -27,11 +27,9 @@ const StyledIconSpan = styled('span')<Pick<SvgProps, 'shouldMirror' | 'styles'>>
   })
 );
 
-export default class Svg extends React.Component<SvgProps> {
-  public render() {
-    const {src, type, iconRef, ...elemProps} = this.props;
-
-    // Validation for JS
+export const Svg = createComponent('span')({
+  displayName: 'Svg',
+  Component: ({src, type, ...elemProps}: SvgProps, ref, Element) => {
     try {
       validateIconType(src, type);
     } catch (e) {
@@ -39,8 +37,8 @@ export default class Svg extends React.Component<SvgProps> {
       return null;
     }
 
-    return (
-      <StyledIconSpan {...elemProps} dangerouslySetInnerHTML={{__html: src.svg}} ref={iconRef} />
-    );
-  }
-}
+    return <StyledIconSpan dangerouslySetInnerHTML={{__html: src.svg}} {...elemProps} ref={ref} />;
+  },
+});
+
+export default Svg;

package/icon/lib/SystemIcon.tsx

@@ -3,6 +3,7 @@ import {iconColors} from '@workday/canvas-kit-react/tokens';
 import {CanvasSystemIcon, CanvasIconTypes} from '@workday/design-assets-types';
 import {CSSObject} from '@emotion/styled';
 import Icon, {IconProps} from './Icon';
+import {createComponent} from '../../common';
 
 export interface SystemIconStyles {
   /**
@@ -43,7 +44,9 @@ export interface SystemIconStyles {
   fillHover?: string;
 }
 
-export interface SystemIconProps extends SystemIconStyles, Omit<IconProps, 'src' | 'type'> {
+export interface SystemIconProps
+  extends SystemIconStyles,
+    Omit<IconProps, 'src' | 'color' | 'type' | 'background'> {
   /**
    * The icon to display from `@workday/canvas-system-icons-web`.
    */
@@ -51,7 +54,8 @@ export interface SystemIconProps extends SystemIconStyles, Omit<IconProps, 'src'
   /**
    * The size of the SystemIcon in `px`.
    */
-  size?: number;
+  size?: number | undefined;
+  className?: string; //investigate more
 }
 
 export const systemIconStyles = ({
@@ -84,15 +88,15 @@ export const systemIconStyles = ({
   },
 });
 
-export default class SystemIcon extends React.Component<SystemIconProps> {
-  render() {
-    const {
+const SystemIcon = createComponent('span')({
+  displayName: 'SystemIcon',
+  Component: (
+    {
       background = 'transparent',
       backgroundHover = 'transparent',
       color = iconColors.standard,
       colorHover = iconColors.hover,
       icon,
-      iconRef,
       accent,
       accentHover,
       fill,
@@ -100,8 +104,10 @@ export default class SystemIcon extends React.Component<SystemIconProps> {
       size,
       shouldMirror,
       ...elemProps
-    } = this.props;
-
+    }: SystemIconProps,
+    ref,
+    Element
+  ) => {
     const style = systemIconStyles({
       accent,
       accentHover,
@@ -118,11 +124,14 @@ export default class SystemIcon extends React.Component<SystemIconProps> {
         src={icon}
         type={CanvasIconTypes.System}
         size={size}
-        styles={style}
-        iconRef={iconRef}
+        as={Element}
         shouldMirror={shouldMirror}
+        ref={ref}
+        styles={style}
         {...elemProps}
       />
     );
-  }
-}
+  },
+});
+
+export default SystemIcon;

package/icon/lib/SystemIconCircle.tsx

@@ -4,7 +4,7 @@ import isPropValid from '@emotion/is-prop-valid';
 import {colors, borderRadius} from '@workday/canvas-kit-react/tokens';
 import SystemIcon, {SystemIconProps} from './SystemIcon';
 import {CanvasSystemIcon} from '@workday/design-assets-types';
-import {pickForegroundColor} from '@workday/canvas-kit-react/common';
+import {createComponent, pickForegroundColor} from '@workday/canvas-kit-react/common';
 
 export enum SystemIconCircleSize {
   xs = 16,
@@ -15,7 +15,7 @@ export enum SystemIconCircleSize {
   xxl = 120,
 }
 
-export interface SystemIconCircleProps extends Pick<SystemIconProps, 'iconRef' | 'shouldMirror'> {
+export interface SystemIconCircleProps extends Pick<SystemIconProps, 'shouldMirror'> {
   /**
    * The background color of the SystemIconCircle from `@workday/canvas-colors-web`.
    * @default colors.soap300
@@ -58,33 +58,36 @@ const Container = styled('div', {
   })
 );
 
-export default class SystemIconCircle extends React.Component<SystemIconCircleProps> {
-  static Size = SystemIconCircleSize;
-
-  render() {
-    const {
+const SystemIconCircle = createComponent('span')({
+  displayName: 'SystemIconCircle',
+  Component: (
+    {
       background = colors.soap200,
       size = SystemIconCircleSize.l,
       icon,
-      iconRef,
+
       shouldMirror,
       ...elemProps
-    } = this.props;
-
+    }: SystemIconCircleProps,
+    ref,
+    Element
+  ) => {
     const iconColor = pickForegroundColor(background, 'rgba(0,0,0,0.65)', colors.frenchVanilla100);
     const iconSize = size * 0.625;
-
     return (
       <Container background={background} size={size} {...elemProps}>
         <SystemIcon
           icon={icon}
           color={iconColor}
           colorHover={iconColor}
+          as={Element}
           size={iconSize}
-          iconRef={iconRef}
+          ref={ref}
           shouldMirror={shouldMirror}
         />
       </Container>
     );
-  }
-}
+  },
+});
+
+export default SystemIconCircle;

package/layout/lib/Box.tsx

@@ -30,6 +30,46 @@ const shouldForwardProp = (prop: string) => {
   return isPropValid(prop) && !omittedProps.includes(prop);
 };
 
+/**
+ * A function that allows us to call Box styles on an element and reduce the amount of elements in the React Dom tree.
+ * Instead of using the `as` in a styled function, you can just call this instead to pass those props to the styled element
+ * @example
+ * import { boxStyleFn } from '@workday/canvas-kit-react/layout';
+ * const StyledHeader = styled('h1')(
+ *  boxStyleFn,
+ *  {
+ *    fontWeight: 400,
+ *  }
+ * )
+ *
+ * ....
+ *
+ * <StyledHeader color='red'>Hello World</StyledHeader>
+ */
+export const boxStyleFn = <P extends BoxProps>(props: P) => {
+  return [
+    {
+      boxSizing: 'border-box',
+    },
+    border,
+    color,
+    depth,
+    flexItem,
+    layout,
+    position,
+    space,
+  ].reduce((result, style) => {
+    // @ts-ignore
+    const temp = typeof style === 'function' ? style(props) : style;
+    // eslint-disable-next-line guard-for-in
+    for (const key in temp) {
+      // @ts-ignore
+      result[key] = temp[key];
+    }
+    return result;
+  }, {});
+};
+
 // Meant to be used with elements. The `shouldForwardProps` will remove all style props
 const StyledBoxElement = styled('div', {shouldForwardProp})<StyledType & BoxProps>(
   {

package/modal/lib/ModalOverflowOverlay.tsx

@@ -17,7 +17,7 @@ export const ModalOverflowOverlay = createComponent('div')({
     Element
   ) => {
     return (
-      <StyledOverlay as={Element} ref={ref} overflow="auto" {...elemProps}>
+      <StyledOverlay as={Element} ref={ref} overflowX="hidden" overflowY="auto" {...elemProps}>
         {children}
       </StyledOverlay>
     );

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-react",
-  "version": "7.0.0-alpha.0-next.7+23568685",
+  "version": "7.0.0-alpha.78-next.6+400ffc0b",
   "description": "The parent module that contains all Workday Canvas Kit React components",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -57,9 +57,9 @@
     "@emotion/styled": "^11.6.0",
     "@popperjs/core": "^2.5.4",
     "@workday/canvas-colors-web": "^2.0.0",
-    "@workday/canvas-kit-labs-react": "^7.0.0-alpha.0-next.7+23568685",
-    "@workday/canvas-kit-popup-stack": "^7.0.0-alpha.0-next.7+23568685",
-    "@workday/canvas-kit-preview-react": "^7.0.0-alpha.0-next.7+23568685",
+    "@workday/canvas-kit-labs-react": "^7.0.0-alpha.78-next.6+400ffc0b",
+    "@workday/canvas-kit-popup-stack": "^7.0.0-alpha.78-next.6+400ffc0b",
+    "@workday/canvas-kit-preview-react": "^7.0.0-alpha.78-next.6+400ffc0b",
     "@workday/canvas-system-icons-web": "1.0.41",
     "@workday/design-assets-types": "^0.2.4",
     "chroma-js": "^2.1.0",
@@ -77,5 +77,5 @@
     "@workday/canvas-accent-icons-web": "^1.0.0",
     "@workday/canvas-applet-icons-web": "^0.17.50"
   },
-  "gitHead": "23568685fec785046d37cb320289d8ab9e74e283"
+  "gitHead": "400ffc0b29c2762180758d9b7c1bdc0562cb01e4"
 }

package/pagination/lib/Pagination/Controls.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import {IconButton, IconButtonProps} from '@workday/canvas-kit-react/button';
+import {TertiaryButton, TertiaryButtonProps} from '@workday/canvas-kit-react/button';
 import {
   chevronLeftSmallIcon,
   chevron2xLeftSmallIcon,
@@ -11,7 +11,7 @@ import {PaginationModel} from './types';
 import {HStack} from '@workday/canvas-kit-react/layout';
 import {useRTL} from './common/utils/useRTL';
 
-export type ControlButtonProps = IconButtonProps &
+export type ControlButtonProps = TertiaryButtonProps &
   React.ButtonHTMLAttributes<HTMLButtonElement> & {
     model: PaginationModel;
   };
@@ -38,9 +38,8 @@ export const JumpToFirstButton = ({model, onClick, ...restProps}: ControlButtonP
   const {shouldUseRTL} = useRTL();
   const icon = shouldUseRTL ? chevron2xRightSmallIcon : chevron2xLeftSmallIcon;
   return (
-    <IconButton
+    <TertiaryButton
       aria-disabled={isDisabled || undefined}
-      variant="square"
       size="small"
       icon={icon}
       onClick={handleClick}
@@ -61,9 +60,8 @@ export const StepToPreviousButton = ({onClick, model, ...restProps}: ControlButt
   const {shouldUseRTL} = useRTL();
   const icon = shouldUseRTL ? chevronRightSmallIcon : chevronLeftSmallIcon;
   return (
-    <IconButton
+    <TertiaryButton
       aria-disabled={isDisabled || undefined}
-      variant="square"
       size="small"
       icon={icon}
       onClick={handleClick}
@@ -84,9 +82,8 @@ export const StepToNextButton = ({model, onClick, ...restProps}: ControlButtonPr
   const {shouldUseRTL} = useRTL();
   const icon = shouldUseRTL ? chevronLeftSmallIcon : chevronRightSmallIcon;
   return (
-    <IconButton
+    <TertiaryButton
       aria-disabled={isDisabled || undefined}
-      variant="square"
       size="small"
       icon={icon}
       onClick={handleClick}
@@ -107,9 +104,8 @@ export const JumpToLastButton = ({model, onClick, ...restProps}: ControlButtonPr
   const {shouldUseRTL} = useRTL();
   const icon = shouldUseRTL ? chevron2xLeftSmallIcon : chevron2xRightSmallIcon;
   return (
-    <IconButton
+    <TertiaryButton
       aria-disabled={isDisabled || undefined}
-      variant="square"
       size="small"
       icon={icon}
       onClick={handleClick}