@workday/canvas-kit-docs 6.0.0-beta.0-next.11 → 6.0.0-beta.0-next.16

package/dist/commonjs/lib/specs.js

@@ -5687,6 +5687,16 @@ module.exports = {specifications: [
                   }
                 ]
               },
+              {
+                "type": "describe",
+                "name": "when the \"Super Mega Ultra Long Content With Max Width Custom\" button is hovered",
+                "children": [
+                  {
+                    "type": "it",
+                    "name": "should show the tooltip"
+                  }
+                ]
+              },
               {
                 "type": "describe",
                 "name": "when the \"Short Content\" button is focused",
@@ -5706,6 +5716,16 @@ module.exports = {specifications: [
                     "name": "should show the tooltip"
                   }
                 ]
+              },
+              {
+                "type": "describe",
+                "name": "when the \"Super Mega Ultra Long Content With Max Width Custom\" button is focused",
+                "children": [
+                  {
+                    "type": "it",
+                    "name": "should show the tooltip"
+                  }
+                ]
               }
             ]
           },

package/dist/es6/lib/specs.js

@@ -5687,6 +5687,16 @@ module.exports = {specifications: [
                   }
                 ]
               },
+              {
+                "type": "describe",
+                "name": "when the \"Super Mega Ultra Long Content With Max Width Custom\" button is hovered",
+                "children": [
+                  {
+                    "type": "it",
+                    "name": "should show the tooltip"
+                  }
+                ]
+              },
               {
                 "type": "describe",
                 "name": "when the \"Short Content\" button is focused",
@@ -5706,6 +5716,16 @@ module.exports = {specifications: [
                     "name": "should show the tooltip"
                   }
                 ]
+              },
+              {
+                "type": "describe",
+                "name": "when the \"Super Mega Ultra Long Content With Max Width Custom\" button is focused",
+                "children": [
+                  {
+                    "type": "it",
+                    "name": "should show the tooltip"
+                  }
+                ]
               }
             ]
           },

package/dist/mdx/react/button/icon-button/IconButton.mdx

@@ -5,6 +5,7 @@ import Circle from './examples/Circle';
 import CircleFilled from './examples/CircleFilled';
 import Inverse from './examples/Inverse';
 import InverseFilled from './examples/InverseFilled';
+import MirroredIcon from './examples/MirroredIcon';
 import Plain from './examples/Plain';
 import Square from './examples/Square';
 import SquareFilled from './examples/SquareFilled';
@@ -76,6 +77,19 @@ backgrounds.
 
 <ExampleCodeBlock code={InverseFilled} />
 
+### Mirroring Icons
+
+Sometimes icons should be mirrored for bidirectional support. Setting the `shouldMirrorIcon` prop to
+`true` will transform the icon's x-axis to mirror the graphic. This is often useful when there is no
+equivalent mirrored icon available. Below is an example of the `unorderedListIcon` being rendered in
+its default state with an icon showing a left-to-right bulleted list. Beside it is the same icon
+that has been mirrored to show a right-to-left bulleted list.
+
+Note that while the `aria-label` text in this example did not need to be updated, if the label
+contains directional descriptors such as "right" and "left," the text should also be updated.
+
+<ExampleCodeBlock code={MirroredIcon} />
+
 ### Toggleability
 
 The `toggle` prop can be used to make icon buttons toggleable.

package/dist/mdx/react/button/icon-button/examples/MirroredIcon.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+import {IconButton} from '@workday/canvas-kit-react/button';
+import {unorderedListIcon} from '@workday/canvas-system-icons-web';
+
+export default () => (
+  <>
+    <IconButton icon={unorderedListIcon} aria-label="create a bulleted list" />
+    <IconButton icon={unorderedListIcon} aria-label="create a bulleted list" shouldMirrorIcon />
+  </>
+);

package/dist/mdx/react/tooltip/examples/Ellipsis.tsx

@@ -4,6 +4,21 @@ import {SecondaryButton} from '@workday/canvas-kit-react/button';
 import {OverflowTooltip} from '@workday/canvas-kit-react/tooltip';
 import {space} from '@workday/canvas-kit-react/tokens';
 
+const CustomContent = ({...elemProps}) => (
+  <button
+    style={{
+      marginTop: space.xs,
+      maxWidth: 200,
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+      whiteSpace: 'nowrap',
+    }}
+    {...elemProps}
+  >
+    Super Mega Ultra Long Content With Max Width Custom
+  </button>
+);
+
 export default () => {
   return (
     <React.Fragment>
@@ -28,6 +43,9 @@ export default () => {
           Super Mega Ultra Long Content With Max Width
         </button>
       </OverflowTooltip>
+      <OverflowTooltip>
+        <CustomContent />
+      </OverflowTooltip>
     </React.Fragment>
   );
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-docs",
-  "version": "6.0.0-beta.0-next.11+c369bddc",
+  "version": "6.0.0-beta.0-next.16+2c70e470",
   "description": "Documentation components of Canvas Kit components",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -49,7 +49,7 @@
   ],
   "dependencies": {
     "@storybook/csf": "0.0.1",
-    "@workday/canvas-kit-react": "^6.0.0-beta.0-next.11+c369bddc"
+    "@workday/canvas-kit-react": "^6.0.0-beta.0-next.16+2c70e470"
   },
   "devDependencies": {
     "fs-extra": "^10.0.0",
@@ -57,5 +57,5 @@
     "mkdirp": "^1.0.3",
     "typescript": "^3.8.3"
   },
-  "gitHead": "c369bddcf00cc219e9c8d6569b5a26355bdde4d6"
+  "gitHead": "2c70e470ff0afecfdd18ea96837ab7f19f812128"
 }