Adding more props to EuiHeaderSectionItemButton, EuiFieldSearch, and EuiAccordion

CHANGELOG.md

@@ -5,13 +5,17 @@
 - Added default prompt text to `aria-describedby` for `EuiFilePicker` ([#2919](https:/elastic/eui/pull/2919))
 - Added SASS variables for text variants of the primary palette `$euiColorPrimaryText`, `$euiColorSecondaryText`, etc... Updated components to use these new variables. ([#2873](https:/elastic/eui/pull/2873))
 - Updated SASS mixin `makeHighContrastColor()` to default `$background: $euiPageBackgroundColor` and `$ratio: 4.5`. Created `makeGraphicContrastColor()` for graphic specific contrast levels of 3.0. ([#2873](https:/elastic/eui/pull/2873))
+- Added `arrowDisplay` prop to `EuiAccordion` for changing side or hiding completely ([#2914](https:/elastic/eui/pull/2914))
+- Added `prepend` and `append` ability to `EuiFieldSearch` ([#2914](https:/elastic/eui/pull/2914))
+- Added `notification` and `notificationColor` props to `EuiHeaderSectionItemButton` ([#2914](https:/elastic/eui/pull/2914))
 - Added `folderCheck`, `folderExclamation`, `push`, `quote`, `reporter` and `users` icons ([#2935](https:/elastic/eui/pull/2935))
 - Updated `folderClosed` and `folderOpen` to match new additions and sit better on the pixel grid ([#2935](https:/elastic/eui/pull/2935))
 
 **Bug fixes**
 
 - Fixed `EuiTitle` not rendering child classes ([#2926](https:/elastic/eui/pull/2926))
 - Added TypeScript definition for `EuiCodeEditor`'s accepting `react-ace` props ([#2926](https:/elastic/eui/pull/2926))
+- Extended `div` element in `EuiFlyout` type ([#2914](https:/elastic/eui/pull/2914))
 
 **Theme: Amsterdam**
 

src-docs/src/views/accordion/accordion_arrow.js

@@ -0,0 +1,50 @@
+import React from 'react';
+
+import {
+ EuiAccordion,
+ EuiText,
+ EuiCode,
+ EuiSpacer,
+} from '../../../../src/components';
+
+export default () => (
+ <div>
+ <EuiAccordion
+ id="accordion10"
+ buttonContent="Arrows default to the left"
+ paddingSize="s">
+ <EuiText>
+ <p>
+ Any content inside of <EuiCode>EuiAccordion</EuiCode> will appear
+ here.
+ </p>
+ </EuiText>
+ </EuiAccordion>
+ <EuiSpacer />
+ <EuiAccordion
+ id="accordion11"
+ arrowDisplay="right"
+ buttonContent="This one has it on the right"
+ paddingSize="s">
+ <EuiText>
+ <p>
+ Any content inside of <EuiCode>EuiAccordion</EuiCode> will appear
+ here.
+ </p>
+ </EuiText>
+ </EuiAccordion>
+ <EuiSpacer />
+ <EuiAccordion
+ id="accordion12"
+ arrowDisplay="none"
+ buttonContent="This one has it removed entirely"
+ paddingSize="s">
+ <EuiText>
+ <p>
+ Any content inside of <EuiCode>EuiAccordion</EuiCode> will appear
+ here.
+ </p>
+ </EuiText>
+ </EuiAccordion>
+ </div>
+);

src-docs/src/views/accordion/accordion_example.js

@@ -22,6 +22,18 @@ const accordionSnippet = `<EuiAccordion
 </EuiAccordion>
 `;
 
+import AccordionArrow from './accordion_arrow';
+const accordionArrowSource = require('!!raw-loader!./accordion_arrow');
+const accordionArrowHtml = renderToHtml(AccordionArrow);
+const accordionArrowSnippet = `<EuiAccordion
+ id={accordionId}
+ buttonContent="Clickable title"
+ arrowDisplay="right"
+ >
+ <!-- Content to show when expanded -->
+</EuiAccordion>
+`;
+
 import AccordionMultiple from './accordion_multiple';
 const accordionMultipleSource = require('!!raw-loader!./accordion_multiple');
 const accordionMultipleHtml = renderToHtml(AccordionMultiple);
@@ -142,6 +154,32 @@ export const AccordionExample = {
  snippet: accordionSnippet,
  demo: <Accordion />,
  },
+ {
+ title: 'Arrow display',
+ source: [
+ {
+ type: GuideSectionTypes.JS,
+ code: accordionArrowSource,
+ },
+ {
+ type: GuideSectionTypes.HTML,
+ code: accordionArrowHtml,
+ },
+ ],
+ text: (
+ <div>
+ <p>
+ The arrow helps indicate the current state of the accordion (open or
+ not) and points to the main triggering button text. If you must hide
+ or change the side in which the arrow appears, use{' '}
+ <EuiCode>arrowDisplay: &apos;right&apos;</EuiCode> or{' '}
+ <EuiCode>&apos;none&apos;</EuiCode>
+ </p>
+ </div>
+ ),
+ snippet: accordionArrowSnippet,
+ demo: <AccordionArrow />,
+ },
  {
  title: 'Multiple accordions',
  source: [

src-docs/src/views/form_controls/display_toggles.js

@@ -84,7 +84,11 @@ export class DisplayToggles extends Component {
  </EuiButtonEmpty>
  }>
  <div>
- <EuiFlexGroup wrap={true} direction="column" gutterSize="s">
+ <EuiFlexGroup
+ wrap={true}
+ direction="column"
+ gutterSize="s"
+ responsive={false}>
  {(canDisabled || canIsDisabled) && (
  <EuiFlexItem grow={false}>
  <EuiSwitch

src-docs/src/views/form_controls/field_search.js

@@ -23,6 +23,8 @@ export default class extends Component {
  return (
  /* DisplayToggles wrapper for Docs only */
  <DisplayToggles
+ canPrepend
+ canAppend
  extras={[
  <EuiSwitch
  compressed

src-docs/src/views/header/header_app_menu.js

@@ -35,7 +35,8 @@ export default class extends Component {
  aria-controls="keyPadMenu"
  aria-expanded={this.state.isOpen}
  aria-haspopup="true"
- aria-label="Apps menu"
+ aria-label="Apps menu with 1 new app"
+ notification="1"
  onClick={this.onMenuButtonClick}>
  <EuiIcon type="apps" size="m" />
  </EuiHeaderSectionItemButton>
@@ -74,7 +75,7 @@ export default class extends Component {
  <EuiIcon type="visualizeApp" size="l" />
  </EuiKeyPadMenuItem>
 
- <EuiKeyPadMenuItem label="Timelion" href="#">
+ <EuiKeyPadMenuItem label="Timelion" href="#" betaBadgeLabel="Beta">
  <EuiIcon type="timelionApp" size="l" />
  </EuiKeyPadMenuItem>
  </EuiKeyPadMenu>

src-docs/src/views/header/header_updates.js

@@ -8,7 +8,6 @@ import {
  EuiFlyoutBody,
  EuiFlyoutHeader,
  EuiTitle,
- EuiNotificationBadge,
  EuiLink,
  EuiFlyoutFooter,
  EuiFlexGroup,
@@ -121,15 +120,12 @@ export default class extends Component {
  aria-controls="headerNewsFeed"
  aria-expanded={this.state.isFlyoutVisible}
  aria-haspopup="true"
- aria-label="News feed"
- onClick={this.showFlyout}>
+ aria-label={`News feed: ${
+ this.state.showBadge ? 'Updates available' : 'No updates'
+ }`}
+ onClick={this.showFlyout}
+ notification={this.state.showBadge && '•'}>
  <EuiIcon type="email" size="m" />
-
- {this.state.showBadge ? (
- <EuiNotificationBadge className="euiHeaderNotification">
- &#9642;
- </EuiNotificationBadge>
- ) : null}
  </EuiHeaderSectionItemButton>
  );
 

src/components/accordion/__snapshots__/accordion.test.tsx.snap

@@ -2,7 +2,8 @@
 
 exports[`EuiAccordion behavior closes when clicked twice 1`] = `
 <EuiAccordion
- id="6"
+ arrowDisplay="left"
+ id="8"
  initialIsOpen={false}
  paddingSize="none"
 >
@@ -13,7 +14,7 @@ exports[`EuiAccordion behavior closes when clicked twice 1`] = `
  className="euiAccordion__triggerWrapper"
  >
  <button
- aria-controls="6"
+ aria-controls="8"
  aria-expanded={false}
  className="euiAccordion__button"
  onClick={[Function]}
@@ -39,7 +40,7 @@ exports[`EuiAccordion behavior closes when clicked twice 1`] = `
  </div>
  <div
  className="euiAccordion__childWrapper"
- id="6"
+ id="8"
  >
  <EuiMutationObserver
  observerOptions={
@@ -66,7 +67,8 @@ exports[`EuiAccordion behavior closes when clicked twice 1`] = `
 
 exports[`EuiAccordion behavior opens when clicked once 1`] = `
 <EuiAccordion
- id="5"
+ arrowDisplay="left"
+ id="7"
  initialIsOpen={false}
  paddingSize="none"
 >
@@ -77,7 +79,7 @@ exports[`EuiAccordion behavior opens when clicked once 1`] = `
  className="euiAccordion__triggerWrapper"
  >
  <button
- aria-controls="5"
+ aria-controls="7"
  aria-expanded={true}
  className="euiAccordion__button"
  onClick={[Function]}
@@ -103,7 +105,7 @@ exports[`EuiAccordion behavior opens when clicked once 1`] = `
  </div>
  <div
  className="euiAccordion__childWrapper"
- id="5"
+ id="7"
  >
  <EuiMutationObserver
  observerOptions={
@@ -167,6 +169,80 @@ exports[`EuiAccordion is rendered 1`] = `
 </div>
 `;
 
+exports[`EuiAccordion props arrowDisplay none is rendered 1`] = `
+<div
+ class="euiAccordion"
+>
+ <div
+ class="euiAccordion__triggerWrapper"
+ >
+ <button
+ aria-controls="6"
+ aria-expanded="false"
+ class="euiAccordion__button"
+ type="button"
+ >
+ <span />
+ </button>
+ </div>
+ <div
+ class="euiAccordion__childWrapper"
+ id="6"
+ >
+ <div>
+ <div
+ class=""
+ >
+ <p>
+ You can see me.
+ </p>
+ </div>
+ </div>
+ </div>
+</div>
+`;
+
+exports[`EuiAccordion props arrowDisplay right is rendered 1`] = `
+<div
+ class="euiAccordion"
+>
+ <div
+ class="euiAccordion__triggerWrapper"
+ >
+ <button
+ aria-controls="5"
+ aria-expanded="false"
+ class="euiAccordion__button euiAccordion__buttonReverse"
+ type="button"
+ >
+ <span
+ class="euiAccordion__iconWrapper"
+ >
+ <div
+ class="euiAccordion__icon"
+ data-euiicon-type="arrowRight"
+ />
+ </span>
+ <span />
+ </button>
+ </div>
+ <div
+ class="euiAccordion__childWrapper"
+ id="5"
+ >
+ <div>
+ <div
+ class=""
+ >
+ <p>
+ You can see me.
+ </p>
+ </div>
+ </div>
+ </div>
+</div>
+`;
+
 exports[`EuiAccordion props buttonContent is rendered 1`] = `
 <div
  class="euiAccordion"

src/components/accordion/_accordion.scss

@@ -24,6 +24,12 @@
  }
 }
 
+.euiAccordion__buttonReverse {
+ // Puts the arrow on the right
+ flex-direction: row-reverse;
+ justify-content: space-between;
+}
+
 .euiAccordion__iconWrapper {
  @include size($euiSize);
  border-radius: $euiBorderRadius;

src/components/accordion/accordion.test.tsx

@@ -65,6 +65,28 @@ describe('EuiAccordion', () => {
  expect(component).toMatchSnapshot();
  });
  });
+
+ describe('arrowDisplay', () => {
+ it('right is rendered', () => {
+ const component = render(
+ <EuiAccordion id={getId()} arrowDisplay="right">
+ <p>You can see me.</p>
+ </EuiAccordion>
+ );
+
+ expect(component).toMatchSnapshot();
+ });
+
+ it('none is rendered', () => {
+ const component = render(
+ <EuiAccordion id={getId()} arrowDisplay="none">
+ <p>You can see me.</p>
+ </EuiAccordion>
+ );
+
+ expect(component).toMatchSnapshot();
+ });
+ });
  });
 
  describe('behavior', () => {