@workday/canvas-kit-docs 13.0.0-alpha.1007-next.0 → 13.0.0-alpha.1009-next.0

package/dist/es6/lib/widgets/external.js

@@ -3,5 +3,5 @@ import { ExternalHyperlink } from '@workday/canvas-kit-react/button';
 import { renderTypeParameters } from '../widgetUtils';
 import { registerWidget } from '../Value';
 registerWidget('external', ({ value }) => (React.createElement(React.Fragment, null,
-    React.createElement(ExternalHyperlink, { href: value.url }, value.name),
+    React.createElement(ExternalHyperlink, { href: value.url, iconLabel: "Open link in new window" }, value.name),
     renderTypeParameters(value.typeParameters))));

package/dist/es6/mdx/welcomePage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"welcomePage.d.ts","sourceRoot":"","sources":["../../../mdx/welcomePage.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAgB1B,eAAO,MAAM,WAAW,yBA0IvB,CAAC"}
+{"version":3,"file":"welcomePage.d.ts","sourceRoot":"","sources":["../../../mdx/welcomePage.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAgB1B,eAAO,MAAM,WAAW,yBA6IvB,CAAC"}

package/dist/es6/mdx/welcomePage.js

@@ -26,7 +26,7 @@ export const WelcomePage = () => {
             ' ',
             "This project provides a set of components for the Workday Canvas Design System that can be used to implement user experiences consistent with",
             ' ',
-            React.createElement(ExternalHyperlink, { href: "https://canvas.workdaydesign.com/" }, "Workday Design Principles.")),
+            React.createElement(ExternalHyperlink, { href: "https://canvas.workdaydesign.com/", iconLabel: "Open docs in new window" }, "Workday Design Principles.")),
         React.createElement(Heading, { size: "medium", borderBottom: `1px solid ${colors.blueberry200}`, paddingBottom: "xxs" }, "Quick Links"),
         React.createElement(Grid, { gridAutoColumns: "auto", gridTemplateColumns: "repeat(auto-fill, minmax(250px, 1fr))", gridGap: "s" },
             React.createElement(Grid, { as: Card, gridTemplateRows: "1fr 1fr 2fr 1fr", depth: "none", display: "grid", maxHeight: 320 },

package/dist/mdx/13.0-UPGRADE-GUIDE.mdx

@@ -16,6 +16,9 @@ any questions.
 
 - [Codemod](#codemod)
   - [Instructions](#instructions)
+- [Component Updates](#component-updates)
+  - [Styling API and CSS Tokens](#styling-api-and-css-tokens)
+  - [External Hyperlink](#external-hyperlink)
 - [Troubleshooting](#troubleshooting)
 - [Glossary](#glossary)
   - [Main](#main)
@@ -83,6 +86,44 @@ yarn remove @workday/canvas-kit-codemod
 > after executing the codemod, as its resulting formatting (spacing, quotes, etc.) may not match
 > your project conventions.
 
+## Component Updates
+
+### Styling API and CSS Tokens
+
+**PRs:** [#3101](https://github.com/Workday/canvas-kit/pull/3101), [#3088](https://github.com/Workday/canvas-kit/pull/3088)
+
+Several components have been refactored to use our
+[Canvas Tokens](https://workday.github.io/canvas-tokens/?path=/docs/docs-getting-started--docs) and
+[styling API](https://workday.github.io/canvas-kit/?path=/docs/styling-basics--create-modifiers#createstyles-api).
+The React interface **has not changed**, but CSS variables are now used for dynamic properties.
+
+> **Note:** These components also support our `cs` prop for styling. Learn more about styling
+> with `cs` in our
+> [documentation](https://workday.github.io/canvas-kit/?path=/docs/styling-basics--cs-prop).
+
+The following components are affected:
+
+- `ExternalHyperlink`
+- `Skeleton`
+
+## External Hyperlink
+
+**PR:** [#3101](https://github.com/Workday/canvas-kit/pull/3101)
+
+`iconLabel` is now a *required* prop. We've removed the default `aria-label` of `Opens link in new window`  to better support internationalization. You must provide a value to `iconLabel`.
+
+```tsx
+//v12
+<ExternalHyperlink href="https://workday.com">
+  External Hyperlink
+</ExternalHyperlink>
+
+//v13
+<ExternalHyperlink href="https://workday.com" iconLabel='Open link in new window'>
+  External Hyperlink
+</ExternalHyperlink>
+```
+
 
 ## Troubleshooting
 

package/dist/mdx/react/button/button/examples/ExternalHyperlink.tsx

@@ -3,5 +3,7 @@ import React from 'react';
 import {ExternalHyperlink} from '@workday/canvas-kit-react/button';
 
 export default () => (
-  <ExternalHyperlink href="https://workday.com">External Hyperlink</ExternalHyperlink>
+  <ExternalHyperlink href="https://workday.com" iconLabel="Opens link in new window">
+    External Hyperlink
+  </ExternalHyperlink>
 );

package/dist/mdx/react/button/button/examples/ExternalHyperlinkInverse.tsx

@@ -12,7 +12,11 @@ const parentContainerStyles = createStyles({
 
 export default () => (
   <Box cs={parentContainerStyles}>
-    <ExternalHyperlink href="https://workday.com" variant="inverse">
+    <ExternalHyperlink
+      href="https://workday.com"
+      variant="inverse"
+      iconLabel="Opens link in new window"
+    >
       Hyperlink
     </ExternalHyperlink>
   </Box>

package/lib/StylePropsTable.tsx

@@ -38,7 +38,7 @@ export const StylePropsTable = ({styleProps = []}: StylePropsTableProps) => {
                 const mdnUrl = `https://developer.mozilla.org/en-US/docs/Web/CSS/${formattedName}`;
                 return (
                   <Box display="inline-block" marginInlineEnd="xxxs">
-                    <ExternalHyperlink href={mdnUrl} key={i}>
+                    <ExternalHyperlink href={mdnUrl} key={i} iconLabel="Open link in new window">
                       {formattedName}
                     </ExternalHyperlink>
                   </Box>

package/lib/widgets/external.tsx

@@ -8,7 +8,9 @@ import {registerWidget} from '../Value';
 
 registerWidget<ExternalSymbolValue>('external', ({value}) => (
   <>
-    <ExternalHyperlink href={value.url}>{value.name}</ExternalHyperlink>
+    <ExternalHyperlink href={value.url} iconLabel="Open link in new window">
+      {value.name}
+    </ExternalHyperlink>
     {renderTypeParameters(value.typeParameters)}
   </>
 ));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-docs",
-  "version": "13.0.0-alpha.1007-next.0",
+  "version": "13.0.0-alpha.1009-next.0",
   "description": "Documentation components of Canvas Kit components",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -44,10 +44,10 @@
   "dependencies": {
     "@emotion/styled": "^11.6.0",
     "@storybook/csf": "0.0.1",
-    "@workday/canvas-kit-labs-react": "^13.0.0-alpha.1007-next.0",
-    "@workday/canvas-kit-preview-react": "^13.0.0-alpha.1007-next.0",
-    "@workday/canvas-kit-react": "^13.0.0-alpha.1007-next.0",
-    "@workday/canvas-kit-styling": "^13.0.0-alpha.1007-next.0",
+    "@workday/canvas-kit-labs-react": "^13.0.0-alpha.1009-next.0",
+    "@workday/canvas-kit-preview-react": "^13.0.0-alpha.1009-next.0",
+    "@workday/canvas-kit-react": "^13.0.0-alpha.1009-next.0",
+    "@workday/canvas-kit-styling": "^13.0.0-alpha.1009-next.0",
     "@workday/canvas-system-icons-web": "^3.0.0",
     "@workday/canvas-tokens-web": "^2.1.0",
     "markdown-to-jsx": "^7.2.0",
@@ -60,5 +60,5 @@
     "mkdirp": "^1.0.3",
     "typescript": "5.0"
   },
-  "gitHead": "b069877352a0d8b64fe2e045a208b5833d713ce9"
+  "gitHead": "86905802e45baf8c7c06c3f673597dc2792c6dc5"
 }