fix(rich-text-editor): Fixes select dropdown overlapping issue on smaller screen sizes (#2812)

fix(rich-text-editor): Added docs

fix(rich-text-editor): Changed css that targeted value attributes to apply styles via class names

fix(rich-text-editor): changed class names to be more sematic

fix(rich-text-editor): added bottom margin to font class to even out toolbar spacing

fix(rich-text-editor): Scoped a combobox max-width to a slds-region_narrow class

fix(rich-text-editor): Added snapshot test for toolbar narrow

fix(rich-text-editor): Removed unnecessary CSS and updated docs

fix(rich-text-editor): fixed docs typo + fixed issue where RTE shows no vertical space between selects and next row

fix(rich-text-editor): Updated annotations for narrow class

fix(rich-text-editor): Updated css to add margin bottom on narrow region to slds-grid

fix(rich-text-editor): added a class to apply spacing to

fix(rich-text-editor): Updated markup

Author: ishakasliwal

ui/components/rich-text-editor/__tests__/index.spec.js

@@ -0,0 +1,39 @@
+// Copyright (c) 2015-present, salesforce.com, inc. All rights reserved
+// Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license
+/* eslint-env jest */
+
+import React from 'react';
+import createHelpers from '../../../../jest.setup';
+import {
+  RichTextEditor,
+  RteToolbar,
+  RteFormatFont,
+  RteFormatText,
+  RteFormatColor,
+  RteFormatBody,
+  RteAlignText,
+  RteInsertContent,
+  RteClearFormatting,
+  RteTextarea
+} from '../base/example';
+
+const { matchesMarkupAndStyle } = createHelpers(__dirname);
+
+it('renders an RTE toolbar in a narrow space', () =>
+  matchesMarkupAndStyle(
+    <div className="slds-region_narrow">
+      <RichTextEditor>
+        <RteToolbar>
+          <RteFormatFont />
+          <RteFormatText tabIndexSetting="-1" />
+          <RteFormatColor />
+          <RteFormatBody />
+          <RteAlignText />
+          <RteInsertContent />
+          <RteClearFormatting />
+        </RteToolbar>
+
+        <RteTextarea placeholder="Compose Email..." />
+      </RichTextEditor>
+    </div>
+  ));

ui/components/rich-text-editor/_doc.scss

@@ -8,6 +8,11 @@
  * The “clear formatting” button always stays at the end of the buttons set,
  * regardless of which rich text editor variant is used. It should always stand by itself.
  *
+ * On smaller screen sizes, the select dropdowns for Font and Size in the toolbar can overlap
+ * outside of the container. To adjust the widths of the dropdowns, apply the class
+ * `slds-region_narrow` to the outermost `div` of the rich text editor.
+ *
+ *
  * #### Accessibility
  *
  * Ensure that there is a single tab key stop for the button groups in the

ui/components/rich-text-editor/base/_index.scss

@@ -66,6 +66,18 @@
   margin-right: $spacing-xx-small;
 }
 
+// This class should be placed on a containing div when RTE toolbar is in a small space
+.slds-region_narrow {
+
+  .slds-combobox {
+    max-width: 11rem;
+  }
+
+  .slds-rich-text-editor__spacing-wrapper {
+    margin-bottom: $spacing-xx-small;
+  }
+}
+
 /**
  * Focus state for rich text editor
  *

ui/components/rich-text-editor/base/example.jsx

@@ -25,7 +25,11 @@ const listboxOptionId04 = 'listbox-option-unique-id-04';
 /// ////////////////////////////////////////
 
 export let Demo = props => (
-  <div className="demo-only" style={{ minHeight: '180px' }}>
+  <div
+    className={classNames('demo-only', props.className)}
+    style={{ minHeight: '180px' }}
+    {...props}
+  >
     {props.children}
   </div>
 );
@@ -99,7 +103,7 @@ const FontSizeDropdown = props => (
 
 export let RteFormatFont = props => (
   <div
-    className="slds-grid"
+    className="slds-grid slds-rich-text-editor__spacing-wrapper"
     role="group"
     aria-label="Format font family &amp; size"
   >
@@ -654,6 +658,27 @@ export let examples = [
       </Demo>
     )
   },
+  {
+    id: 'toolbar-narrow',
+    label: 'Toolbar Narrow',
+    element: (
+      <Demo style={{ width: '294px' }} className="slds-region_narrow">
+        <RichTextEditor>
+          <RteToolbar>
+            <RteFormatFont />
+            <RteFormatText tabIndexSetting="-1" />
+            <RteFormatColor />
+            <RteFormatBody />
+            <RteAlignText />
+            <RteInsertContent />
+            <RteClearFormatting />
+          </RteToolbar>
+
+          <RteTextarea placeholder="Compose Email..." />
+        </RichTextEditor>
+      </Demo>
+    )
+  },
   {
     id: 'feed',
     label: 'Feed',