Adding more props to EuiHeaderSectionItemButton, EuiFieldSearch, and …

…EuiAccordion (#2914) * Extending `div` element in EuiFlyout type * Added `shrink` prop to EuiFlexItem Needs some doc something * Added `arrowDisplay` prop to EuiAccordion for changing side or hiding completely * Added `prepend` and `append` ability to EuiFieldSearch * Added `notification` and `notificationColor` props to EuiHeaderSectionItemButton to automatically add the correct positioning via CSS * Revert "Added `shrink` prop to EuiFlexItem" This reverts commit 61a3103. * [Docs] Added header notification example to basic header example * Adding aria-label to updates button * [Docs] Better prop comments * cl * Fix typos * 1 more snap
elastic · Feb 28, 2020 · d44f1d3 · d44f1d3
1 parent 3550df4
commit d44f1d3
Show file tree

Hide file tree

Showing 26 changed files with 446 additions and 38 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -5,13 +5,17 @@
 - Added default prompt text to `aria-describedby` for `EuiFilePicker` ([#2919](https://github.com/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://github.com/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://github.com/elastic/eui/pull/2873))
+- Added `arrowDisplay` prop to `EuiAccordion` for changing side or hiding completely ([#2914](https://github.com/elastic/eui/pull/2914))
+- Added `prepend` and `append` ability to `EuiFieldSearch` ([#2914](https://github.com/elastic/eui/pull/2914))
+- Added `notification` and `notificationColor` props to `EuiHeaderSectionItemButton` ([#2914](https://github.com/elastic/eui/pull/2914))
 - Added `folderCheck`, `folderExclamation`, `push`, `quote`, `reporter` and `users` icons ([#2935](https://github.com/elastic/eui/pull/2935))
 - Updated `folderClosed` and `folderOpen` to match new additions and sit better on the pixel grid ([#2935](https://github.com/elastic/eui/pull/2935))
 
 **Bug fixes**
 
 - Fixed `EuiTitle` not rendering child classes ([#2926](https://github.com/elastic/eui/pull/2926))
 - Added TypeScript definition for `EuiCodeEditor`'s accepting `react-ace` props ([#2926](https://github.com/elastic/eui/pull/2926))
+- Extended `div` element in `EuiFlyout` type ([#2914](https://github.com/elastic/eui/pull/2914))
 
 **Theme: Amsterdam**
 

diff --git a/src-docs/src/views/accordion/accordion_arrow.js b/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>
+);
diff --git a/src-docs/src/views/accordion/accordion_example.js b/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: [

diff --git a/src-docs/src/views/form_controls/display_toggles.js b/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

diff --git a/src-docs/src/views/form_controls/field_search.js b/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

diff --git a/src-docs/src/views/header/header_app_menu.js b/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>

diff --git a/src-docs/src/views/header/header_updates.js b/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>
     );
 

diff --git a/src/components/accordion/__snapshots__/accordion.test.tsx.snap b/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"

diff --git a/src/components/accordion/_accordion.scss b/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;

diff --git a/src/components/accordion/accordion.test.tsx b/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', () => {