@workday/canvas-kit-docs 11.1.6 → 11.1.8

package/dist/es6/lib/Value.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Value.d.ts","sourceRoot":"","sources":["../../../lib/Value.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAO,KAAK,KAAK,MAAM,oBAAoB,CAAC;AAQ5C,wBAAgB,cAAc,CAAC,CAAC,SAAS;IAAC,IAAI,EAAE,MAAM,CAAA;CAAC,EACrD,GAAG,EAAE,CAAC,CAAC,MAAM,CAAC,EACd,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,GAC9B,IAAI,CAGN;AAED,MAAM,WAAW,UAAU,CAAC,CAAC,SAAS;IAAC,IAAI,EAAE,MAAM,CAAA;CAAC,GAAG,KAAK,CAAC,KAAK;IAChE,KAAK,EAAE,CAAC,CAAC;IACT,GAAG,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC;IAC9B,IAAI,CAAC,EAAE,GAAG,CAAC;CACZ;AAED,eAAO,MAAM,KAAK;UAAqB,MAAM;qDAW5C,CAAC;AAEF,eAAO,MAAM,gBAAgB;gBAA+B,MAAM,cAAc,EAAE;iBA+CjF,CAAC;AAgEF,eAAO,MAAM,eAAe;gBAKd,MAAM,cAAc,EAAE;;;iBAyBnC,CAAC"}
+{"version":3,"file":"Value.d.ts","sourceRoot":"","sources":["../../../lib/Value.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAO,KAAK,KAAK,MAAM,oBAAoB,CAAC;AAS5C,wBAAgB,cAAc,CAAC,CAAC,SAAS;IAAC,IAAI,EAAE,MAAM,CAAA;CAAC,EACrD,GAAG,EAAE,CAAC,CAAC,MAAM,CAAC,EACd,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,GAC9B,IAAI,CAGN;AAED,MAAM,WAAW,UAAU,CAAC,CAAC,SAAS;IAAC,IAAI,EAAE,MAAM,CAAA;CAAC,GAAG,KAAK,CAAC,KAAK;IAChE,KAAK,EAAE,CAAC,CAAC;IACT,GAAG,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC;IAC9B,IAAI,CAAC,EAAE,GAAG,CAAC;CACZ;AAED,eAAO,MAAM,KAAK;UAAqB,MAAM;qDAW5C,CAAC;AAEF,eAAO,MAAM,gBAAgB;gBAA+B,MAAM,cAAc,EAAE;iBAgDjF,CAAC;AAgEF,eAAO,MAAM,eAAe;gBAKd,MAAM,cAAc,EAAE;;;iBAyBnC,CAAC"}

package/dist/es6/lib/Value.js

@@ -5,6 +5,7 @@ import { MdxJSToJSX } from './MDXElements';
 import { Table } from './Table';
 import { capitalize, IndentLevelContext, RenderContext, indent } from './widgetUtils';
 import { DescriptionTooltip } from './DescriptionTooltip';
+import { colors } from '@workday/canvas-kit-react/tokens';
 const widgets = {};
 export function registerWidget(key, widget) {
     widget.displayName = `${capitalize(key)}Widget`;
@@ -30,11 +31,12 @@ export const PropertiesInline = ({ properties }) => {
             return (React.createElement(React.Fragment, { key: index },
                 React.createElement("br", null),
                 indent(level + 1),
-                p.description ? (React.createElement(DescriptionTooltip, { type: "describe", style: { maxWidth: '50em' }, title: React.createElement(MdxJSToJSX, null, p.description) },
+                p.description || p.tags.deprecated ? (React.createElement(DescriptionTooltip, { type: "describe", style: { maxWidth: '50em' }, title: React.createElement(MdxJSToJSX, null, p.description || p.tags.deprecated) },
                     React.createElement("span", { className: "token property", style: {
                             cursor: 'pointer',
-                            textDecoration: 'underline',
+                            textDecoration: p.tags.deprecated ? 'line-through' : 'underline',
                             textDecorationStyle: 'dotted',
+                            color: p.tags.deprecated ? colors.cinnamon600 : colors.plum600,
                         } }, p.name))) : (React.createElement("span", { className: "token property" }, p.name)),
                 React.createElement("span", { className: "token punctuation" }, ":"),
                 "\u00A0",

package/dist/es6/lib/docs.js

@@ -5248,11 +5248,24 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
           "name": "colorSet",
           "required": false,
           "type": {
-            "kind": "array",
-            "value": {
-              "kind": "primitive",
-              "value": "string"
-            }
+            "kind": "union",
+            "value": [
+              {
+                "kind": "array",
+                "value": {
+                  "kind": "primitive",
+                  "value": "string"
+                }
+              },
+              {
+                "kind": "array",
+                "value": {
+                  "kind": "symbol",
+                  "name": "SwatchBookColorObject",
+                  "value": "SwatchBookColorObject"
+                }
+              }
+            ]
           },
           "description": "The array of colors to be rendered in the swatchbook.",
           "declarations": [
@@ -5566,6 +5579,57 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
       ]
     }
   },
+  {
+    "name": "SwatchBookColorObject",
+    "fileName": "/home/runner/work/canvas-kit/canvas-kit/modules/preview-react/color-picker/lib/parts/SwatchBook.tsx",
+    "description": "",
+    "declarations": [
+      {
+        "name": "SwatchBookColorObject",
+        "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/preview-react/color-picker/lib/parts/SwatchBook.tsx"
+      }
+    ],
+    "tags": {},
+    "type": {
+      "kind": "object",
+      "properties": [
+        {
+          "kind": "property",
+          "name": "value",
+          "required": true,
+          "type": {
+            "kind": "primitive",
+            "value": "string"
+          },
+          "description": "",
+          "declarations": [
+            {
+              "name": "value",
+              "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/preview-react/color-picker/lib/parts/SwatchBook.tsx"
+            }
+          ],
+          "tags": {}
+        },
+        {
+          "kind": "property",
+          "name": "label",
+          "required": true,
+          "type": {
+            "kind": "primitive",
+            "value": "string"
+          },
+          "description": "",
+          "declarations": [
+            {
+              "name": "label",
+              "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/preview-react/color-picker/lib/parts/SwatchBook.tsx"
+            }
+          ],
+          "tags": {}
+        }
+      ]
+    }
+  },
   {
     "name": "SwatchBookProps",
     "fileName": "/home/runner/work/canvas-kit/canvas-kit/modules/preview-react/color-picker/lib/parts/SwatchBook.tsx",
@@ -5603,8 +5667,21 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
           "type": {
             "kind": "array",
             "value": {
-              "kind": "primitive",
-              "value": "string"
+              "kind": "parenthesis",
+              "value": {
+                "kind": "union",
+                "value": [
+                  {
+                    "kind": "primitive",
+                    "value": "string"
+                  },
+                  {
+                    "kind": "symbol",
+                    "name": "SwatchBookColorObject",
+                    "value": "SwatchBookColorObject"
+                  }
+                ]
+              }
             }
           },
           "description": "",
@@ -61923,6 +62000,42 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
                         "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/button/lib/types.ts"
                       }
                     ],
+                    "tags": {
+                      "deprecated": "This option is no longer supported at run time and will be removed from the type interface in a v12. If you want to customize the focus ring, use `boxShadowInner` and `boxShadowOuter` to update the inner and outer colors of the focus ring. Use with caution."
+                    }
+                  },
+                  {
+                    "kind": "property",
+                    "name": "boxShadowInner",
+                    "required": false,
+                    "type": {
+                      "kind": "primitive",
+                      "value": "string"
+                    },
+                    "description": "Updates the color of the inner `box-shadow` within a focus ring.",
+                    "declarations": [
+                      {
+                        "name": "boxShadowInner",
+                        "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/button/lib/types.ts"
+                      }
+                    ],
+                    "tags": {}
+                  },
+                  {
+                    "kind": "property",
+                    "name": "boxShadowOuter",
+                    "required": false,
+                    "type": {
+                      "kind": "primitive",
+                      "value": "string"
+                    },
+                    "description": "Updates the color of the outer `box-shadow` within a focus ring.",
+                    "declarations": [
+                      {
+                        "name": "boxShadowOuter",
+                        "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/button/lib/types.ts"
+                      }
+                    ],
                     "tags": {}
                   }
                 ]

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

@@ -15,6 +15,11 @@ const myButtonStencil = createStencil({
     [systemIconStencil.vars.color]: system.color.static.green.strong,
     [buttonStencil.vars.borderRadius]: system.shape.half,
     border: `${px2rem(3)} solid transparent`,
+    '&:focus-visible': {
+      [buttonStencil.vars.background]: system.color.static.green.strong,
+      [buttonStencil.vars.boxShadowInner]: system.color.static.green.soft,
+      [buttonStencil.vars.boxShadowOuter]: system.color.static.green.strong,
+    },
     '&:hover': {
       [buttonStencil.vars.background]: system.color.static.green.default,
       border: `${px2rem(3)} dotted ${system.color.static.green.strong}`,
@@ -29,8 +34,8 @@ const myButtonStencil = createStencil({
 });
 
 const MyCustomButton = createComponent('button')({
-  Component: ({children, size, ...elemProps}: PrimaryButtonProps, ref, Element) => (
-    <PrimaryButton ref={ref} {...handleCsProp(elemProps, myButtonStencil({size}))}>
+  Component: ({children, ...elemProps}: PrimaryButtonProps, ref, Element) => (
+    <PrimaryButton as={Element} ref={ref} {...handleCsProp(elemProps, myButtonStencil())}>
       {children}
     </PrimaryButton>
   ),
@@ -43,14 +48,23 @@ const myCustomStyles = createStyles({
 
 const customColors = {
   default: {
-    background: system.color.static.green.soft,
-    icon: system.color.static.green.strong,
-    label: system.color.static.green.strong,
+    background: system.color.static.orange.soft,
+    icon: system.color.static.orange.strong,
+    label: system.color.static.orange.strong,
   },
   hover: {
-    background: system.color.static.green.default,
-    icon: system.color.static.green.strong,
+    background: system.color.static.orange.default,
+    icon: system.color.static.orange.strong,
+  },
+  active: {
+    background: system.color.static.orange.strong,
+  },
+  focus: {
+    background: system.color.static.orange.strong,
+    boxShadowInner: system.color.static.orange.soft,
+    boxShadowOuter: system.color.static.orange.strong,
   },
+  disabled: {},
 };
 
 export default () => (

package/lib/Value.tsx

@@ -8,6 +8,7 @@ import {MdxJSToJSX} from './MDXElements';
 import {Table} from './Table';
 import {capitalize, IndentLevelContext, RenderContext, indent} from './widgetUtils';
 import {DescriptionTooltip} from './DescriptionTooltip';
+import {colors} from '@workday/canvas-kit-react/tokens';
 
 const widgets: Record<string, React.FC<ValueProps>> = {};
 
@@ -52,18 +53,19 @@ export const PropertiesInline = ({properties}: {properties: types.ObjectProperty
           <React.Fragment key={index}>
             <br />
             {indent(level + 1)}
-            {p.description ? (
+            {p.description || p.tags.deprecated ? (
               <DescriptionTooltip
                 type="describe"
                 style={{maxWidth: '50em'}}
-                title={<MdxJSToJSX>{p.description}</MdxJSToJSX>}
+                title={<MdxJSToJSX>{p.description || p.tags.deprecated}</MdxJSToJSX>}
               >
                 <span
                   className="token property"
                   style={{
                     cursor: 'pointer',
-                    textDecoration: 'underline',
+                    textDecoration: p.tags.deprecated ? 'line-through' : 'underline',
                     textDecorationStyle: 'dotted',
+                    color: p.tags.deprecated ? colors.cinnamon600 : colors.plum600,
                   }}
                 >
                   {p.name}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-docs",
-  "version": "11.1.6",
+  "version": "11.1.8",
   "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": "^11.1.6",
-    "@workday/canvas-kit-preview-react": "^11.1.6",
-    "@workday/canvas-kit-react": "^11.1.6",
-    "@workday/canvas-kit-styling": "^11.1.6",
+    "@workday/canvas-kit-labs-react": "^11.1.8",
+    "@workday/canvas-kit-preview-react": "^11.1.8",
+    "@workday/canvas-kit-react": "^11.1.8",
+    "@workday/canvas-kit-styling": "^11.1.8",
     "@workday/canvas-system-icons-web": "^3.0.0",
     "@workday/canvas-tokens-web": "^2.0.0",
     "markdown-to-jsx": "^7.2.0",
@@ -59,5 +59,5 @@
     "mkdirp": "^1.0.3",
     "typescript": "4.2"
   },
-  "gitHead": "631d1ec692f362e0dfac142a038fed1fb6a97fb6"
+  "gitHead": "6a3bca7c56f654e282109430f4918d5bc89f2d21"
 }