@workday/canvas-kit-docs 9.1.8 → 9.1.11

package/dist/es6/lib/docs.js

@@ -6427,8 +6427,17 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
             "name": "aria-describedby",
             "required": true,
             "type": {
-              "kind": "primitive",
-              "value": "string"
+              "kind": "union",
+              "value": [
+                {
+                  "kind": "primitive",
+                  "value": "string"
+                },
+                {
+                  "kind": "primitive",
+                  "value": "undefined"
+                }
+              ]
             },
             "description": "",
             "tags": {},
@@ -6439,8 +6448,17 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
             "name": "id",
             "required": true,
             "type": {
-              "kind": "primitive",
-              "value": "string"
+              "kind": "union",
+              "value": [
+                {
+                  "kind": "primitive",
+                  "value": "string"
+                },
+                {
+                  "kind": "primitive",
+                  "value": "undefined"
+                }
+              ]
             },
             "description": "",
             "tags": {},
@@ -110482,7 +110500,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
   {
     "name": "pickForegroundColor",
     "fileName": "/home/runner/work/canvas-kit/canvas-kit/modules/react/common/lib/utils/colorUtils.ts",
-    "description": "Chooses foreground color with accesible contrast against background. If contrast ratio\nis greater than 4.5:1, chooses provided light or dark color (favoring light color). If neither\nhave a high enough contrast ratio, picks the first color of the following that meets 4.5:1 or higher:\n[frenchVanilla100, blackPepper300, blackPepper400, blackPepper500, blackPepper600]\n(https://www.w3.org/TR/WCAG20-TECHS/G18.html)",
+    "description": "Chooses foreground color with accessible contrast against background. If contrast ratio\nis greater than 4.5:1, chooses provided light or dark color (favoring light color). If neither\nhave a high enough contrast ratio, picks the first color of the following that meets 4.5:1 or higher:\n[frenchVanilla100, blackPepper300, blackPepper400, blackPepper500, blackPepper600]\n(https://www.w3.org/TR/WCAG20-TECHS/G18.html)",
     "declarations": [
       {
         "name": "pickForegroundColor",

package/dist/mdx/preview-react/text-input/TextInput.mdx

@@ -10,6 +10,8 @@ import LabelPositionVertical from './examples/LabelPositionVertical';
 import Placeholder from './examples/Placeholder';
 import RefForwarding from './examples/RefForwarding';
 import Required from './examples/Required';
+import Hidden from './examples/Hidden';
+import ReadOnly from './examples/ReadOnly';
 import Password from './examples/Password';
 import HiddenLabel from './examples/HiddenLabel';
 import ThemedAlert from './examples/ThemedAlert';
@@ -56,6 +58,21 @@ that the field is required. This will also add a red asterisk to `TextInput.Labe
 
 <ExampleCodeBlock code={Required} />
 
+### ReadOnly
+
+Use `TextInput.Field`'s `readOnly` prop to indicate that the field can not be changed. We reccommend
+setting the background and border color to tranparent and the cursor to default to help inform users
+of the immutiblity.
+
+<ExampleCodeBlock code={ReadOnly} />
+
+### Hidden
+
+Set `TextInput.Field`'s `type` prop to
+`hidden` to completly hide a field while still submitting its value, often used for things like security tokens. Note: You will likely need to manually set`aria-describedby={undefined}`and`id={undefined}`
+
+<ExampleCodeBlock code={Hidden} />
+
 ### Ref Forwarding
 
 All the TextInput subcomponents support

package/dist/mdx/preview-react/text-input/examples/Hidden.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import {TextInput} from '@workday/canvas-kit-preview-react/text-input';
+
+export default () => {
+  return (
+    <>
+      <h2>Inspect Element to see the markup</h2>
+      <TextInput.Field value={'Secret'} type="hidden" />
+    </>
+  );
+};

package/dist/mdx/preview-react/text-input/examples/ReadOnly.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import {TextInput} from '@workday/canvas-kit-preview-react/text-input';
+
+export default () => {
+  return (
+    <TextInput orientation="vertical">
+      <TextInput.Label>Unwavering Opinion</TextInput.Label>
+      <TextInput.Field
+        value={'CKR is great'}
+        readOnly={true}
+        borderColor="transparent"
+        background="transparent"
+        cursor="default"
+      />
+    </TextInput>
+  );
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-docs",
-  "version": "9.1.8",
+  "version": "9.1.11",
   "description": "Documentation components of Canvas Kit components",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -44,9 +44,9 @@
   "dependencies": {
     "@emotion/styled": "^11.6.0",
     "@storybook/csf": "0.0.1",
-    "@workday/canvas-kit-labs-react": "^9.1.8",
-    "@workday/canvas-kit-preview-react": "^9.1.8",
-    "@workday/canvas-kit-react": "^9.1.8",
+    "@workday/canvas-kit-labs-react": "^9.1.11",
+    "@workday/canvas-kit-preview-react": "^9.1.11",
+    "@workday/canvas-kit-react": "^9.1.11",
     "@workday/canvas-system-icons-web": "^3.0.0",
     "markdown-to-jsx": "^6.10.3",
     "ts-node": "^10.9.1"
@@ -57,5 +57,5 @@
     "mkdirp": "^1.0.3",
     "typescript": "4.2"
   },
-  "gitHead": "c12505777b772a702fc76b668cea0bd0b70b0a96"
+  "gitHead": "59071fde7d7166dd786144435c1263551ed88e1f"
 }