Repository: uber-web/baseui
Pull request #263 (2018-09-17 19:47:53)

chore(modal): use new button component
Switch `ModalButton` to use new `Button` component now that it exists.

baseui-probot-app-workflow[bot]: Found TODOs without GitHub issues:
https://github.com/uber-web/baseui/blob/ad2854a3a8d0ef6dd557ca5075a883f4d7d32367/src/modal/styled-components.js#L60
schnerd: @nadiia good catch, just updated the base branch.

Patch:
diff --git a/src/modal/index.js b/src/modal/index.js
index da8a2c0fa..3f331d202 100644
--- a/src/modal/index.js
+++ b/src/modal/index.js
@@ -6,6 +6,7 @@ LICENSE file in the root directory of this source tree.
 */
 // @flow
 export {default as Modal} from './modal';
+export {default as ModalButton} from './modal-button';
 export {SIZE, ROLE, CLOSE_SOURCE} from './constants';
 export {
   Root as StyledRoot,
@@ -16,6 +17,5 @@ export {
   ModalHeader,
   ModalBody,
   ModalFooter,
-  ModalButton,
 } from './styled-components';
 export * from './types';
diff --git a/src/modal/modal-button.js b/src/modal/modal-button.js
new file mode 100644
index 000000000..64b24fe56
--- /dev/null
+++ b/src/modal/modal-button.js
@@ -0,0 +1,35 @@
+/*
+Copyright (c) 2018 Uber Technologies, Inc.
+
+This source code is licensed under the MIT license found in the
+LICENSE file in the root directory of this source tree.
+*/
+// @flow
+import * as React from 'react';
+import {Button} from '../button';
+import type {ButtonPropsT} from '../button/types';
+import {mergeOverrides} from '../helpers/overrides';
+
+// ModalButtons should have some margin pre-applied
+const overrides = {
+  BaseButton: {
+    style: ({$theme}) => ({
+      marginLeft: $theme.sizing.scale500,
+    }),
+  },
+};
+
+export default class ModalButton extends React.Component<ButtonPropsT> {
+  static defaultProps = Button.defaultProps;
+
+  render() {
+    return (
+      <Button
+        {...this.props}
+        overrides={mergeOverrides(overrides, this.props.overrides)}
+      >
+        {this.props.children}
+      </Button>
+    );
+  }
+}
diff --git a/src/modal/styled-components.js b/src/modal/styled-components.js
index d36df31c6..1173ce2f1 100644
--- a/src/modal/styled-components.js
+++ b/src/modal/styled-components.js
@@ -8,7 +8,6 @@ LICENSE file in the root directory of this source tree.
 import {styled} from '../styles';
 import {SIZE, SIZE_WIDTHS} from './constants';
 import type {SharedStylePropsT, SizePropT, StyledComponentPropT} from './types';
-import type {ThemeT} from '../styles/types';
 
 function getSizeStyles($size: SizePropT) {
   const styles: {
@@ -58,7 +57,6 @@ export const Backdrop = styled('div', (props: SharedStylePropsT) => {
     bottom: 0,
     top: 0,
     left: 0,
-    // TODO There's no overlay in theme that matches the designs
     backgroundColor: 'rgba(0, 0, 0, 0.5)',
     // Remove grey highlight
     WebkitTapHighlightColor: 'transparent',
@@ -180,33 +178,3 @@ export const ModalFooter = styled('div', ({$theme}: StyledComponentPropT) => ({
   borderTopStyle: 'solid',
   borderTopColor: $theme.colors.mono400,
 }));
-
-// TODO replace this with real button soon
-export const ModalButton = styled(
-  'button',
-  ({$theme, disabled}: {$theme: ThemeT, disabled?: boolean}) => ({
-    padding: `${$theme.sizing.scale300} ${$theme.sizing.scale500}`,
-    marginLeft: $theme.sizing.scale500,
-    fontSize: '14px',
-    fontWeight: 'bold',
-    backgroundColor: $theme.colors.buttonPrimaryFill,
-    opacity: disabled ? 0.3 : 1,
-    borderRadius: $theme.borders.useRoundedCorners
-      ? $theme.borders.radius200
-      : '0px',
-    border: 'none',
-    color: '#fff',
-    cursor: disabled ? 'not-allowed' : 'pointer',
-    transitionProperty: 'background-color',
-    transitionDuration: '0.2s',
-    ':hover': {
-      backgroundColor: $theme.colors.buttonPrimaryHover,
-    },
-    ':focus': {
-      backgroundColor: $theme.colors.buttonPrimaryHover,
-    },
-    ':active': {
-      backgroundColor: $theme.colors.buttonPrimaryActive,
-    },
-  }),
-);


Test patch:
diff --git a/src/modal/__tests__/modal-button.test.js b/src/modal/__tests__/modal-button.test.js
new file mode 100644
index 000000000..1e3e81a00
--- /dev/null
+++ b/src/modal/__tests__/modal-button.test.js
@@ -0,0 +1,39 @@
+/*
+Copyright (c) 2018 Uber Technologies, Inc.
+
+This source code is licensed under the MIT license found in the
+LICENSE file in the root directory of this source tree.
+*/
+// @flow
+/* eslint-env browser */
+
+import React from 'react';
+import {shallow} from 'enzyme';
+import {ModalButton} from '../index';
+import {Button, KIND} from '../../button';
+import {LightTheme} from '../../themes';
+import createMockTheme from '../../test/create-mock-theme';
+
+const mockTheme = createMockTheme(LightTheme);
+
+describe('ModalButton', () => {
+  test('renders modal button with correct styles', () => {
+    const overrides = {BaseButton: {style: {color: 'red'}}};
+    const wrapper = shallow(
+      <ModalButton kind={KIND.tertiary} overrides={overrides}>
+        Hello World
+      </ModalButton>,
+    );
+
+    const button = wrapper.find(Button);
+    expect(button).toExist();
+    expect(button).toHaveProp('kind', KIND.tertiary);
+
+    const mergedOverrides = button.prop('overrides');
+    const result = mergedOverrides.BaseButton.style({$theme: mockTheme});
+    expect(result).toEqual({
+      color: 'red',
+      marginLeft: '$theme.sizing.scale500',
+    });
+  });
+});