@workday/canvas-kit-react 8.0.0-alpha.192-next.1 → 8.0.0-alpha.198-next.0

package/layout/index.ts

@@ -1,7 +1,7 @@
-import {Layout} from './lib/Layout';
-import {Column} from './lib/Column';
+import {DeprecatedLayout} from './lib/Layout';
+import {DeprecatedColumn} from './lib/Column';
 
-export { Layout, Column};
+export { DeprecatedLayout, DeprecatedColumn};
 export * from './lib/Box';
 export * from './lib/utils/border';
 export * from './lib/utils/color';

package/layout/lib/Column.tsx

@@ -2,13 +2,21 @@ import * as React from 'react';
 import styled from '@emotion/styled';
 import isPropValid from '@emotion/is-prop-valid';
 
-export interface ColumnProps {
+/**
+ * ### Deprecated Layout Column Props
+ *
+ * As of Canvas Kit v8, Layout is being soft-deprecated.
+ * It will be hard-deprecated (completely removed) in v9. Please see the
+ * [upgrade guide](https://workday.github.io/canvas-kit/?path=/story/welcome-upgrade-guides-v8-0--page)
+ * for more information.
+ */
+export interface DeprecatedColumnProps {
   /**
-   * The children of the Column (cannot be empty).
+   * The children of the DeprecatedColumn (cannot be empty).
    */
   children?: React.ReactNode;
   /**
-   * The left and right padding of the Column (inherits from Layout prop).
+   * The left and right padding of the DeprecatedColumn (inherits from Layout prop).
    * @default 12
    */
   spacing?: number;
@@ -24,7 +32,7 @@ export interface ColumnProps {
 
 const ColumnContainer = styled('div', {
   shouldForwardProp: prop => isPropValid(prop) && prop !== 'spacing',
-})<ColumnProps>(
+})<DeprecatedColumnProps>(
   {
     '&:first-of-type': {
       paddingLeft: 0,
@@ -58,7 +66,16 @@ const ColumnContainer = styled('div', {
   }
 );
 
-export class Column extends React.Component<ColumnProps> {
+export class DeprecatedColumn extends React.Component<DeprecatedColumnProps> {
+  componentDidMount() {
+    console.warn(
+      `This component is being deprecated and will be removed in Canvas Kit V9.\n
+      For more information, please see the V8 upgrade guide:\n
+      https://workday.github.io/canvas-kit/?path=/story/welcome-upgrade-guides-v8-0--page
+      `
+    );
+  }
+
   public render() {
     const {children, spacing, columns, width, ...elemProps} = this.props;
 

package/layout/lib/Layout.tsx

@@ -1,26 +1,34 @@
 import * as React from 'react';
 import styled from '@emotion/styled';
 import {GenericStyle} from '@workday/canvas-kit-react/common';
-import {Column, ColumnProps} from './Column';
+import {DeprecatedColumn, DeprecatedColumnProps} from './Column';
 import {canvas, spaceNumbers} from '@workday/canvas-kit-react/tokens';
 import isPropValid from '@emotion/is-prop-valid';
 
-export interface LayoutProps {
+/**
+ * ### Deprecated Layout Props
+ *
+ * As of Canvas Kit v8, Layout is being soft-deprecated.
+ * It will be hard-deprecated (completely removed) in v9. Please see the
+ * [upgrade guide](https://workday.github.io/canvas-kit/?path=/story/welcome-upgrade-guides-v8-0--page)
+ * for more information.
+ */
+export interface DeprecatedLayoutProps {
   /**
-   * The children of the Layout (cannot be empty).
+   * The children of the DeprecatedLayout (cannot be empty).
    */
-  children: React.ReactElement<ColumnProps>[] | React.ReactNode;
+  children: React.ReactElement<DeprecatedColumnProps>[] | React.ReactNode;
   /**
-   * The spacing of the Layout children.
+   * The spacing of the DeprecatedLayout children.
    */
   spacing?: number;
   /**
-   * The padding of the Layout's outside container.
+   * The padding of the DeprecatedLayout's outside container.
    * @default 12
    */
   gutter?: number | string;
   /**
-   * If true, set the max width of the Layout container to `1280px`.
+   * If true, set the max width of the DeprecatedLayout container to `1280px`.
    * @default false
    */
   capWidth?: boolean;
@@ -37,7 +45,7 @@ const LayoutStyles: GenericStyle = {
 
 const LayoutContainer = styled('div', {
   shouldForwardProp: prop => isPropValid(prop) && prop !== 'spacing',
-})<LayoutProps>(
+})<DeprecatedLayoutProps>(
   LayoutStyles.styles,
   ({gutter}) => {
     if (gutter === 0) {
@@ -58,15 +66,32 @@ const LayoutContainer = styled('div', {
   }
 );
 
-export class Layout extends React.Component<LayoutProps> {
-  public static Column = Column;
+/**
+ * ### Deprecated Layout
+ *
+ * As of Canvas Kit v8, Layout is being soft-deprecated.
+ * It will be hard-deprecated (completely removed) in v9. Please see the
+ * [upgrade guide](https://workday.github.io/canvas-kit/?path=/story/welcome-upgrade-guides-v8-0--page)
+ * for more information.
+ */
+export class DeprecatedLayout extends React.Component<DeprecatedLayoutProps> {
+  componentDidMount() {
+    console.warn(
+      `This component is being deprecated and will be removed in Canvas Kit V9.\n
+      For more information, please see the V8 upgrade guide:\n
+      https://workday.github.io/canvas-kit/?path=/story/welcome-upgrade-guides-v8-0--page
+      `
+    );
+  }
+
+  public static Column = DeprecatedColumn;
 
   private renderChild = (child: React.ReactNode, spacing: number): React.ReactNode => {
     if (!React.isValidElement(child)) {
       return;
     }
 
-    if (child.type === Column) {
+    if (child.type === DeprecatedColumn) {
       const childProps = child.props;
 
       if (childProps.spacing || childProps.spacing === 0) {
@@ -96,4 +121,4 @@ export class Layout extends React.Component<LayoutProps> {
   }
 }
 
-Layout.Column = Column;
+DeprecatedLayout.Column = DeprecatedColumn;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-react",
-  "version": "8.0.0-alpha.192-next.1+f60e379b",
+  "version": "8.0.0-alpha.198-next.0+ff5616e1",
   "description": "The parent module that contains all Workday Canvas Kit React components",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -49,7 +49,7 @@
     "@emotion/styled": "^11.6.0",
     "@popperjs/core": "^2.5.4",
     "@workday/canvas-colors-web": "^2.0.0",
-    "@workday/canvas-kit-popup-stack": "^8.0.0-alpha.192-next.1+f60e379b",
+    "@workday/canvas-kit-popup-stack": "^8.0.0-alpha.198-next.0+ff5616e1",
     "@workday/canvas-system-icons-web": "^3.0.0",
     "@workday/design-assets-types": "^0.2.8",
     "chroma-js": "^2.1.0",
@@ -68,5 +68,5 @@
     "@workday/canvas-accent-icons-web": "^3.0.0",
     "@workday/canvas-applet-icons-web": "^2.0.0"
   },
-  "gitHead": "f60e379b0083b092707830478248ba5d78b2c96e"
+  "gitHead": "ff5616e10b2d5d7cceccaea1c6f9d9b742ef1779"
 }

package/segmented-control/lib/SegmentedControlButton.tsx

@@ -1,5 +1,10 @@
 import React from 'react';
-import {BaseButton, ButtonColors} from '@workday/canvas-kit-react/button';
+import {
+  BaseButton,
+  ButtonColors,
+  ButtonSizes,
+  ButtonContainerProps,
+} from '@workday/canvas-kit-react/button';
 import {
   createComponent,
   mouseFocusBehavior,
@@ -35,12 +40,22 @@ const getIconButtonColors = (toggled?: boolean): ButtonColors => {
   };
 };
 
-const StyledButton = styled(BaseButton)<StyledType>(
+const getSizeStyles = (size?: ButtonSizes) => {
+  const sizeValue =
+    size === 'large' ? `calc(${space.xl} + ${space.xxs})` : size === 'small' ? space.l : space.xl;
+
+  return {
+    width: sizeValue,
+    height: sizeValue,
+  };
+};
+
+const StyledButton = styled(BaseButton)<ButtonContainerProps & StyledType>(
   {
     borderRadius: borderRadius.zero,
     border: `1px solid ${colors.soap500}`,
     borderLeft: 'none',
-    minWidth: space.xl,
+
     '&:first-of-type': {
       borderRadius: `${borderRadius.m} 0 0 ${borderRadius.m}`,
       borderLeft: `1px solid ${colors.soap500}`,
@@ -79,13 +94,17 @@ const StyledButton = styled(BaseButton)<StyledType>(
         background: theme.canvas.palette.primary.main,
       },
     },
+  }),
+  ({size}: ButtonContainerProps) => ({
+    ...getSizeStyles(size),
   })
 );
 
-export interface SegmentedControlButtonProps {
+export interface SegmentedControlButtonProps extends ButtonContainerProps {
   toggled?: boolean;
   icon: CanvasSystemIcon;
   value?: string | number;
+  size?: 'small' | 'medium' | 'large';
 }
 
 export const SegmentedControlButton = createComponent('button')({
@@ -101,7 +120,7 @@ export const SegmentedControlButton = createComponent('button')({
         ref={ref}
         {...props}
       >
-        <BaseButton.Icon size="large" icon={icon} />
+        <BaseButton.Icon size={props.size || 'large'} icon={icon} />
       </StyledButton>
     );
   },