feat(rich-text-input): add expand icon (#1095)

* feat(rich-text-input): add expand icon

* chore: fixup

* chore: fix copy paste

Author: montezume

src/components/inputs/rich-text-input/editor.js

@@ -64,6 +64,8 @@ const Editor = props => {
                 isDisabled={props.isDisabled}
                 hasWarning={props.hasWarning}
                 isReadOnly={props.isReadOnly}
+                showExpandIcon={props.showExpandIcon}
+                onClickExpand={props.onClickExpand}
                 editor={props.editor}
                 containerStyles={containerStyles}
               >
@@ -116,6 +118,8 @@ const renderEditor = (props, editor, next) => {
     isFocused: props.options.isFocused,
     horizontalConstraint: props.options.horizontalConstraint,
     defaultExpandMultilineText: props.options.defaultExpandMultilineText,
+    showExpandIcon: props.options.showExpandIcon,
+    onClickExpand: props.options.onClickExpand,
     hasError: props.options.hasError,
     hasWarning: props.options.hasWarning,
     isReadOnly: props.readOnly,

src/components/inputs/rich-text-input/rich-text-input.js

@@ -84,6 +84,8 @@ class RichTextInput extends React.PureComponent {
           hasWarning: this.props.hasWarning,
           hasError: this.props.hasError,
           placeholder: this.props.placeholder,
+          showExpandIcon: this.props.showExpandIcon,
+          onClickExpand: this.props.onClickExpand,
         }}
         onChange={this.onValueChange}
         plugins={plugins}
@@ -97,6 +99,7 @@ RichTextInput.defaultProps = {
   defaultExpandMultilineText: false,
   horizontalConstraint: 'scale',
   placeholder: '',
+  showExpandIcon: false,
 };
 
 RichTextInput.displayName = 'RichTextInput';
@@ -121,6 +124,8 @@ RichTextInput.propTypes = {
   onFocus: PropTypes.func,
   onBlur: PropTypes.func,
   value: Types.value.isRequired,
+  showExpandIcon: PropTypes.bool.isRequired,
+  onClickExpand: requiredIf(PropTypes.func, props => props.showExpandIcon),
 };
 
 export default RichTextInput;

src/components/inputs/rich-text-input/rich-text-input.story.js

@@ -1,4 +1,6 @@
+/* eslint-disable react/prop-types, react/display-name */
 import React from 'react';
+import { Value } from 'react-value';
 import { storiesOf } from '@storybook/react';
 import { withKnobs, boolean, text } from '@storybook/addon-knobs/react';
 import { action } from '@storybook/addon-actions';
@@ -7,52 +9,70 @@ import Spacings from '../../spacings';
 import Section from '../../../../.storybook/decorators/section';
 import RichTextInput from './rich-text-input';
 import Readme from './README.md';
-import TextInput from '../text-input';
 
 // Create our initial value...
 
 const initialValue = RichTextInput.deserialize('');
+
+const Input = props => {
+  return (
+    <Value
+      defaultValue={initialValue}
+      render={(value, onChange) => (
+        <RichTextInput
+          id={props.id}
+          name={props.name}
+          key={`rich-text-input-${props.defaultExpandMultilineText}`}
+          onChange={event => onChange(event.target.value)}
+          value={value}
+          onBlur={props.onBlur}
+          onFocus={props.onFocus}
+          defaultExpandMultilineText={props.defaultExpandMultilineText}
+          placeholder={props.placeholder}
+          onClickExpand={props.onClickExpand}
+          showExpandIcon={props.showExpandIcon}
+          hasError={props.hasError}
+          hasWarning={props.hasWarning}
+          isDisabled={props.isDisabled}
+          isReadOnly={props.isReadOnly}
+        />
+      )}
+    />
+  );
+};
+
 storiesOf('Components|Inputs', module)
   .addDecorator(withKnobs)
   .addDecorator(withReadme(Readme))
   .add('RichTextInput', () => {
-    const [value, setValue] = React.useState(initialValue);
-
-    const onChange = React.useCallback(event => setValue(event.target.value), [
-      setValue,
-    ]);
-
-    const [textValue, setTextValue] = React.useState('');
+    const onClickExpand = React.useCallback(() => {
+      // eslint-disable-next-line no-alert
+      alert('Expand');
+    }, []);
 
     const onBlur = React.useCallback(action('onBlur'), []);
     const onFocus = React.useCallback(action('onFocus'), []);
 
     return (
       <Section>
         <Spacings.Stack scale="l">
-          <RichTextInput
+          <Input
             id={text('id', 'test-id')}
             name={text('name', 'test-name')}
-            onChange={onChange}
+            onBlur={onBlur}
+            onFocus={onFocus}
             defaultExpandMultilineText={boolean(
               'defaultExpandMultilineText',
               false
             )}
-            value={value}
-            onBlur={onBlur}
-            onFocus={onFocus}
             placeholder={text('placeholder', 'Placeholder')}
+            showExpandIcon={boolean('showExpandIcon', false)}
+            onClickExpand={onClickExpand}
             hasError={boolean('hasError', false)}
             hasWarning={boolean('hasWarning', false)}
             isDisabled={boolean('isDisabled', false)}
             isReadOnly={boolean('isReadOnly', false)}
           />
-          <TextInput
-            id="text-input"
-            name="text-input"
-            onChange={evt => setTextValue(evt.target.value)}
-            value={textValue}
-          />
         </Spacings.Stack>
       </Section>
     );

src/components/inputs/rich-text-input/rich-text-input.visualroute.js

@@ -111,6 +111,15 @@ const DefaultRoute = () => (
         horizontalConstraint="scale"
       />
     </Spec>
+    <Spec label="with expand button" omitPropsList>
+      <RichTextInput
+        onChange={() => {}}
+        value={minimalValue}
+        showExpandIcon={true}
+        onClickExpand={() => {}}
+        horizontalConstraint="scale"
+      />
+    </Spec>
   </Suite>
 );
 

src/components/internals/rich-text-body/icons/index.js

@@ -10,8 +10,10 @@ import OrigSuperscriptIcon from './svg/superscript.react.svg';
 import OrigSubscriptIcon from './svg/subscript.react.svg';
 import OrigRedoIcon from './svg/redo.react.svg';
 import OrigUndoIcon from './svg/undo.react.svg';
+import OrigExpandIcon from './svg/expand.react.svg';
 
 export const BoldIcon = createStyledIcon(OrigBoldIcon, 'BoldIcon');
+export const ExpandIcon = createStyledIcon(OrigExpandIcon, 'ExpandIcon');
 export const ItalicIcon = createStyledIcon(OrigItalicIcon, 'ItalicIcon');
 export const MoreStylesIcon = createStyledIcon(
   OrigMoreStylesIcon,

src/components/internals/rich-text-body/messages.js

@@ -11,6 +11,16 @@ export default defineMessages({
     description: 'Title for the bold tooltip',
     defaultMessage: 'Bold',
   },
+  expandButtonLabel: {
+    id: 'UIKit.RichTextBody.expandButtonLabel',
+    description: 'Label for the expand button',
+    defaultMessage: 'Expand',
+  },
+  expandTooltipTitle: {
+    id: 'UIKit.RichTextBody.expandTooltipTitle',
+    description: 'Title for the expand tooltip',
+    defaultMessage: 'Expand',
+  },
   italicButtonLabel: {
     id: 'UIKit.RichTextBody.italicButtonLabel',
     description: 'Label for the italic button',

src/components/internals/rich-text-body/rich-text-body.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
+import requiredIf from 'react-required-if';
 import { css } from '@emotion/core';
 import Tooltip from '../../tooltip';
 import {
@@ -12,6 +13,7 @@ import {
 } from './rich-text-body.styles';
 import {
   BoldIcon,
+  ExpandIcon,
   ItalicIcon,
   UnorderedListIcon,
   OrderedListIcon,
@@ -316,6 +318,23 @@ const RichTextEditorBody = React.forwardRef((props, ref) => {
               <RedoIcon size="medium" />
             </Button>
           </Tooltip>
+          {props.showExpandIcon && (
+            <React.Fragment>
+              <Divider />
+              <Tooltip
+                title={intl.formatMessage(messages.expandTooltipTitle)}
+                placement="bottom-end"
+              >
+                <Button
+                  isActive={false}
+                  label={intl.formatMessage(messages.expandButtonLabel)}
+                  onClick={props.onClickExpand}
+                >
+                  <ExpandIcon size="medium" />
+                </Button>
+              </Tooltip>
+            </React.Fragment>
+          )}
         </ToolbarRightControls>
       </Toolbar>
       <div style={props.containerStyles}>
@@ -344,6 +363,8 @@ RichTextEditorBody.propTypes = {
   editor: PropTypes.any,
   children: PropTypes.node,
   containerStyles: PropTypes.any,
+  showExpandIcon: PropTypes.bool.isRequired,
+  onClickExpand: requiredIf(PropTypes.func, props => props.showExpandIcon),
 };
 
 export default RichTextEditorBody;