♻️ Rename outline prop to bordered to avoid namespace collisiion with…

… css outline

src/Alert.jsx

@@ -31,9 +31,9 @@ Alert.displayName = 'Alert';
 
 Alert.propTypes = {
   as: PropTypes.string,
+  bordered: PropTypes.bool,
   children: PropTypes.node.isRequired,
   dark: PropTypes.bool,
-  outline: PropTypes.bool,
   /** button size */
   size: sizesAllPropTypes,
   /** button variant */
@@ -42,7 +42,8 @@ Alert.propTypes = {
 };
 
 Alert.defaultProps = {
-  outline: false,
+  bordered: false,
+  dark: false,
   size: 'md',
   variant: 'primary',
 };

src/Badge.jsx

@@ -30,14 +30,18 @@ Badge.propTypes = {
   as: PropTypes.string,
   children: PropTypes.node.isRequired,
   dark: PropTypes.bool,
-  outline: PropTypes.bool,
+  bordered: PropTypes.bool,
   size: sizesAllPropTypes,
   variant: variantPropTypes,
   ...basePropTypes,
 };
 
 Badge.defaultProps = {
   as: 'span',
+  dark: false,
+  bordered: false,
+  size: 'md',
+  variant: 'primary',
 };
 
 export default Badge;

src/Button.jsx

@@ -14,7 +14,7 @@ import Badge from './Badge';
 import Box, { basePropTypes } from './Box';
 
 const styles = (props: Object): string => {
-  const { animate, borderRadius: br, fontSize, lineHeight: lh, outline, size } = props;
+  const { animate, borderRadius: br, fontSize, lineHeight: lh, bordered, size } = props;
   const { borderRadius, lineHeight, loader, padding } = getTheme(props, 'button');
   const fontSizeProp = getTheme(props, 'componentSizes', { key: 'size' });
 
@@ -32,7 +32,7 @@ const styles = (props: Object): string => {
     padding: ${px(padding[size][0])} ${px(padding[size][1])};
     text-decoration: none;
     width: ${({ block }) => (block ? '100%' : 'auto')};
-    ${animate ? loader(outline ? '#ccc' : '#fff') : ''};
+    ${animate ? loader(bordered ? '#ccc' : '#fff') : ''};
   `;
 };
 
@@ -58,23 +58,25 @@ Button.propTypes = {
   animate: PropTypes.bool,
   as: PropTypes.string,
   block: PropTypes.bool,
+  bordered: PropTypes.bool,
   children: PropTypes.node.isRequired,
   dark: PropTypes.bool,
   disabled: PropTypes.bool,
   onClick: PropTypes.func,
-  outline: PropTypes.bool,
   size: sizesAllPropTypes,
   type: buttonPropTypes,
   variant: variantPropTypes,
   ...basePropTypes,
+  ...outlines.propTypes,
 };
 
 Button.defaultProps = {
   animate: false,
   as: 'button',
   block: false,
+  bordered: false,
+  dark: false,
   disabled: false,
-  outline: false,
   size: 'md',
   type: 'button',
   variant: 'primary',

src/utils/system.js

@@ -82,25 +82,25 @@ export const baseStyles = {
     `;
   },
   variant: (props: Object): string => {
-    const { dark, outline } = props;
+    const { dark, bordered } = props;
     const { colors, darkColor } = getTheme(props);
     const themeColor = getColor(props);
 
-    const backgroundColor = outline ? colors.white : themeColor;
+    const backgroundColor = bordered ? colors.white : themeColor;
     const baseColor = getYiq(themeColor) > 180 ? colors.black : colors.white;
-    let currentColor = outline ? themeColor : baseColor;
+    let currentColor = bordered ? themeColor : baseColor;
 
     if (dark) {
       const colorDiff = Math.abs(getYiq(darkColor) - getYiq(themeColor));
       currentColor = colorDiff > 40 ? themeColor : lighten(0.3, themeColor);
-    } else if (outline) {
+    } else if (bordered) {
       const colorDiff = Math.abs(getYiq(backgroundColor) - getYiq(themeColor));
       currentColor = colorDiff > 50 ? themeColor : darken(0.2, themeColor);
     }
 
     return css`
       background-color: ${dark ? darkColor : backgroundColor};
-      border: 1px solid ${dark && !outline ? darkColor : themeColor};
+      border: 1px solid ${dark && !bordered ? darkColor : themeColor};
       color: ${currentColor};
     `;
   },
@@ -181,7 +181,7 @@ export const formPseudo = (props: Object): string => {
     ${disabled};
 
     &:focus {
-      outline-color: ${bordered ? currentBorderColor : outlineColor || currentBgColor};
+      outline-color: ${outlineColor || (bordered ? currentBorderColor : currentBgColor)};
       ${outline ? `outline: ${outline}` : null};
       ${outlineOffset ? `outline-offset: ${px(outlineOffset)}` : null};
       ${outlineStyle ? `outline-style: ${outlineStyle}` : null};

stories/Alert.stories.js

@@ -18,7 +18,7 @@ storiesOf('Alert', module)
       <Alert
         alignHorizontal={select('Align Horizontal', ['left', 'center', 'right'], 'left')}
         dark={boolean('Dark', false)}
-        outline={boolean('Outline', false)}
+        bordered={boolean('Bordered', false)}
         size={select('Size', sizesOptions, 'md')}
         variant={select('Variant', variantOptions, 'primary')}
       >
@@ -32,8 +32,6 @@ storiesOf('Alert', module)
   .add('with child components', () => (
     <ViewCheckbox>
       <Alert
-        alignHorizontal={select('Align Horizontal', ['left', 'center', 'right'], 'left')}
-        outline={boolean('Outline', false)}
         size={select('Size', sizesOptions, 'md')}
         variant={select('Variant', variantOptions, 'primary')}
       >
@@ -87,7 +85,6 @@ storiesOf('Alert', module)
   .add('with outline', () => (
     <ViewCheckbox>
       {variantOptions.map((d, i) => (
-        <Alert key={i} outline variant={d}>
           <Heading as="h4">{capitalize(d)}</Heading>
           <Paragraph>
             Far far away, behind the word mountains, far from the countries Vokalia and Consonantia,

stories/Badge.stories.js

@@ -16,7 +16,8 @@ storiesOf('Badge', module)
   .add('default', () => (
     <ViewCheckbox>
       <Badge
-        outline={boolean('Outline', false)}
+        bordered={boolean('Bordered', false)}
+        dark={boolean('Dark', false)}
         size={select('Size', sizesOptions, 'md')}
         variant={select('Variant', variantOptions, 'primary')}
       >
@@ -96,8 +97,9 @@ storiesOf('Badge', module)
   ))
   .add('with outline', () => (
     <ViewCheckbox>
+  .add('with border', () => (
       {variantOptions.map((d, i) => (
-        <Badge key={i} outline variant={d}>
+        <Badge key={i} bordered variant={d}>
           {capitalize(d)}
         </Badge>
       ))}

stories/Button.stories.js

@@ -18,10 +18,10 @@ storiesOf('Button', module)
       <Button
         animate={boolean('Animate', false)}
         block={boolean('Block', false)}
+        bordered={boolean('Border', false)}
         disabled={boolean('Disabled', false)}
         dark={boolean('Dark', false)}
         onClick={action('clicked')}
-        outline={boolean('Outline', false)}
         size={select('Size', sizesOptions, 'md')}
         variant={select('Variant', variantOptions, 'primary')}
       >
@@ -74,13 +74,12 @@ storiesOf('Button', module)
   .add('with outline', () => (
     <ViewCheckbox>
       {variantOptions.map((d, i) => (
-        <Button
           key={i}
-          disabled={boolean('Disabled', false)}
           onClick={action('clicked')}
           outline
           variant={d}
         >
+        <Button key={i} bordered onClick={action('clicked')} variant={d}>
           {capitalize(d)}
         </Button>
       ))}

test/ButtonGroup.spec.js

@@ -7,10 +7,10 @@ import ButtonGroup from '../src/ButtonGroup';
 describe('ButtonGroup', () => {
   const wrapper = mount(
     <ButtonGroup size="sm" variant="indigo">
-      <Button outline>First</Button>
+      <Button bordered>First</Button>
       <Button>Second</Button>
-      <Button outline>Third</Button>
-      <Button outline>Forth</Button>
+      <Button bordered>Third</Button>
+      <Button bordered>Forth</Button>
     </ButtonGroup>,
   );
 

test/__snapshots__/Alert.spec.js.snap

@@ -19,7 +19,8 @@ exports[`Alert should render properly 1`] = `
 }
 
 <Alert
-  outline={false}
+  bordered={false}
+  dark={false}
   size="md"
   variant="primary"
 >

test/__snapshots__/Badge.spec.js.snap

@@ -12,6 +12,7 @@ exports[`Badge should render properly 1`] = `
   display: -ms-inline-flexbox;
   display: inline-flex;
   font-size: 75%;
+  font-size: 16px;
   font-weight: 700;
   line-height: 1;
   padding: 3px 6px;
@@ -20,9 +21,14 @@ exports[`Badge should render properly 1`] = `
 
 <Badge
   as="span"
+  bordered={false}
+  dark={false}
+  size="md"
+  variant="primary"
 >
   <span
     className="c0"
+    size="md"
   >
     4
   </span>

test/__snapshots__/Button.spec.js.snap

@@ -47,8 +47,9 @@ exports[`Button should render properly 1`] = `
   animate={false}
   as="button"
   block={false}
+  bordered={false}
+  dark={false}
   disabled={false}
-  outline={false}
   size="md"
   type="button"
   variant="primary"

test/__snapshots__/ButtonGroup.spec.js.snap

@@ -119,9 +119,10 @@ exports[`ButtonGroup should render properly 1`] = `
       animate={false}
       as="button"
       block={false}
+      bordered={true}
+      dark={false}
       disabled={false}
       key=".0"
-      outline={true}
       size="sm"
       type="button"
       variant="indigo"
@@ -139,9 +140,10 @@ exports[`ButtonGroup should render properly 1`] = `
       animate={false}
       as="button"
       block={false}
+      bordered={false}
+      dark={false}
       disabled={false}
       key=".1"
-      outline={false}
       size="sm"
       type="button"
       variant="indigo"
@@ -159,9 +161,10 @@ exports[`ButtonGroup should render properly 1`] = `
       animate={false}
       as="button"
       block={false}
+      bordered={true}
+      dark={false}
       disabled={false}
       key=".2"
-      outline={true}
       size="sm"
       type="button"
       variant="indigo"
@@ -179,9 +182,10 @@ exports[`ButtonGroup should render properly 1`] = `
       animate={false}
       as="button"
       block={false}
+      bordered={true}
+      dark={false}
       disabled={false}
       key=".3"
-      outline={true}
       size="sm"
       type="button"
       variant="indigo"