Skip to content
Permalink
Browse files

fix(rich-text-editor): Fixes select dropdown overlapping issue on sma…

…ller 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
  • Loading branch information...
ishakasliwal committed Oct 14, 2017
1 parent fafd882 commit f1a7e8d815fc86712f2c88a9c486a5ff6ba326a4
@@ -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>
));
@@ -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
@@ -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
*
@@ -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',

0 comments on commit f1a7e8d

Please sign in to comment.
You can’t perform that action at this time.