feat(action-bar): Refactor ActionBar component

modules/codemod/lib/v7/compoundActionBar.ts

@@ -0,0 +1,43 @@
+import {API, FileInfo, Options, JSXElement} from 'jscodeshift';
+import {getImportRenameMap} from './utils/getImportRenameMap';
+
+export default function transformer(file: FileInfo, api: API, options: Options) {
+  const j = api.jscodeshift;
+
+  const root = j(file.source);
+
+  const {containsCanvasImports, importMap, styledMap} = getImportRenameMap(
+    j,
+    root,
+    '@workday/canvas-kit-react/action-bar'
+  );
+
+  if (!containsCanvasImports) {
+    return file.source;
+  }
+
+  root
+    .find(
+      j.JSXElement,
+      (value: JSXElement) =>
+        value.openingElement.name.type === 'JSXIdentifier' &&
+        (value.openingElement.name.name === importMap.ActionBar ||
+          value.openingElement.name.name === styledMap.ActionBar)
+    )
+    .forEach(nodePath => {
+      const attributes = nodePath.value.openingElement.attributes;
+
+      if (attributes) {
+        // remove these attributes from ActionBar
+        nodePath.value.openingElement.attributes = attributes.filter(item =>
+          item.type === 'JSXAttribute' &&
+          item.name.type === 'JSXIdentifier' &&
+          ['fixed'].includes(item.name.name)
+            ? false
+            : true
+        );
+      }
+    });
+
+  return root.toSource();
+}

modules/codemod/lib/v7/spec/compoundActionBar.spec.ts

@@ -0,0 +1,23 @@
+import {expectTransformFactory} from './expectTransformFactory';
+import transform from '../compoundActionBar';
+import {stripIndent} from 'common-tags';
+
+const expectTransform = expectTransformFactory(transform);
+
+describe('ActionBar', () => {
+  it('should restructure ActionBar usages with props', () => {
+    const input = stripIndent`
+      import {ActionBar} from '@workday/canvas-kit-react/action-bar'
+
+      <ActionBar fixed="true" />
+    `;
+
+    const expected = stripIndent`
+      import {ActionBar} from '@workday/canvas-kit-react/action-bar'
+
+      <ActionBar />
+    `;
+
+    expectTransform(input, expected);
+  });
+});

modules/docs/mdx/7.0-MIGRATION-GUIDE.mdx

