@workday/canvas-kit-preview-react 6.3.5 → 7.0.0-alpha.0-next.3

package/side-panel/lib/SidePanel.tsx

@@ -1,10 +1,13 @@
+/** @jsxRuntime classic */
 /** @jsx jsx */
 import * as React from 'react';
-import {styled, useIsRTL} from '@workday/canvas-kit-react/common';
-import {css, CSSObject, jsx, keyframes} from '@emotion/core';
+import {styled, useIsRTL, StyledType} from '@workday/canvas-kit-react/common';
+import {css, jsx, keyframes} from '@emotion/core';
 import {IconButton, IconButtonProps} from '@workday/canvas-kit-react/button';
-import {space, colors, depth} from '@workday/canvas-kit-react/tokens';
+import {space, colors} from '@workday/canvas-kit-react/tokens';
 import {transformationImportIcon} from '@workday/canvas-system-icons-web';
+import {Tooltip} from '@workday/canvas-kit-react/tooltip';
+import {Box} from '@workday/canvas-kit-labs-react/common';
 
 export type SidePanelVariant = 'standard' | 'alternate';
 export type SidePanelTransitionStates = 'collapsed' | 'collapsing' | 'expanded' | 'expanding';
@@ -86,17 +89,7 @@ const createKeyframes = (from: number | string, to: number | string) => {
   `;
 };
 
-const containerVariantStyle: Record<SidePanelVariant, CSSObject> = {
-  alternate: {
-    backgroundColor: colors.frenchVanilla100,
-    ...depth[3],
-  },
-  standard: {
-    backgroundColor: colors.soap100,
-  },
-};
-
-const Panel = styled('section')<Pick<SidePanelProps, 'as'>>({
+const StyledPanel = styled(Box)<StyledType & Pick<SidePanelProps, 'as'>>({
   overflow: 'hidden',
   position: 'relative',
   boxSizing: 'border-box',
@@ -119,7 +112,7 @@ const SidePanel = ({
   onExpandedChange,
   onStateTransition,
   origin = 'left',
-  variant = 'standard',
+  // variant = 'standard',
   touched,
   ...elemProps
 }: SidePanelProps) => {
@@ -176,20 +169,15 @@ const SidePanel = ({
   };
 
   return (
-    <Panel
+    <StyledPanel
       as={as}
-      css={[
-        {
-          width: expanded ? expandedWidth : collapsedWidth,
-          maxWidth: expanded ? expandedWidth : collapsedWidth,
-          // mounted.current will be false on the first render, thus you won't get an unwanted animation here
-          // Will animate again if you force a re-render (like in Storybook)
-          animation: touched
-            ? `${expanded ? motion.expand : motion.collapse} 200ms ease-out`
-            : undefined,
-        },
-        containerVariantStyle[variant],
-      ]}
+      width={expanded ? expandedWidth : collapsedWidth}
+      maxWidth={expanded ? expandedWidth : collapsedWidth}
+      backgroundColor={elemProps.variant === 'alternate' ? colors.frenchVanilla100 : colors.soap100}
+      depth={elemProps.variant === 'alternate' ? 3 : undefined}
+      animation={
+        touched ? `${expanded ? motion.expand : motion.collapse} 200ms ease-out` : undefined
+      }
       onAnimationEnd={handleAnimationEnd}
       onAnimationStart={handleAnimationStart}
       {...elemProps}
@@ -202,11 +190,22 @@ const SidePanel = ({
       >
         {children}
       </SidePanelContext.Provider>
-    </Panel>
+    </StyledPanel>
   );
 };
 
-export type ToggleButtonProps = Omit<IconButtonProps, 'aria-label'>;
+export type ToggleButtonProps = IconButtonProps & {
+  /**
+   * The tooltip text to expand the side panel
+   * @default 'Expand'
+   */
+  tooltipTextExpand?: string;
+  /**
+   * The tooltip text to collapse the side panel
+   * @default 'Collapse'
+   */
+  tooltipTextCollapse?: string;
+};
 
 /**
  * A toggle button styled specifically for the side panel container.
@@ -214,6 +213,8 @@ export type ToggleButtonProps = Omit<IconButtonProps, 'aria-label'>;
 const ToggleButton = ({
   variant = 'plain',
   icon = transformationImportIcon,
+  tooltipTextExpand: expandLabel = 'Expand',
+  tooltipTextCollapse: collapseLabel = 'Collapse',
   ...rest
 }: ToggleButtonProps & React.ButtonHTMLAttributes<HTMLButtonElement>) => {
   const context = React.useContext(SidePanelContext);
@@ -243,8 +244,11 @@ const ToggleButton = ({
         : `scaleX(${rtlOrigin === 'left' ? '-1' : '1'})`,
   });
 
-  // @ts-ignore aria-label type error here. The user will decide to use aria-label or aria-labelledby
-  return <IconButton type="button" css={buttonStyle} icon={icon} variant={variant} {...rest} />;
+  return (
+    <Tooltip title={context.state === 'collapsed' ? expandLabel : collapseLabel} type="muted">
+      <IconButton type="button" css={buttonStyle} icon={icon} variant={variant} {...rest} />
+    </Tooltip>
+  );
 };
 
 SidePanel.ToggleButton = ToggleButton;

package/text-area/lib/TextAreaField.tsx

@@ -1,3 +1,4 @@
+/** @jsxRuntime classic */
 /** @jsx jsx */
 import {jsx} from '@emotion/core';
 

package/text-input/lib/TextInputField.tsx

@@ -1,3 +1,4 @@
+/** @jsxRuntime classic */
 /** @jsx jsx */
 import {jsx} from '@emotion/core';
 

package/ts3.5/dist/commonjs/breadcrumbs/lib/Breadcrumbs/Dropdown/Menu.d.ts

@@ -1,4 +1,3 @@
-/** @jsx jsx */
 import React from 'react';
 import { Breadcrumb } from '../types';
 export interface DropdownMenuProps {

package/ts3.5/dist/commonjs/breadcrumbs/lib/Breadcrumbs/List/ListItem.d.ts

@@ -1,4 +1,3 @@
-/** @jsx jsx */
 import React from 'react';
 export declare type ListItemProps = React.HTMLAttributes<HTMLLIElement>;
 export declare const BreadcrumbsListItem: ({ children, ...props }: ListItemProps) => JSX.Element;

package/ts3.5/dist/commonjs/breadcrumbs/lib/Breadcrumbs/List/index.d.ts

@@ -1,5 +1,4 @@
-/** @jsx jsx */
 import React from 'react';
 export declare type BreadcrumbsListProps = React.HTMLAttributes<HTMLUListElement>;
-export declare const BreadcrumbsList: React.ForwardRefExoticComponent<BreadcrumbsListProps & React.RefAttributes<HTMLUListElement>>;
+export declare const BreadcrumbsList: import("@workday/canvas-kit-react/common").ElementComponent<"ul", BreadcrumbsListProps>;
 //# sourceMappingURL=index.d.ts.map

package/ts3.5/dist/commonjs/breadcrumbs/lib/Breadcrumbs/index.d.ts

@@ -1,8 +1,7 @@
-/// <reference types="@emotion/core" />
 export declare const Breadcrumbs: {
     Nav: ({ "aria-label": ariaLabel, ...elemProps }: import("./Nav").BreadcrumbsNavProps) => JSX.Element;
     CollapsibleList: ({ children, buttonIcon, buttonAriaLabel, maxWidth, ...props }: import("./List/Collapsible").CollapsibleListProps) => JSX.Element;
-    List: import("react").ForwardRefExoticComponent<import("./List").BreadcrumbsListProps & import("react").RefAttributes<HTMLUListElement>>;
+    List: import("@workday/canvas-kit-react/common").ElementComponent<"ul", import("./List").BreadcrumbsListProps>;
     ListItem: ({ children, ...props }: import("./List/ListItem").ListItemProps) => JSX.Element;
     Link: ({ maxWidth, onAction, onClick, href, children, ...props }: import("./List/Link").BreadcrumbLinkProps) => JSX.Element;
     CurrentItem: ({ children, maxWidth, ...elemProps }: import("./List/CurrentItem").CurrentItemProps) => JSX.Element;

package/ts3.5/dist/commonjs/side-panel/lib/SidePanel.d.ts

@@ -1,3 +1,4 @@
+/** @jsxRuntime classic */
 /** @jsx jsx */
 import * as React from 'react';
 import { IconButtonProps } from '@workday/canvas-kit-react/button';
@@ -65,9 +66,31 @@ export declare const SidePanelContext: React.Context<{
     origin: string;
 }>;
 declare const SidePanel: {
-    ({ as, children, collapsedWidth, expanded, expandedWidth, onAnimationEnd, onAnimationStart, onExpandedChange, onStateTransition, origin, variant, touched, ...elemProps }: SidePanelProps): JSX.Element;
-    ToggleButton: ({ variant, icon, ...rest }: Pick<IconButtonProps, "value" | "children" | "theme" | "size" | "icon" | "shouldMirrorIcon" | "variant" | "onToggleChange" | "toggled"> & React.ButtonHTMLAttributes<HTMLButtonElement>) => JSX.Element;
+    ({ as, children, collapsedWidth, expanded, expandedWidth, onAnimationEnd, onAnimationStart, onExpandedChange, onStateTransition, origin, touched, ...elemProps }: SidePanelProps): JSX.Element;
+    ToggleButton: ({ variant, icon, tooltipTextExpand: expandLabel, tooltipTextCollapse: collapseLabel, ...rest }: IconButtonProps & {
+        /**
+         * The tooltip text to expand the side panel
+         * @default 'Expand'
+         */
+        tooltipTextExpand?: string | undefined;
+        /**
+         * The tooltip text to collapse the side panel
+         * @default 'Collapse'
+         */
+        tooltipTextCollapse?: string | undefined;
+    } & React.ButtonHTMLAttributes<HTMLButtonElement>) => JSX.Element;
+};
+export declare type ToggleButtonProps = IconButtonProps & {
+    /**
+     * The tooltip text to expand the side panel
+     * @default 'Expand'
+     */
+    tooltipTextExpand?: string;
+    /**
+     * The tooltip text to collapse the side panel
+     * @default 'Collapse'
+     */
+    tooltipTextCollapse?: string;
 };
-export declare type ToggleButtonProps = Pick<IconButtonProps, Exclude<keyof IconButtonProps, 'aria-label'>>;
 export default SidePanel;
 //# sourceMappingURL=SidePanel.d.ts.map

package/ts3.5/dist/es6/breadcrumbs/lib/Breadcrumbs/Dropdown/Menu.d.ts

@@ -1,4 +1,3 @@
-/** @jsx jsx */
 import React from 'react';
 import { Breadcrumb } from '../types';
 export interface DropdownMenuProps {

package/ts3.5/dist/es6/breadcrumbs/lib/Breadcrumbs/List/ListItem.d.ts

@@ -1,4 +1,3 @@
-/** @jsx jsx */
 import React from 'react';
 export declare type ListItemProps = React.HTMLAttributes<HTMLLIElement>;
 export declare const BreadcrumbsListItem: ({ children, ...props }: ListItemProps) => JSX.Element;

package/ts3.5/dist/es6/breadcrumbs/lib/Breadcrumbs/List/index.d.ts

@@ -1,5 +1,4 @@
-/** @jsx jsx */
 import React from 'react';
 export declare type BreadcrumbsListProps = React.HTMLAttributes<HTMLUListElement>;
-export declare const BreadcrumbsList: React.ForwardRefExoticComponent<BreadcrumbsListProps & React.RefAttributes<HTMLUListElement>>;
+export declare const BreadcrumbsList: import("@workday/canvas-kit-react/common").ElementComponent<"ul", BreadcrumbsListProps>;
 //# sourceMappingURL=index.d.ts.map

package/ts3.5/dist/es6/breadcrumbs/lib/Breadcrumbs/index.d.ts

@@ -1,8 +1,7 @@
-/// <reference types="@emotion/core" />
 export declare const Breadcrumbs: {
     Nav: ({ "aria-label": ariaLabel, ...elemProps }: import("./Nav").BreadcrumbsNavProps) => JSX.Element;
     CollapsibleList: ({ children, buttonIcon, buttonAriaLabel, maxWidth, ...props }: import("./List/Collapsible").CollapsibleListProps) => JSX.Element;
-    List: import("react").ForwardRefExoticComponent<import("./List").BreadcrumbsListProps & import("react").RefAttributes<HTMLUListElement>>;
+    List: import("@workday/canvas-kit-react/common").ElementComponent<"ul", import("./List").BreadcrumbsListProps>;
     ListItem: ({ children, ...props }: import("./List/ListItem").ListItemProps) => JSX.Element;
     Link: ({ maxWidth, onAction, onClick, href, children, ...props }: import("./List/Link").BreadcrumbLinkProps) => JSX.Element;
     CurrentItem: ({ children, maxWidth, ...elemProps }: import("./List/CurrentItem").CurrentItemProps) => JSX.Element;

package/ts3.5/dist/es6/side-panel/lib/SidePanel.d.ts

@@ -1,3 +1,4 @@
+/** @jsxRuntime classic */
 /** @jsx jsx */
 import * as React from 'react';
 import { IconButtonProps } from '@workday/canvas-kit-react/button';
@@ -65,9 +66,31 @@ export declare const SidePanelContext: React.Context<{
     origin: string;
 }>;
 declare const SidePanel: {
-    ({ as, children, collapsedWidth, expanded, expandedWidth, onAnimationEnd, onAnimationStart, onExpandedChange, onStateTransition, origin, variant, touched, ...elemProps }: SidePanelProps): JSX.Element;
-    ToggleButton: ({ variant, icon, ...rest }: Pick<IconButtonProps, "size" | "icon" | "children" | "value" | "theme" | "shouldMirrorIcon" | "variant" | "onToggleChange" | "toggled"> & React.ButtonHTMLAttributes<HTMLButtonElement>) => JSX.Element;
+    ({ as, children, collapsedWidth, expanded, expandedWidth, onAnimationEnd, onAnimationStart, onExpandedChange, onStateTransition, origin, touched, ...elemProps }: SidePanelProps): JSX.Element;
+    ToggleButton: ({ variant, icon, tooltipTextExpand: expandLabel, tooltipTextCollapse: collapseLabel, ...rest }: IconButtonProps & {
+        /**
+         * The tooltip text to expand the side panel
+         * @default 'Expand'
+         */
+        tooltipTextExpand?: string | undefined;
+        /**
+         * The tooltip text to collapse the side panel
+         * @default 'Collapse'
+         */
+        tooltipTextCollapse?: string | undefined;
+    } & React.ButtonHTMLAttributes<HTMLButtonElement>) => JSX.Element;
+};
+export declare type ToggleButtonProps = IconButtonProps & {
+    /**
+     * The tooltip text to expand the side panel
+     * @default 'Expand'
+     */
+    tooltipTextExpand?: string;
+    /**
+     * The tooltip text to collapse the side panel
+     * @default 'Collapse'
+     */
+    tooltipTextCollapse?: string;
 };
-export declare type ToggleButtonProps = Pick<IconButtonProps, Exclude<keyof IconButtonProps, 'aria-label'>>;
 export default SidePanel;
 //# sourceMappingURL=SidePanel.d.ts.map