@workday/canvas-kit-docs 7.3.7 → 7.3.8

package/dist/mdx/react/button/button/Button.mdx

@@ -13,6 +13,7 @@ import SecondaryInverse from './examples/SecondaryInverse';
 import Tertiary from './examples/Tertiary';
 import TertiaryInverse from './examples/TertiaryInverse';
 import Delete from './examples/Delete';
+import CustomStyles from './examples/CustomStyles';
 
 
 # Canvas Kit Button
@@ -114,6 +115,15 @@ Undocumented props are spread to the underlying `<button>` element.
 
 <ArgsTable of={DeleteButton} />
 
+### Custom Styles
+
+We understand that there are instances in which consumers might need to adjust styles for specific
+use cases. All of our buttons extend our lower level base button props which extends style
+properties that come from `Box`. Below are some examples in which you can overwrite styles for all
+of our buttons. Please use this sparaingly and try to adhere to the design system.
+
+<ExampleCodeBlock code={CustomStyles} />
+
 ### Accessible Use of the `as` Prop
 
 Like many of our components, Buttons accept an `as` prop, which lets you change the underlying

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

@@ -0,0 +1,53 @@
+import React from 'react';
+
+import {PrimaryButton} from '@workday/canvas-kit-react/button';
+import {HStack} from '@workday/canvas-kit-react/layout';
+import {plusIcon, caretDownIcon} from '@workday/canvas-system-icons-web';
+import {space, colors} from '@workday/canvas-kit-react/tokens';
+import {CanvasProvider} from '@workday/canvas-kit-react/common';
+import {customColorTheme} from '../../../../../../utils/storybook';
+import styled from '@emotion/styled';
+
+const getDropdownColors = () => {
+  return {
+    default: {
+      background: colors.berrySmoothie400,
+      icon: colors.frenchVanilla100,
+      label: colors.frenchVanilla100,
+    },
+    hover: {
+      background: colors.berrySmoothie500,
+      label: colors.frenchVanilla100,
+    },
+    active: {},
+    focus: {},
+    disabled: {},
+  };
+};
+
+const StyledPrimaryButton = styled(PrimaryButton)({
+  height: space.l,
+  padding: space.xxs,
+});
+
+export default () => (
+  <HStack spacing="s" padding="s">
+    <PrimaryButton
+      padding={space.l}
+      border="3px dotted red"
+      backgroundColor="cyan"
+      color={colors.blackPepper400}
+    >
+      Styled with style properties
+    </PrimaryButton>
+    <PrimaryButton colors={getDropdownColors()} icon={plusIcon} iconPosition="start">
+      Styled with colors prop
+    </PrimaryButton>
+    <StyledPrimaryButton icon={caretDownIcon} iconPosition="end">
+      Overwrite styles with emotion
+    </StyledPrimaryButton>
+    <CanvasProvider theme={{canvas: customColorTheme}}>
+      <PrimaryButton>Custom Theme</PrimaryButton>
+    </CanvasProvider>
+  </HStack>
+);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-docs",
-  "version": "7.3.7",
+  "version": "7.3.8",
   "description": "Documentation components of Canvas Kit components",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -42,7 +42,7 @@
   ],
   "dependencies": {
     "@storybook/csf": "0.0.1",
-    "@workday/canvas-kit-react": "^7.3.7"
+    "@workday/canvas-kit-react": "^7.3.8"
   },
   "devDependencies": {
     "fs-extra": "^10.0.0",
@@ -50,5 +50,5 @@
     "mkdirp": "^1.0.3",
     "typescript": "4.1"
   },
-  "gitHead": "05a8a680eedf194d3eabe11d64206e96b9c2f336"
+  "gitHead": "bd507e1dce38a8325c0e4eedd45c2987a00a6299"
 }