@@ -9,6 +9,7 @@ Below are the breaking changes made in Canvas Kit v7. Please
 any questions about the update.
 
 - [Codemod](#codemod)
+- [ActionBar Component Updates](#actionbar-component-updates)
 
 ## Codemod
 
@@ -35,3 +36,16 @@ rollback more easily if necessary.**
 [Let us know](https://github.com/Workday/canvas-kit/issues/new?labels=bug&template=bug.md) if you
 encounter any issues or use cases that we've missed. The `@workday/canvas-kit-codemod` package will
 help us maintain additional codemod transforms to make future migrations easier.
+
+## ActionBar Component Updates
+
+We've refactored our ActionBar components to simplify logic.
+
+PR: https://github.com/Workday/canvas-kit/pull/1396
+
+**Changes:**
+
+- Component has been converted to compound component.
+- `fixed` prop has been removed from component.
+- Now ActionBar uses `position` prop to set container position instead `fixed` props.
+- Fixed position has been set as default if there is not passed `position` prop.

modules/react/action-bar/README.md

@@ -1,55 +1,6 @@
-# Canvas Kit Action Bar
+# Canvas Kit React Action Bar
 
-Full width toolbar fixed to bottom of screen.
+`ActionBar` contains primary and secondary actions related to a page or task.
 
-Although not required, [buttons](../../button/react) are often used in in action bars. The primary
-action button should be left aligned followed by secondary buttons. The primary button is on the
-right only in task orchestration and on mobile devices.
-
-## Installation
-
-```sh
-yarn add @workday/canvas-kit-react
-```
-
-## Usage
-
-```tsx
-import * as React from 'react';
-import {PrimaryButton, SecondaryButton} from '@workday/canvas-kit-react/button';
-import {ActionBar} from '@workday/canvas-kit-react/action-bar';
-
-<ActionBar>
-  <PrimaryButton variant="primary">Button</PrimaryButton>
-  <SecondaryButton>Button</SecondaryButton>
-  <SecondaryButton>Button</SecondaryButton>
-</ActionBar>;
-```
-
-## Static Properties
-
-> None
-
-## Component Props
-
-### Required
-
-> None
-
-### Optional
-
-#### `fixed: boolean`
-
-> Fixes the toolbar to the bottom of the window (uses `position: fixed`)
-
-## Responsive Behavior
-
-At 575px, responsive styles will take effect:
-
-- Applies a flex box to the buttons
-- Makes single-button groups full width
-- All buttons will become the same width (`flex: 1`).
-- Button order will become reversed, making left-aligned primary buttons right-aligned.
-
-> When on a mobile form factor, the button placement should flip to have the primary button on the
-> far right.
+For more detailed information on this component, please refer to the
+[storybook documentation](https://workday.github.io/canvas-kit/?path=/docs/components-buttons-action-bar-react--basic)

modules/react/action-bar/index.ts

@@ -1,5 +1 @@
-import ActionBar from './lib/ActionBar';
-
-export default ActionBar;
-export {ActionBar};
 export * from './lib/ActionBar';

modules/react/action-bar/lib/ActionBar.tsx

@@ -1,76 +1,55 @@
 import * as React from 'react';
-import {styled} from '@workday/canvas-kit-react/common';
-import {colors, commonColors, space, CSSProperties} from '@workday/canvas-kit-react/tokens';
+import {Globals} from 'csstype';
+import {createComponent, styled, StyledType} from '@workday/canvas-kit-react/common';
+import {commonColors, colors, space} from '@workday/canvas-kit-react/tokens';
+import {HStack, HStackProps} from '@workday/canvas-kit-labs-react';
 
-export interface ActionBarProps extends React.HTMLAttributes<HTMLDivElement> {
+type PropertyPosition =
+  | Globals
+  | '-webkit-sticky'
+  | 'absolute'
+  | 'fixed'
+  | 'relative'
+  | 'static'
+  | 'sticky';
+
+export interface ActionBarProps {
   /**
-   * If true, fix the ActionBar to the bottom of the screen.
-   * @default false
+   * Sets the position for the container
+   * @default "fixed"
    */
-  fixed?: boolean;
-}
-
-function getFixedStyles(fixed = false): CSSProperties {
-  return fixed
-    ? {
-        position: 'fixed',
-        left: 0,
-        bottom: 0,
-        right: 0,
-      }
-    : {};
+  position?: PropertyPosition;
 }
 
-const ActionBarContainer = styled('div')<ActionBarProps>(
-  {
-    borderTop: `solid 1px ${colors.soap400}`,
-    background: commonColors.background,
+const ResponsiveHStack = styled(HStack)<HStackProps & StyledType>(({theme}) => ({
+  [theme.canvas.breakpoints.down('s')]: {
     padding: space.s,
-    boxShadow: '0 -2px 4px rgba(0, 0, 0, 0.08)',
-  },
-  ({fixed, theme}) => {
-    return {
-      ...getFixedStyles(fixed),
-      [theme.canvas.breakpoints.down('s')]: {
-        padding: space.xxs,
-      },
-    };
-  }
-);
-
-const ChildrenContainer = styled('div')(
-  {
-    display: 'inline-block',
-    padding: `0 ${space.m}`,
-    '*:not(:first-of-type)': {
-      marginLeft: space.s,
+    '> *:not(div)': {
+      flex: 1,
     },
   },
-  ({theme}) => ({
-    [theme.canvas.breakpoints.down('s')]: {
-      display: 'flex',
-      padding: space.xxs,
-      justifyContent: 'center',
-      flexDirection: 'row-reverse',
-      '> *': {
-        flex: 1,
-        '&:not(:first-of-type)': {
-          marginRight: space.s,
-          marginLeft: 0,
-        },
-      },
-    },
-  })
-);
+}));
 
-export default class ActionBar extends React.Component<ActionBarProps> {
-  public render() {
-    const {fixed, children, ...elemProps} = this.props;
+const containerStyles: Omit<HStackProps, 'spacing'> = {
+  background: commonColors.background,
+  borderTop: `solid 1px ${colors.soap400}`,
+  bottom: 0,
+  depth: 1,
+  left: 0,
+  padding: `${space.s} ${space.xl} `,
+  width: '100%',
+};
 
-    return (
-      <ActionBarContainer {...elemProps} fixed={fixed}>
-        <ChildrenContainer>{children}</ChildrenContainer>
-      </ActionBarContainer>
-    );
-  }
-}
+export const ActionBar = createComponent('div')({
+  displayName: 'ActionBar',
+  Component: ({position = 'fixed', ...elProps}: ActionBarProps, ref, Element) => (
+    <ResponsiveHStack
+      ref={ref}
+      as={Element}
+      position={position}
+      spacing="s"
+      {...containerStyles}
+      {...elProps}
+    />
+  ),
+});

modules/react/action-bar/spec/ActionBar.spec.tsx

@@ -1,23 +1,5 @@
-import * as React from 'react';
-import {mount} from 'enzyme';
-import ActionBar from '../index';
+import {ActionBar} from '../lib/ActionBar';
 
 describe('ActionBar', () => {
-  const cb = jest.fn();
-  afterEach(() => {
-    cb.mockReset();
-  });
-
-  test('render a action bar with id', () => {
-    const component = mount(<ActionBar id="myActionBar">Button Label</ActionBar>);
-    expect(component.find(ActionBar).props().id).toBe('myActionBar');
-    component.unmount();
-  });
-
-  test('ActionBar should spread extra props', () => {
-    const component = mount(<ActionBar data-propspread="test" />);
-    const container = component.at(0).getDOMNode();
-    expect(container.getAttribute('data-propspread')).toBe('test');
-    component.unmount();
-  });
+  verifyComponent(ActionBar, {});
 });

modules/react/action-bar/stories/ActionBar.stories.mdx

@@ -9,7 +9,7 @@ import {Basic} from './examples/Basic';
 
 # Canvas Kit Action Bar
 
-Full width button toolbar fixed to bottom of screen.
+Action Bar contains primary and secondary actions related to a page or task.
 
 ## Installation
 
@@ -22,38 +22,20 @@ yarn add @workday/canvas-kit-react
 ### Basic Example
 
 Here is a basic example of an `ActionBar` with two buttons. Although not required,
-[buttons](../../button) are often used in in action bars. The primary action button should be left
-aligned followed by secondary buttons. The primary button is on the right only in "progression-based
-UIs" and on mobile devices.
+[buttons](../../button) are often used in in action bars. The primary action button should be used
+only once and left aligned followed by secondary buttons.
 
 <ExampleCodeBlock code={Basic} />
 
-### Fixed
-
-The Action Bar generally lives at the bottom of the viewport. If you would like this behavior
-automatically (using `position: fixed`), you can use the `fixed` prop.
-
-```tsx
-<ActionBar fixed={true}>
-  <PrimaryButton>Button</PrimaryButton>
-  <SecondaryButton>Button</SecondaryButton>
-</ActionBar>
-```
-
 ## Responsive Behavior
 
-At 575px, responsive styles will take effect:
-
-- Applies a flex box to the buttons
-- Makes single-button groups full width
-- All buttons will become the same width (`flex: 1`).
-- Button order will become reversed, making left-aligned primary buttons right-aligned.
+At 768px, responsive styles will take effect:
 
-> When on a mobile form factor, the button placement should flip to have the primary button on the
-> far right.
+- All primary and secondary buttons will become the same width (`flex: 1`).
+- Container Bar padding will be decreased to small (`16px`) for all sides.
 
 ## Props
 
-Undocumented props are spread to the underlying container `<div>` element.
+Undocumented props are spread to the underlying `HBlock` component.
 
 <ArgsTable of={ActionBar} />

modules/react/action-bar/stories/examples/Basic.tsx

@@ -4,8 +4,8 @@ import {ActionBar} from '@workday/canvas-kit-react/action-bar';
 import {PrimaryButton, SecondaryButton} from '@workday/canvas-kit-react/button';
 
 export const Basic = () => (
-  <ActionBar>
-    <PrimaryButton>Button</PrimaryButton>
-    <SecondaryButton>Button</SecondaryButton>
+  <ActionBar position="relative">
+    <PrimaryButton>First Action</PrimaryButton>
+    <SecondaryButton>Second Action</SecondaryButton>
   </ActionBar>
 );