unify intent API, deprecate info

segmentio · Jul 11, 2018 · 938f2e1 · 938f2e1
1 parent 13f1b44
commit 938f2e1
Show file tree

Hide file tree

Showing 19 changed files with 39 additions and 105 deletions.
diff --git a/src/alert/src/Alert.js b/src/alert/src/Alert.js
@@ -25,7 +25,7 @@ class Alert extends PureComponent {
     /**
      * The intent of the alert.
      */
-    intent: PropTypes.oneOf(['none', 'success', 'warning', 'danger', 'info'])
+    intent: PropTypes.oneOf(['none', 'success', 'warning', 'danger'])
       .isRequired,
 
     /**
@@ -115,18 +115,17 @@ class Alert extends PureComponent {
         {...themeProps}
         {...props}
       >
-        {hasIcon &&
-          intent !== 'none' && (
-            <Pane
-              marginRight={10}
-              marginLeft={2}
-              height={14}
-              display="block"
-              marginTop={2}
-            >
-              {this.getIconForIntent(intent)}
-            </Pane>
-          )}
+        {hasIcon && (
+          <Pane
+            marginRight={10}
+            marginLeft={2}
+            height={14}
+            display="block"
+            marginTop={2}
+          >
+            {this.getIconForIntent(intent)}
+          </Pane>
+        )}
         <Pane display="flex" width="100%">
           <Pane flex={1}>
             <Heading

diff --git a/src/alert/src/InlineAlert.js b/src/alert/src/InlineAlert.js
@@ -24,7 +24,7 @@ class InlineAlert extends PureComponent {
     /**
      * The intent of the alert. This should always be set explicitly.
      */
-    intent: PropTypes.oneOf(['none', 'success', 'warning', 'danger', 'info'])
+    intent: PropTypes.oneOf(['none', 'success', 'warning', 'danger'])
       .isRequired,
 
     /**
@@ -61,12 +61,11 @@ class InlineAlert extends PureComponent {
 
     return (
       <Pane alignItems="center" display="flex" {...props}>
-        {hasIcon &&
-          intent !== 'none' && (
-            <Pane display="inline" marginRight={8}>
-              {this.getIconForIntent(intent)}
-            </Pane>
-          )}
+        {hasIcon && (
+          <Pane display="inline" marginRight={8}>
+            {this.getIconForIntent(intent)}
+          </Pane>
+        )}
         <Text size={size} fontWeight={500}>
           {children}
         </Text>

diff --git a/src/alert/stories/index.stories.js b/src/alert/stories/index.stories.js
@@ -38,12 +38,6 @@ storiesOf('alert', module)
               intent="danger"
               title="We weren’t able to save your changes."
             />
-            <Alert
-              appearance={appearance}
-              marginBottom={32}
-              intent="info"
-              title="There are over 180 integrations available."
-            />
           </Box>
         ))}
       </Box>
@@ -86,15 +80,6 @@ storiesOf('alert', module)
               Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
               eiusmod tempor incididunt ut labore et dolore magna aliqua.
             </Alert>
-            <Alert
-              appearance={appearance}
-              marginBottom={32}
-              intent="info"
-              title="There are over 180 integrations available."
-            >
-              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
-              eiusmod tempor incididunt ut labore et dolore magna aliqua.
-            </Alert>
           </Box>
         ))}
       </Box>
@@ -120,7 +105,7 @@ storiesOf('alert', module)
         <InlineAlert intent="danger" marginBottom={16}>
           We weren’t able to save your changes.
         </InlineAlert>
-        <InlineAlert intent="info" marginBottom={16}>
+        <InlineAlert intent="none" marginBottom={16}>
           There are over 200 integrations available.
         </InlineAlert>
       </Box>

diff --git a/src/buttons/src/Button.js b/src/buttons/src/Button.js
@@ -29,6 +29,12 @@ class Button extends PureComponent {
      */
     ...layout.propTypes,
 
+    /**
+     * The intent of the button.
+     */
+    intent: PropTypes.oneOf(['none', 'success', 'warning', 'danger'])
+      .isRequired,
+
     /**
      * The appearance of the button.
      */

diff --git a/src/constants/src/Intent.js b/src/constants/src/Intent.js
@@ -2,6 +2,5 @@ export default {
   NONE: 'none',
   SUCCESS: 'success',
   WARNING: 'warning',
-  DANGER: 'danger',
-  INFO: 'info'
+  DANGER: 'danger'
 }
diff --git a/src/corner-dialog/src/CornerDialog.js b/src/corner-dialog/src/CornerDialog.js
@@ -57,7 +57,7 @@ export default class CornerDialog extends PureComponent {
     /**
      * The intent of the CornerDialog. Used for the button.
      */
-    intent: PropTypes.oneOf(['none', 'success', 'warning', 'danger', 'info'])
+    intent: PropTypes.oneOf(['none', 'success', 'warning', 'danger'])
       .isRequired,
 
     /**

diff --git a/src/dialog/src/Dialog.js b/src/dialog/src/Dialog.js
@@ -60,7 +60,7 @@ class Dialog extends React.Component {
     /**
      * The intent of the Dialog. Used for the button.
      */
-    intent: PropTypes.oneOf(['none', 'success', 'warning', 'danger', 'info'])
+    intent: PropTypes.oneOf(['none', 'success', 'warning', 'danger'])
       .isRequired,
 
     /**

diff --git a/src/menu/src/MenuItem.js b/src/menu/src/MenuItem.js
@@ -35,7 +35,7 @@ class MenuItem extends React.PureComponent {
     /**
      * The intent of the menu item.
      */
-    intent: PropTypes.oneOf(['none', 'success', 'warning', 'danger', 'info'])
+    intent: PropTypes.oneOf(['none', 'success', 'warning', 'danger'])
       .isRequired,
 
     /**

diff --git a/src/table/docs/examples/TableRow.example b/src/table/docs/examples/TableRow.example
@@ -1,5 +1,5 @@
 <div>
-  {['none', 'danger', 'warning', 'info', 'success'].map(intent => {
+  {['none', 'danger', 'warning', 'success'].map(intent => {
     return (
       <Table.Row
         key={intent}

diff --git a/src/table/src/TableRow.js b/src/table/src/TableRow.js
@@ -46,7 +46,7 @@ class TableRow extends PureComponent {
     /**
      * The intent of the alert.
      */
-    intent: PropTypes.oneOf(['none', 'success', 'warning', 'danger', 'info'])
+    intent: PropTypes.oneOf(['none', 'success', 'warning', 'danger'])
       .isRequired,
 
     /**

diff --git a/src/table/stories/index.stories.js b/src/table/stories/index.stories.js
@@ -53,7 +53,7 @@ storiesOf('table', module)
         document.body.style.margin = '0'
         document.body.style.height = '100vh'
       })()}
-      {['none', 'danger', 'warning', 'info', 'success'].map(intent => {
+      {['none', 'danger', 'warning', 'success'].map(intent => {
         return (
           <Table.Row key={intent} isSelectable intent={intent}>
             <Table.TextCell>{intent}</Table.TextCell>

diff --git a/src/theme/src/default-theme/component-specific/getButtonClassName.js b/src/theme/src/default-theme/component-specific/getButtonClassName.js
@@ -51,7 +51,7 @@ const getButtonAppearance = (appearance, intent) => {
       })
     }
     case 'minimal': {
-      const intentTextColor = getTextColorForIntent(intent)
+      const intentTextColor = getTextColorForIntent(intent, scales.blue.B9)
       return Themer.createButtonAppearance({
         disabled,
         base: {

diff --git a/src/theme/src/default-theme/component-specific/getRowClassName.js b/src/theme/src/default-theme/component-specific/getRowClassName.js
@@ -76,32 +76,6 @@ Appearances.warning = Themer.createRowAppearance({
   current: {}
 })
 
-Appearances.info = Themer.createRowAppearance({
-  base: {
-    backgroundColor: palette.blue.lightest
-  },
-
-  hover: {
-    backgroundColor: tinycolor(palette.blue.lightest)
-      .darken(1)
-      .toString()
-  },
-
-  focus: {
-    backgroundColor: tinycolor(palette.blue.lightest)
-      .darken(1.5)
-      .toString()
-  },
-
-  active: {
-    backgroundColor: tinycolor(palette.blue.lightest)
-      .darken(2.5)
-      .toString()
-  },
-
-  current: {}
-})
-
 Appearances.success = Themer.createRowAppearance({
   base: {
     backgroundColor: palette.green.lightest
@@ -140,8 +114,6 @@ const getRowAppearance = (appearance, intent) => {
       return Appearances.danger
     case 'warning':
       return Appearances.warning
-    case 'info':
-      return Appearances.info
     case 'success':
       return Appearances.success
     case 'none':

diff --git a/src/theme/src/default-theme/foundational-styles/colors.js b/src/theme/src/default-theme/foundational-styles/colors.js
@@ -77,13 +77,13 @@ export default {
 
   /**
    * Used for Alerts and other (future) componentes that express intent.
-   * @property {string} intent.info - Required property.
+   * @property {string} intent.none - Required property.
    * @property {string} intent.success - Required property.
    * @property {string} intent.danger - Required property.
    * @property {string} intent.warning - Required property.
    */
   intent: {
-    info: palette.blue.base,
+    none: palette.blue.base,
     success: palette.green.base,
     danger: palette.red.base,
     warning: palette.orange.base

diff --git a/src/theme/src/default-theme/helpers.js b/src/theme/src/default-theme/helpers.js
@@ -15,7 +15,7 @@ const linearGradient = (top, bottom) => {
  * @param {Intent} intent
  * @return {String} color
  */
-const getTextColorForIntent = intent => {
+const getTextColorForIntent = (intent, defaultColor) => {
   switch (intent) {
     case Intent.SUCCESS:
       return colors.text.success
@@ -24,7 +24,7 @@ const getTextColorForIntent = intent => {
     case Intent.WARNING:
       return colors.text.warning
     default:
-      return colors.text.default
+      return defaultColor || colors.text.default
   }
 }
 

diff --git a/src/theme/src/default-theme/theme-helpers/index.js b/src/theme/src/default-theme/theme-helpers/index.js
@@ -111,7 +111,7 @@ const getIconForIntent = intent => {
       return { icon: 'error', color: 'danger' }
     case Intent.WARNING:
       return { icon: 'warning-sign', color: 'warning' }
-    case Intent.INFO:
+    case Intent.NONE:
     default:
       return { icon: 'info-sign', color: 'info' }
   }

diff --git a/src/toaster/src/Toast.js b/src/toaster/src/Toast.js
@@ -69,7 +69,7 @@ export default class Toast extends React.PureComponent {
     /**
      * The type of the alert.
      */
-    intent: PropTypes.oneOf(['none', 'success', 'warning', 'danger', 'info'])
+    intent: PropTypes.oneOf(['none', 'success', 'warning', 'danger'])
       .isRequired,
 
     /**

diff --git a/src/toaster/src/Toaster.js b/src/toaster/src/Toaster.js
@@ -70,8 +70,4 @@ export default class Toaster {
   danger = (title, settings = {}) => {
     return this.notifyHandler(title, { ...settings, intent: 'danger' })
   }
-
-  info = (title, settings = {}) => {
-    return this.notifyHandler(title, { ...settings, intent: 'info' })
-  }
 }
diff --git a/src/toaster/stories/index.stories.js b/src/toaster/stories/index.stories.js
@@ -18,7 +18,6 @@ storiesOf('toaster', module).add('examples', () => (
         <Li>success</Li>
         <Li>warning</Li>
         <Li>danger</Li>
-        <Li>info</Li>
         <Li>
           closeAll — useful for page transitions when you want to close all
           toasts.
@@ -111,27 +110,6 @@ storiesOf('toaster', module).add('examples', () => (
           Danger with Text
         </Button>
       </Box>
-      <Box marginBottom={12}>
-        <Button
-          marginRight={8}
-          onClick={() =>
-            toaster.info('There are over 180 integrations available.')
-          }
-        >
-          Info
-        </Button>
-
-        <Button
-          marginRight={8}
-          onClick={() =>
-            toaster.info('There are over 180 integrations available.', {
-              description: loremIpsum
-            })
-          }
-        >
-          Info with Text
-        </Button>
-      </Box>
     </Box>
   </Box>
 ))