@workday/canvas-kit-docs 5.3.2 → 5.3.6

package/dist/mdx/5.0-MIGRATION-GUIDE.mdx

@@ -10,6 +10,7 @@ any questions about the update.
   - [Canvas Kit Preview](#canvas-kit-preview)
   - [Type Deprecations and Hierarchy Updates](#type-deprecations-and-hierarchy-updates)
   - [Canvas Kit CSS Maintenance Mode](#canvas-kit-css-maintenance-mode)
+  - [Prop Interfaces](#prop-interfaces)
 - [Component Changes](#component-changes)
   - [Component Promotions](#component-promotions)
   - [Core](#core)
@@ -423,6 +424,59 @@ provide more focused support and to dedicate our efforts to making bigger and be
 our most used components: Canvas Kit React. If you have questions or concerns, please
 [let us know](https://github.com/Workday/canvas-kit/issues/new?labels=&template=question.md).
 
+### Prop Interfaces
+
+Many components were updated to be polymorphic using the `createComponent` utility function. Most
+components in Canvas Kit extend from an HTML interface and spread extra props onto the HTML element.
+Since these components are now polymorphic, the exported props no longer extend from an HTML
+interface since the HTML interface is now determined by an optional `as` prop. It is common to wrap
+Canvas Kit components with your own component and extend from the Canvas Kit component's prop
+interface. To support this use-case in addition to polymorphic prop interfaces, `ExtractProp` was
+introduced. `ExtractProp` understands these polymorphic components and will return the base props in
+addition to the HTML interface. There is an optional second argument that can override the default
+HTML interface if your wrapper component uses the `as`.
+
+```tsx
+// v4
+import {TextInput, TextInputProps} from '@workday/canvas-kit-react-text-input';
+
+const FancyTextInput: React.FC<TextInputProps> = props => <TextInput {...props} />;
+
+// v5
+import {TextInput} from '@workday/canvas-kit-react/text-input';
+import {ExtractProps} from '@workday/canvas-kit-react/common';
+
+const FancyTextInput: React.FC<ExtractProps<typeof TextInput>> = props => {};
+
+// v5 via createComponent
+import {TextInput} from '@workday/canvas-kit-react/text-input';
+import {createComponent} from '@workday/canvas-kit-react/common';
+
+const FancyTextInput = createComponent(TextInput)({
+  displayName: 'FancyTextInput',
+  Component((props) => <TextInput {...props} />)
+})
+```
+
+Components that made this change:
+
+- Button
+- IconButton
+- Card
+- Hyperlink
+- Select
+- TextArea
+- TextInput
+- Checkbox
+- Radio
+- ColorInput
+- ColorPreview
+- Modal
+- Popup
+- Skeleton
+- Tabs
+- Toast
+
 ## Component Changes
 
 ### Component Promotions
@@ -799,20 +853,25 @@ Button prop interface and accesses properties like `onClick`, you'll need to pro
 attribute yourself in order to avoid TypeScript issues (this doesn't affect runtime). This is not
 code-moddable since intent cannot be pre-determined.
 
+#### Props
+
+The exported props no longer extend from the `HTMLButtonElement` interface. Use
+[ExtractProps](#prop-interfaces) instead.
+
 ```tsx
 interface MyButtonProps extends ButtonProps {}
 
 // onClick no longer exists in `ButtonProps`, so TypeScript will complain about onClick not
 // existing in `MyButtonProps` (`onClick` does exist as a prop on `<Button>`, however)
 const MyButton = ({children, onClick}: MyButtonProps) => (
-  <Button onClick={onClick}>{children}</Button>
+  <SecondaryButton onClick={onClick}>{children}</SecondaryButton>
 );
 
 // After
-interface MyButtonProps extends ButtonProps, React.ButtonHTMLAttributes<HTMLButtonElement> {}
+interface MyButtonProps extends ExtractProps<typeof SecondaryButton> {}
 
 // After (alternate fix)
-interface MyButtonProps extends ButtonProps {
+interface MyButtonProps extends ExtractProps<> {
   onClick?: React.MouseEventHandler<HTMLButtonElement>;
 }
 ```
@@ -881,6 +940,21 @@ const props = {
 import {Card} from './Card' // where `Card` is a re-exported Canvas Kit `Card`
 ```
 
+#### Props
+
+The exported props no longer extend from the `HTMLDivElement` interface. Use
+[ExtractProps](#prop-interfaces) instead.
+
+```tsx
+// NOT handled by the codemod
+
+// v4
+interface MyCard extends CardProps {}
+
+// v5
+interface MyCard extends ExtractProps<typeof Card>
+```
+
 ---
 
 ### Inputs
@@ -924,14 +998,14 @@ element that `inputRef` was applied to previously. Select and Select (Preview) d
 `inputRef` in v4, but now support `ref` in v5. See each component's documentation for information on
 which element `ref` is forwarded to for that particular component.
 
+#### Props
+
 Input component prop interfaces no longer extend directly from their underlying element interface
 (e.g. `TextInputProps` no longer extends from `React.InputHTMLAttributes<HTMLInputElement>`).
 `createComponent` returns a component that determines the element interface via the `as` prop. This
 is why input component props no longer contain an element interface directly. If you extend from an
 input component prop interface, or have code that uses an input component prop interface and
-accesses properties like `onClick`, you'll need to provide the input attribute yourself in order to
-avoid TypeScript issues (this doesn't affect runtime). This is not code-moddable since intent cannot
-be pre-determined.
+accesses properties like `onClick`, you'll need to use [ExtractProps](#prop-interfaces) instead.
 
 ```tsx
 interface MyTextInputProps extends TextInputProps {}
@@ -941,7 +1015,7 @@ interface MyTextInputProps extends TextInputProps {}
 const MyTextInput = ({onClick}: MyTextInputProps) => <TextInput onClick={onClick} />;
 
 // Fix
-interface MyTextInputProps extends TextInputProps, React.InputHTMLAttributes<HTMLInputElement> {}
+interface MyTextInputProps extends ExtractProps<typeof TextInput> {}
 
 // Alternate fix
 interface MyTextInputProps extends TextInputProps {

package/dist/mdx/react/loading-animation/LoadingAnimation.mdx

@@ -1,6 +1,7 @@
 import {LoadingAnimation} from '@workday/canvas-kit-react/loading-animation';
 
 import Basic from './examples/Basic';
+import RTL from './examples/RTL';
 
 
 # Canvas Kit Loading Animation
@@ -22,6 +23,10 @@ yarn add @workday/canvas-kit-react
 
 <ExampleCodeBlock code={Basic} />
 
+### Right-to-Left (RTL)
+
+<ExampleCodeBlock code={RTL} />
+
 ## Props
 
 Loading Animation does not have any documented props. Undocumented props are spread to its outermost

package/dist/mdx/react/loading-animation/examples/RTL.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import {LoadingAnimation} from '@workday/canvas-kit-react/loading-animation';
+import {CanvasProvider, ContentDirection} from '@workday/canvas-kit-react/common';
+
+export default () => {
+  const theme = {
+    canvas: {
+      direction: ContentDirection.RTL,
+    },
+  };
+  return (
+    <CanvasProvider theme={theme}>
+      <LoadingAnimation />
+    </CanvasProvider>
+  );
+};

package/dist/mdx/react/tooltip/Tooltip.mdx

@@ -3,6 +3,7 @@ import {Specifications} from '@workday/canvas-kit-docs';
 
 import Default from './examples/Default';
 import CustomContent from './examples/CustomContent';
+import DelayedTooltip from './examples/DelayedTooltip';
 import DescribeType from './examples/DescribeType';
 import Muted from './examples/Muted';
 import Placements from './examples/Placements';
@@ -87,6 +88,13 @@ a dialog instead.
 
 <ExampleCodeBlock code={CustomContent} />
 
+### Delayed Tooltip
+
+The default delay for showing and hiding a tooltip are 300ms and 100ms, respectively. You can
+control the length of the delay by providing custom `showDelay` and `hideDelay` in ms.
+
+<ExampleCodeBlock code={DelayedTooltip} />
+
 ### Placements
 
 The tooltip allows for a `placement` configuration. The tooltip uses

package/dist/mdx/react/tooltip/examples/DelayedTooltip.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+
+import {SecondaryButton} from '@workday/canvas-kit-react/button';
+import {Tooltip} from '@workday/canvas-kit-react/tooltip';
+
+export default () => {
+  return (
+    <React.Fragment>
+      <Tooltip type="describe" title="Tooltip Text" showDelay={2000} hideDelay={1000}>
+        <SecondaryButton>
+          Tooltip appears after 2 seconds and disappears after 1 second
+        </SecondaryButton>
+      </Tooltip>
+    </React.Fragment>
+  );
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-docs",
-  "version": "5.3.2",
+  "version": "5.3.6",
   "description": "Documentation components of Canvas Kit components",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -35,7 +35,8 @@
     "build:specs": "node ./utils/build-specifications.js",
     "build:downlevel-dts": "yarn run downlevel-dts dist ts3.5/dist",
     "build": "npm-run-all --parallel build:cjs build:es6 build:mdx --sequential build:specs build:downlevel-dts",
-    "depcheck": "node ../../utils/check-dependencies-exist.js"
+    "depcheck": "node ../../utils/check-dependencies-exist.js",
+    "typecheck:src": "tsc -p . --noEmit --incremental false"
   },
   "publishConfig": {
     "access": "public"
@@ -49,7 +50,7 @@
   ],
   "dependencies": {
     "@storybook/csf": "0.0.1",
-    "@workday/canvas-kit-react": "^5.3.2"
+    "@workday/canvas-kit-react": "^5.3.6"
   },
   "devDependencies": {
     "fs-extra": "^10.0.0",
@@ -57,5 +58,5 @@
     "mkdirp": "^1.0.3",
     "typescript": "^3.8.3"
   },
-  "gitHead": "b6506c1b24e744ab5e132a16d6f4187be6dc6e2a"
+  "gitHead": "067d8895ad8f2e70f7e8f658dc728addc74ddf87"
 }