@workday/canvas-kit-docs 10.3.21 → 10.3.23

package/dist/es6/lib/docs.js

@@ -113027,7 +113027,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
   {
     "name": "useThemedRing",
     "fileName": "/home/runner/work/canvas-kit/canvas-kit/modules/react/common/lib/theming/useThemedRing.ts",
-    "description": "This is a way to automatically add themed colors to your input and is helpful when showing alerts, success or errors to users.\nIt supports `error`, `alert`, and `success` states. It will try and use the corresponding\n`main` colors from your `CanvasThemePalette` unless they do not meet accessibility contrast, in\nwhich case the outer ring will use the `darkest` color. This hook will also show a `focusOutline`\nring when the input is focused. Note: You should not rely on these colors alone to differentiate\nalerts, but use them in combination with icons or hint text.\n```tsx\n// Add here jsx pragma to use css\nimport {jsx} from '@emotion/core';\nimport React from 'react';\nimport {TextInput} from '@workday/canvas-kit-preview-react/text-input';\nimport {useThemedRing} from '@workday/canvas-kit-react/common';\n\nexport const MyInput = ({handleChange}) => {\n const [value, setValue] = React.useState('invalid@email');\n const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n   setValue(event.target.value);\n };\n\n const alertStyles = useThemedRing('alert');\n\n return (\n   <TextInput>\n    <TextInput.Label>Email</TextInput.Label>\n     <TextInput.Field css={alertStyles} onChange={handleChange} value={value} />\n     <TextInput.Hint>Please enter a valid email.</TextInput.Hint>\n   </TextInput>\n );\n};\n```",
+    "description": "This is a way to automatically add themed colors to your input and is helpful when showing alerts, success or errors to users.\nIt supports `error`, `alert`, and `success` states. It will try and use the corresponding\n`main` colors from your `CanvasThemePalette` unless they do not meet accessibility contrast, in\nwhich case the outer ring will use the `darkest` color. This hook will also show a `focusOutline`\nring when the input is focused. Note: You should not rely on these colors alone to differentiate\nalerts, but use them in combination with icons or hint text.\n```tsx\n// Add here jsx pragma to use css\nimport {jsx} from '@emotion/react';\nimport React from 'react';\nimport {TextInput} from '@workday/canvas-kit-preview-react/text-input';\nimport {useThemedRing} from '@workday/canvas-kit-react/common';\n\nexport const MyInput = ({handleChange}) => {\n const [value, setValue] = React.useState('invalid@email');\n const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n   setValue(event.target.value);\n };\n\n const alertStyles = useThemedRing('alert');\n\n return (\n   <TextInput>\n    <TextInput.Label>Email</TextInput.Label>\n     <TextInput.Field css={alertStyles} onChange={handleChange} value={value} />\n     <TextInput.Hint>Please enter a valid email.</TextInput.Hint>\n   </TextInput>\n );\n};\n```",
     "declarations": [
       {
         "name": "useThemedRing",

package/dist/es6/lib/specs.js

@@ -3687,6 +3687,32 @@ module.exports = {specifications: [
               }
             ]
           },
+          {
+            "type": "describe",
+            "name": "given the [Testing/Popups/Popup, ComboboxWithinPopup] example is rendered",
+            "children": [
+              {
+                "type": "describe",
+                "name": "when the button is clicked",
+                "children": [
+                  {
+                    "type": "it",
+                    "name": "should show the popup"
+                  },
+                  {
+                    "type": "describe",
+                    "name": "when is open and the first item is clicked",
+                    "children": [
+                      {
+                        "type": "it",
+                        "name": "should not close the popup on select"
+                      }
+                    ]
+                  }
+                ]
+              }
+            ]
+          },
           {
             "type": "describe",
             "name": "given the [Testing/Popups/Popup, PopupWithFallbackPlacements] example is rendered",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-docs",
-  "version": "10.3.21",
+  "version": "10.3.23",
   "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": "^10.3.21",
-    "@workday/canvas-kit-preview-react": "^10.3.21",
-    "@workday/canvas-kit-react": "^10.3.21",
-    "@workday/canvas-kit-styling": "^10.3.21",
+    "@workday/canvas-kit-labs-react": "^10.3.23",
+    "@workday/canvas-kit-preview-react": "^10.3.23",
+    "@workday/canvas-kit-react": "^10.3.23",
+    "@workday/canvas-kit-styling": "^10.3.23",
     "@workday/canvas-system-icons-web": "^3.0.0",
     "@workday/canvas-tokens-web": "^1.0.0",
     "markdown-to-jsx": "^6.10.3",
@@ -59,5 +59,5 @@
     "mkdirp": "^1.0.3",
     "typescript": "4.2"
   },
-  "gitHead": "34c1299ee9d566e02138463314a7d7eaf8ddde85"
+  "gitHead": "5823b42e11dd2e917405f494b1899df97e615cb5"
 }