@workday/canvas-kit-docs 6.3.5 → 7.0.0-alpha.0-next.3

package/dist/mdx/react/status-indicator/StatusIndicator.mdx

@@ -3,6 +3,7 @@ import {StatusIndicator} from '@workday/canvas-kit-react/status-indicator';
 import Basic from './examples/Basic';
 import Icon from './examples/Icon';
 import Emphasis from './examples/Emphasis';
+import MaxWidth from './examples/MaxWidth';
 
 
 # Canvas Kit Status Indicator
@@ -54,6 +55,17 @@ label.
 
 <ExampleCodeBlock code={Icon} />
 
+### Max Width
+
+By default, the maximum width of a Status Indicator is `200px`. When the text in the StatusIndicator
+exceeds the max width, it will be truncated with an ellipsis. This maxWidth can be customized.
+
+Avoid truncation wherever possible by using shorter text in Status Indicators. In the case where
+truncation is necessary, you should use an `OverflowTooltip`. For the full text to be accessible
+when you do this, you should make the tooltip focusable with `tabIndex`.
+
+<ExampleCodeBlock code={MaxWidth} />
+
 ## Props
 
 Undocumented props are spread to the outermost element rendered by Status Indicator.

package/dist/mdx/react/status-indicator/examples/MaxWidth.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import styled from '@emotion/styled';
+import {StatusIndicator} from '@workday/canvas-kit-react/status-indicator';
+import {OverflowTooltip} from '@workday/canvas-kit-react/tooltip';
+import {space} from '@workday/canvas-kit-react/tokens';
+
+const StatusIndicators = styled('div')({
+  '& > *': {
+    margin: space.xxs,
+  },
+});
+
+export default () => {
+  return (
+    <StatusIndicators>
+      <StatusIndicator
+        label="Longer Than Normal Ellipsized Status"
+        type={StatusIndicator.Type.Blue}
+        maxWidth={250}
+      />
+      <OverflowTooltip>
+        <StatusIndicator
+          label="Overflow Tooltip On Hover/Focus Status"
+          type={StatusIndicator.Type.Green}
+          tabIndex={0}
+        />
+      </OverflowTooltip>
+    </StatusIndicators>
+  );
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-docs",
-  "version": "6.3.5",
+  "version": "7.0.0-alpha.0-next.3+14a81c7e",
   "description": "Documentation components of Canvas Kit components",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -50,7 +50,7 @@
   ],
   "dependencies": {
     "@storybook/csf": "0.0.1",
-    "@workday/canvas-kit-react": "^6.3.5"
+    "@workday/canvas-kit-react": "^7.0.0-alpha.0-next.3+14a81c7e"
   },
   "devDependencies": {
     "fs-extra": "^10.0.0",
@@ -58,5 +58,5 @@
     "mkdirp": "^1.0.3",
     "typescript": "^3.8.3"
   },
-  "gitHead": "bf02ab73d5e19ecde29cb853dad4f558201cb886"
+  "gitHead": "14a81c7ef3deb9efaf67fa3ec9cc2d2a3161b00b"
 }