feat: Clockface 4 ✨

CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+### 6.3.9 (2022-11-02)
+
+- [885](https://github.com/influxdata/clockface/pull/885): (MultiSelect): make MultiSelectDropdown optionally searchable through `isSearchable` prop
+
 ### 6.3.8 (2022-10-04)
 
 - [857](https://github.com/influxdata/clockface/pull/857): (TimeInput): Fix the dropdown button width to accomodate for multi-character units
@@ -39,6 +43,7 @@
 ### 6.2.0 (2022-08-24)
 
 - [814](https://github.com/influxdata/clockface/pull/814): Added Collapse functionality to the Draggable Resizer
+
 ### 6.1.1 (2022-08-17)
 
 - [823](https://github.com/influxdata/clockface/pull/823): Typeahead Dropdown select text on focus works on all browsers
@@ -55,7 +60,6 @@
 
 - [804](https://github.com/influxdata/clockface/pull/804): Add DoubleCaretVertical icon and trailingIcon prop to Dropdown.Button
 
-
 ### 6.0.0 (2022-08-01)
 
 - [812](https://github.com/influxdata/clockface/pull/812): Remove unused MenuDropdown code

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@influxdata/clockface",
-  "version": "6.3.8",
+  "version": "6.3.9",
   "license": "MIT",
   "main": "dist/index.js",
   "style": "dist/index.css",

src/Components/Accordion/Accordion.scss

@@ -7,7 +7,6 @@
 
 .cf-accordion--icon-container {
   position: relative;
-  // min-width: $cf-space-s;
 }
 
 .cf-accordion--icon-container-left {
@@ -40,7 +39,7 @@
   width: 100%;
   min-height: $cf-form-lg-height;
   border-radius: $cf-radius;
-  background-color: $cf-grey-25;
+  background-color: $cf-grey-3;
   align-items: center;
   outline: none;
   padding: $cf-space-s;
@@ -74,6 +73,10 @@
 
 .cf-accordion--header--content {
   width: 100%;
+
+  &--no-body {
+    margin-left: 25px;
+  }
 }
 
 .cf-accordion--body--disabled,
@@ -115,11 +118,11 @@
   @extend .cf-accordion--header;
   min-height: $cf-form-md-height;
   padding: $cf-form-md-padding;
-  background-color: $cf-grey-15;
+  background-color: $cf-grey-2;
   border-radius: 0px;
 
   &:hover {
-    background-color: $cf-grey-15;
+    background-color: $cf-dark-lavender;
   }
 }
 

src/Components/Accordion/Accordion.tsx

@@ -1,14 +1,12 @@
 // Libraries
-import React, {forwardRef, useState, useEffect} from 'react'
+import React, {forwardRef, useEffect, useState} from 'react'
 import classnames from 'classnames'
 // Styles
 import './Accordion.scss'
 // Types
 import {Direction, StandardFunctionProps} from '../../Types'
 
 export interface AccordionProps extends StandardFunctionProps {
-  /** Determines whether the expand Icon is at the left, right or doesn't exist. If there is no accordionBody, no icons are shown*/
-  iconPlacement?: Direction
   /** Determines whether the accordion is expanded by default or not */
   expanded?: boolean
   /** Prevents any interaction with this element, including the onClick function */
@@ -46,7 +44,6 @@ export const AccordionRoot = forwardRef<AccordionRef, AccordionProps>(
       style,
       testID = 'accordion',
       children,
-      iconPlacement = Direction.Left,
       className,
       expanded = false,
       disabled = false,
@@ -61,9 +58,6 @@ export const AccordionRoot = forwardRef<AccordionRef, AccordionProps>(
     const [isExpanded, setExpanded] = useState(expanded)
     const [animation, setAnimation] = useState(false)
     const [isDisabled, setDisabled] = useState(disabled)
-    const [iconPlacementPosition, setIconPlacementPosition] = useState(
-      iconPlacement
-    )
 
     useEffect(() => {
       setExpanded(expanded)
@@ -79,10 +73,6 @@ export const AccordionRoot = forwardRef<AccordionRef, AccordionProps>(
       }
     }, [isExpanded])
 
-    useEffect(() => {
-      setIconPlacementPosition(iconPlacement)
-    }, [iconPlacement])
-
     const accordionBodyContainerClassName = classnames(
       'cf-accordion--body-container',
       {
@@ -106,7 +96,7 @@ export const AccordionRoot = forwardRef<AccordionRef, AccordionProps>(
     const contextState = {
       isExpanded,
       setExpanded,
-      iconPlacementPosition: hasBody ? iconPlacementPosition : Direction.None,
+      iconPlacementPosition: hasBody ? Direction.Left : Direction.None,
       isDisabled,
       onChange: onChangeFunction,
       hasBody: hasBody,

src/Components/Accordion/AccordionHeader.tsx

@@ -34,6 +34,13 @@ export const AccordionHeader = forwardRef<
     [`cf-accordion--header--clickable`]: context.hasBody && !context.isDisabled,
   })
 
+  const AccordionHeaderContentClassName = classnames(
+    'cf-accordion--header--content',
+    {
+      ['cf-accordion--header--content--no-body']: !context.hasBody,
+    }
+  )
+
   const toggleExpand = () => {
     if (!context.isDisabled) {
       context.setExpanded(!context.isExpanded)
@@ -59,28 +66,10 @@ export const AccordionHeader = forwardRef<
             'cf-accordion--icon-container cf-accordion--icon-container-left'
           }
         >
-          <Icon
-            glyph={IconFont.CaretDown_New}
-            className={AccordionHeaderCaretClassName}
-          />
-        </div>
-      )}
-      <div className={'cf-accordion--header--content'}>{children}</div>
-      {context.iconPlacementPosition === Direction.Right && (
-        <div
-          onClick={() => {
-            context.setExpanded(!context.isExpanded)
-          }}
-          className={
-            'cf-accordion--icon-container cf-accordion--icon-container-right'
-          }
-        >
-          <Icon
-            glyph={IconFont.CaretDown_New}
-            className={AccordionHeaderCaretClassName}
-          />
+          <Icon glyph={caretIcon} className={AccordionHeaderCaretClassName} />
         </div>
       )}
+      <div className={AccordionHeaderContentClassName}>{children}</div>
     </button>
   )
 })

src/Components/Accordion/Documentation/Accordion.stories.tsx

@@ -4,7 +4,7 @@ import marked from 'marked'
 
 // Storybook
 import {storiesOf} from '@storybook/react'
-import {boolean, object, select, withKnobs} from '@storybook/addon-knobs'
+import {boolean, object, withKnobs} from '@storybook/addon-knobs'
 
 // Components
 import {Accordion, AccordionRef} from '../'
@@ -18,14 +18,12 @@ import {
   AlignItems,
   ComponentSize,
   FlexDirection,
-  Direction,
   InputToggleType,
   JustifyContent,
   HeadingElement,
 } from '../../../Types'
 import {FlexBox} from '../../FlexBox'
 import {AccordionBodyItem} from '../AccordionBodyItem'
-import {mapEnumKeys} from '../../../Utils/storybook'
 import {Heading} from '../../Typography'
 
 const accordionStories = storiesOf(
@@ -283,9 +281,6 @@ accordionStories.add(
         style={{justifyContent: 'none', alignItems: 'start', display: 'block'}}
       >
         <Accordion
-          iconPlacement={
-            Direction[select('Icon Placement', mapEnumKeys(Direction), 'Left')]
-          }
           expanded={boolean('expanded', false)}
           disabled={disabled}
           style={object('style', {})}
@@ -328,9 +323,6 @@ accordionStories.add(
           </Accordion.AccordionBodyItem>
         </Accordion>
         <Accordion
-          iconPlacement={
-            Direction[select('Icon Placement', mapEnumKeys(Direction), 'Left')]
-          }
           expanded={boolean('expanded', false)}
           disabled={disabled}
           style={object('style', {})}
@@ -399,9 +391,6 @@ accordionStories.add(
       >
         {' '}
         <Accordion
-          iconPlacement={
-            Direction[select('Icon Placement', mapEnumKeys(Direction), 'Left')]
-          }
           expanded={boolean('expanded', false)}
           disabled={disabled}
           style={object('style', {})}
@@ -411,9 +400,14 @@ accordionStories.add(
           </Accordion.AccordionHeader>
           <Accordion.AccordionBodyItem>
             <span>
-              This is your detailed body. This is your detailed body. This is
-              your detailed body. This is your detailed body. This is your
-              detailed body. This is your detailed body.
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
+              pretium neque eget semper tempor. Maecenas ultricies est a finibus
+              tincidunt. Duis rutrum fermentum hendrerit. Aliquam erat volutpat.
+              Nulla hendrerit ante nunc, ut suscipit nunc auctor eu. Integer
+              vehicula arcu et urna consectetur auctor. Integer a purus ac leo
+              molestie facilisis sit amet ac sem. Nam eget sapien ut nisi
+              molestie iaculis at non augue. Cras dignissim condimentum est, nec
+              molestie tortor placerat maximus. Integer et vulputate nibh.
             </span>
           </Accordion.AccordionBodyItem>
         </Accordion>
@@ -448,9 +442,6 @@ accordionFamilyStories.add(
         style={{justifyContent: 'none', alignItems: 'start', display: 'block'}}
       >
         <Accordion
-          iconPlacement={
-            Direction[select('Icon Placement', mapEnumKeys(Direction), 'Left')]
-          }
           expanded={boolean('expanded', false)}
           disabled={disabled}
           style={object('style', {})}
@@ -465,14 +456,14 @@ accordionFamilyStories.add(
           </Accordion.AccordionHeader>
           <Accordion.AccordionBodyItem>
             <span>
-              This is your detailed body. This is your detailed body. This is
-              your detailed body. This is your detailed body. This is your
-              detailed body. This is your detailed body.This is your detailed
-              body. This is your detailed body. This is your detailed body. This
-              is your detailed body. This is your detailed body. This is your
-              detailed body.This is your detailed body. This is your detailed
-              body. This is your detailed body. This is your detailed body. This
-              is your detailed body. This is your detailed body.
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
+              pretium neque eget semper tempor. Maecenas ultricies est a finibus
+              tincidunt. Duis rutrum fermentum hendrerit. Aliquam erat volutpat.
+              Nulla hendrerit ante nunc, ut suscipit nunc auctor eu. Integer
+              vehicula arcu et urna consectetur auctor. Integer a purus ac leo
+              molestie facilisis sit amet ac sem. Nam eget sapien ut nisi
+              molestie iaculis at non augue. Cras dignissim condimentum est, nec
+              molestie tortor placerat maximus. Integer et vulputate nibh.
             </span>
           </Accordion.AccordionBodyItem>
         </Accordion>