feat(instances): CI - Responsive behavior for tags #1121

packages/instance-steps/src/tags/index.js

@@ -10,7 +10,7 @@ import { reset } from 'redux-form';
 import { destroy } from 'redux-form';
 import get from 'lodash.get';
 import remcalc from 'remcalc';
-import styled from 'styled-components';
+import styled, { withTheme } from 'styled-components';
 
 import Step, {
   Header as StepHeader,
@@ -55,7 +55,8 @@ const Tag = ({ name, value, onRemoveClick }) => (
   </Margin>
 );
 
-const TagsContainer = ({
+const TagsContainer = withTheme(
+  ({
     handleValidate,
     handleGetValue,
     preview = [],
@@ -67,8 +68,11 @@ const TagsContainer = ({
     handleChangeAddOpen,
     handleRemoveTag,
     handleCancelEdit,
+    theme = {},
     ...props
-}) => (
+  }) => {
+    const mobile = theme.screen === 'mobile';
+    return (
       <Step name="tags" getValue={handleGetValue} {...props}>
         <StepHeader icon={<TagsIcon />}>Tags</StepHeader>
         <StepDescription href="https://docs.joyent.com/public-cloud/tags-metadata/tags">
@@ -133,14 +137,15 @@ const TagsContainer = ({
                 </Fragment>
               ) : (
                 <Margin top="5">
-              <Flex>
+                  <Flex column={mobile}>
                     <FlexItem>
-                  <Margin right="1">
+                      <Margin right={mobile ? '0' : '1'}>
                         <Button
                           id="add-tag-button"
                           type="button"
                           onClick={() => handleChangeAddOpen(true)}
                           secondary
+                          fluid={mobile}
                         >
                           Add Tag
                         </Button>
@@ -152,6 +157,7 @@ const TagsContainer = ({
                         type="button"
                         component={Link}
                         to={next}
+                        fluid={mobile}
                       >
                         Next
                       </Button>
@@ -163,6 +169,8 @@ const TagsContainer = ({
           )}
         </StepOutlet>
       </Step>
+    );
+  }
 );
 
 export default compose(

packages/resource-widgets/src/key-value/index.js

@@ -1,7 +1,7 @@
 import React, { Fragment } from 'react';
 import { Margin, Padding } from 'styled-components-spacing';
 import PropTypes from 'prop-types';
-import styled from 'styled-components';
+import styled, { withTheme } from 'styled-components';
 import { Row, Col as BaseCol } from 'joyent-react-styled-flexboxgrid';
 import { Field } from 'redux-form';
 import remcalc from 'remcalc';
@@ -198,7 +198,8 @@ const InputKeyValue = ({
   </Flex>
 );
 
-export const KeyValue = ({
+export const KeyValue = withTheme(
+  ({
     id = null,
     disabled = false,
     input = 'input',
@@ -223,8 +224,9 @@ export const KeyValue = ({
     shadow = true,
     customHeader,
     headless = false,
-  noActions = false
+    noActions = false,
-}) => {
+    theme = {}
+  }) => {
     const handleHeaderClick = method === 'edit' && onToggleExpanded;
     const mobile = theme.screen === 'mobile';
 
@@ -346,25 +348,6 @@ export const KeyValue = ({
                       <span>{method === 'add' ? 'Create' : 'Save'}</span>
                     </Button>
                   </Col>
-                {!noRemove && (
-                  <Col xs={method === 'add' ? false : '5'}>
-                    <Button
-                      type="button"
-                      onClick={onCancel}
-                      disabled={disabled || submitting}
-                      secondary
-                    >
-                      <span>Cancel</span>
-                    </MarginalButton>
-                    <Button
-                      id={id ? 'kv-submit-button-' + id : null}
-                      type="submit"
-                      disabled={pristine || invalid}
-                      loading={submitting && !removing}
-                    >
-                      <span>{method === 'add' ? 'Create' : 'Save'}</span>
-                    </Button>
-                  </Col>
                   {!noRemove && (
                     <Col xs={method === 'add' ? false : '5'}>
                       <Button
@@ -378,7 +361,7 @@ export const KeyValue = ({
                         error
                         id={id ? 'kv-remove-button-' + id : null}
                       >
-                        <Margin right="2">
+                        <Margin right={2}>
                           <DeleteIcon
                             disabled={disabled || submitting}
                             fill={disabled || submitting ? undefined : 'red'}
@@ -396,7 +379,8 @@ export const KeyValue = ({
         ) : null}
       </Card>
     );
-};
+  }
+);
 
 KeyValue.propTypes = {
   input: PropTypes.oneOf(['input', 'textarea']).isRequired,