ref(ui): Minor cleanup to ClippedBox (#12574)

src/sentry/static/sentry/app/components/clippedBox.jsx

@@ -1,14 +1,16 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import ReactDOM from 'react-dom';
+import classnames from 'classnames';
+
 import {t} from 'app/locale';
+import Button from 'app/components/button';
 
 class ClippedBox extends React.Component {
   static propTypes = {
     title: PropTypes.string,
     defaultClipped: PropTypes.bool,
     clipHeight: PropTypes.number,
-    btnClassName: PropTypes.string,
     btnText: PropTypes.string,
   };
 
@@ -16,7 +18,6 @@ class ClippedBox extends React.Component {
     defaultClipped: false,
     clipHeight: 200,
     renderedHeight: null,
-    btnClassName: 'btn btn-primary btn-xs show-more',
     btnText: t('Show More'),
   };
 
@@ -51,13 +52,10 @@ class ClippedBox extends React.Component {
   };
 
   render() {
-    let className = 'box-clippable';
-    if (this.state.clipped) {
-      className += ' clipped';
-    }
-    if (this.state.revealed) {
-      className += ' revealed';
-    }
+    const className = classnames('box-clippable', {
+      clipped: this.state.clipped,
+      revealed: this.state.revealed,
+    });
 
     return (
       <div
@@ -69,9 +67,9 @@ class ClippedBox extends React.Component {
 
         {this.state.clipped && (
           <div className="clip-fade">
-            <a onClick={this.reveal} className={this.props.btnClassName}>
+            <Button onClick={this.reveal} priority="primary" size="xsmall">
               {this.props.btnText}
-            </a>
+            </Button>
           </div>
         )}
       </div>

src/sentry/static/sentry/app/views/settings/project/projectKeys/index.jsx

@@ -164,12 +164,7 @@ const KeyRow = createReactClass({
           </Flex>
         </PanelHeader>
 
-        <ClippedBox
-          clipHeight={300}
-          defaultClipped={true}
-          btnClassName="btn btn-default btn-sm"
-          btnText={t('Expand')}
-        >
+        <ClippedBox clipHeight={300} defaultClipped={true} btnText={t('Expand')}>
           <PanelBody>
             <ProjectKeyCredentials projectId={`${data.projectId}`} data={data} />
           </PanelBody>

src/sentry/static/sentry/less/shared-components.less

@@ -1282,11 +1282,11 @@ ul.faces {
     position: absolute;
     left: 0;
     right: 0;
-    bottom: -15px;
+    bottom: 0;
     padding: 40px 0 0;
     #gradient > .vertical(rgba(255,255,255, 0.15), rgba(255,255,255, 1));
     text-align: center;
-    border-bottom: 15px solid #fff;
+    border-bottom: 10px solid #fff;
   }
 
   &.clipped {

tests/js/spec/views/projectKeys.spec.jsx

@@ -59,9 +59,9 @@ describe('ProjectKeys', function() {
   });
 
   it('has clippable box', function() {
-    expect(wrapper.find('.clip-fade .btn')).toHaveLength(1);
-    wrapper.find('.clip-fade .btn').simulate('click');
-    expect(wrapper.find('.clip-fade .btn')).toHaveLength(0);
+    expect(wrapper.find('.clip-fade Button')).toHaveLength(1);
+    wrapper.find('.clip-fade Button').simulate('click');
+    expect(wrapper.find('.clip-fade Button')).toHaveLength(0);
   });
 
   it('deletes key', function() {