diff --git a/CHANGELOG.md b/CHANGELOG.md index 9baec012..10a03c3e 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/package.json b/package.json index 91bc72dc..fbb2dafa 100644 --- a/package.json +++ b/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", diff --git a/src/Components/Accordion/Accordion.scss b/src/Components/Accordion/Accordion.scss index 3c555c66..af04faf5 100644 --- a/src/Components/Accordion/Accordion.scss +++ b/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; } } diff --git a/src/Components/Accordion/Accordion.tsx b/src/Components/Accordion/Accordion.tsx index 5d2e798a..f6eda437 100644 --- a/src/Components/Accordion/Accordion.tsx +++ b/src/Components/Accordion/Accordion.tsx @@ -1,5 +1,5 @@ // Libraries -import React, {forwardRef, useState, useEffect} from 'react' +import React, {forwardRef, useEffect, useState} from 'react' import classnames from 'classnames' // Styles import './Accordion.scss' @@ -7,8 +7,6 @@ import './Accordion.scss' 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( style, testID = 'accordion', children, - iconPlacement = Direction.Left, className, expanded = false, disabled = false, @@ -61,9 +58,6 @@ export const AccordionRoot = forwardRef( 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( } }, [isExpanded]) - useEffect(() => { - setIconPlacementPosition(iconPlacement) - }, [iconPlacement]) - const accordionBodyContainerClassName = classnames( 'cf-accordion--body-container', { @@ -106,7 +96,7 @@ export const AccordionRoot = forwardRef( const contextState = { isExpanded, setExpanded, - iconPlacementPosition: hasBody ? iconPlacementPosition : Direction.None, + iconPlacementPosition: hasBody ? Direction.Left : Direction.None, isDisabled, onChange: onChangeFunction, hasBody: hasBody, diff --git a/src/Components/Accordion/AccordionHeader.tsx b/src/Components/Accordion/AccordionHeader.tsx index 8a7e508a..9fe10088 100644 --- a/src/Components/Accordion/AccordionHeader.tsx +++ b/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' } > - - - )} -
{children}
- {context.iconPlacementPosition === Direction.Right && ( -
{ - context.setExpanded(!context.isExpanded) - }} - className={ - 'cf-accordion--icon-container cf-accordion--icon-container-right' - } - > - +
)} +
{children}
) }) diff --git a/src/Components/Accordion/Documentation/Accordion.stories.tsx b/src/Components/Accordion/Documentation/Accordion.stories.tsx index fa47122d..a59c2fcc 100644 --- a/src/Components/Accordion/Documentation/Accordion.stories.tsx +++ b/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'}} > {' '} - 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. @@ -448,9 +442,6 @@ accordionFamilyStories.add( style={{justifyContent: 'none', alignItems: 'start', display: 'block'}} > - 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. diff --git a/src/Components/AppWrapper/Documentation/AppWrapper.stories.tsx b/src/Components/AppWrapper/Documentation/AppWrapper.stories.tsx index a3f6bf9c..884ff7db 100644 --- a/src/Components/AppWrapper/Documentation/AppWrapper.stories.tsx +++ b/src/Components/AppWrapper/Documentation/AppWrapper.stories.tsx @@ -5,29 +5,19 @@ import {startsWith} from 'lodash' // Storybook import {storiesOf} from '@storybook/react' -import {withKnobs, boolean, text, number, select} from '@storybook/addon-knobs' +import {withKnobs, boolean, number, select} from '@storybook/addon-knobs' import {mapEnumKeys} from '../../../Utils/storybook' import {useState} from '@storybook/addons' // Components import {AppWrapper, AppWrapperRef} from '../AppWrapper' -import {AppHeader} from '../../AppHeader' -import {NavMenu} from '../../NavMenu' -import {FlexBox} from '../../FlexBox' -import {Button} from '../../Button/Composed/Button' -import {PopNav} from '../../PopNav' import {Page} from '../../Page/index' import {Icon} from '../../Icon/Base/Icon' import {TreeNav} from '../../TreeNav' import {InfluxDataLogo} from '../../Logo' // Types -import { - IconFont, - ComponentSize, - FlexDirection, - ComponentColor, -} from '../../../Types' +import {IconFont, ComponentSize, ComponentColor} from '../../../Types' // Notes import AppWrapperReadme from './AppWrapper.md' @@ -36,441 +26,6 @@ const layoutStories = storiesOf('Layout/AppWrapper', module).addDecorator( withKnobs ) -layoutStories.add( - 'AppWrapper', - () => { - const appWrapperRef = createRef() - - const logRef = (): void => { - /* eslint-disable */ - console.log(appWrapperRef.current) - /* eslint-enable */ - } - - return ( -
-
- - - -
-
- -
-
- ) - }, - { - readme: { - content: marked(AppWrapperReadme), - }, - } -) - layoutStories.add( 'AppWrapper + TreeNav', () => { diff --git a/src/Components/Button/Button.scss b/src/Components/Button/Button.scss index 12a9298a..0a765c5f 100644 --- a/src/Components/Button/Button.scss +++ b/src/Components/Button/Button.scss @@ -222,7 +222,12 @@ .cf-button-primary, .cf-button-success { - @include buttonColorModifier($c-pool, $c-pulsar, $cf-white, $cf-white); + @include buttonColorModifier( + $cf-turquoise, + $cf-turquoise, + $cf-grey-1, + $cf-grey-1 + ); } .cf-button-tertiary { @@ -237,7 +242,11 @@ .cf-button-warning, .cf-button-danger { - @include buttonColorModifier($c-ruby, $c-topaz, $cf-white, $cf-white); + @include buttonColorModifier($cf-red, $cf-red, $cf-grey-1, $cf-grey-1); + + &:focus { + @include focus-shadow($cf-red); + } } .cf-button-colorless { diff --git a/src/Components/Button/Composed/DismissButton.scss b/src/Components/Button/Composed/DismissButton.scss index 6bba74b6..707c2093 100644 --- a/src/Components/Button/Composed/DismissButton.scss +++ b/src/Components/Button/Composed/DismissButton.scss @@ -27,7 +27,7 @@ button.cf-dismiss-button { display: block; width: $cf-space-xs; height: $cf-border; - background-color: $g20-white; + background-color: $cf-grey-1; border-radius: $cf-border * 1.5 * 0.5; top: 50%; left: 50%; diff --git a/src/Components/Button/Composed/LinkButton.scss b/src/Components/Button/Composed/LinkButton.scss index e24872d2..326b8cce 100644 --- a/src/Components/Button/Composed/LinkButton.scss +++ b/src/Components/Button/Composed/LinkButton.scss @@ -12,4 +12,9 @@ a:active { &.cf-button { color: $cf-white; } + &.cf-button-success, + &.cf-button-danger, + &.cf-button-primary { + color: $cf-grey-1; + } } diff --git a/src/Components/Dropdowns/Composed/MultiSelectDropdown.tsx b/src/Components/Dropdowns/Composed/MultiSelectDropdown.tsx index ba313167..8cc75643 100644 --- a/src/Components/Dropdowns/Composed/MultiSelectDropdown.tsx +++ b/src/Components/Dropdowns/Composed/MultiSelectDropdown.tsx @@ -1,5 +1,5 @@ // Libraries -import React, {MouseEvent, forwardRef} from 'react' +import React, {MouseEvent, forwardRef, useState} from 'react' // Components import {Dropdown, DropdownRef} from '../' @@ -17,6 +17,7 @@ import { ComponentStatus, StandardFunctionProps, } from '../../../Types' +import {Input} from '../../Inputs' export interface MultiSelectDropdownProps extends StandardFunctionProps { /** Text to render in button as currently selected option */ @@ -43,6 +44,9 @@ export interface MultiSelectDropdownProps extends StandardFunctionProps { menuMaxHeight?: number /** Renders the menu element above the button instead of below */ dropUp?: boolean + /** Enables the search bar in the dropdown menu */ + isSearchable?: boolean + searchbarInputPlaceholder?: string } export type MultiSelectDropdownRef = DropdownRef @@ -69,6 +73,8 @@ export const MultiSelectDropdown = forwardRef< buttonStatus = ComponentStatus.Default, menuMaxHeight, selectedOptions, + isSearchable = false, + searchbarInputPlaceholder = 'Search', }, ref ) => { @@ -76,6 +82,8 @@ export const MultiSelectDropdown = forwardRef< ? selectedOptions.join(', ') : emptyText + const [filterString, setFilterString] = useState('') + const button = ( active: boolean, onClick: (e: MouseEvent) => void @@ -92,32 +100,79 @@ export const MultiSelectDropdown = forwardRef< ) + const NoResults = () => ( + + {filterString.length > 0 + ? `no matches for ${filterString}` + : 'No results'} + + ) + + const handleFiltering = (e: any) => { + const filterStr = e.currentTarget.value + setFilterString(filterStr) + } + + const clearFilter = () => { + setFilterString('') + } + const menu = () => ( - - {options.map(o => { - if (o === DROPDOWN_DIVIDER_SHORTCODE) { - return - } - - if (o.includes(DROPDOWN_DIVIDER_SHORTCODE)) { - const dividerText = o.replace(DROPDOWN_DIVIDER_SHORTCODE, '') - return - } - - return ( - - {o} - - ) - })} - + <> + {isSearchable && ( + + + + )} + + {options.map(o => { + // case-insensitive search + if ( + isSearchable && + !o.toUpperCase().includes(filterString.toUpperCase()) + ) { + return + } + + if (o === DROPDOWN_DIVIDER_SHORTCODE) { + return + } + + if (o.includes(DROPDOWN_DIVIDER_SHORTCODE)) { + const dividerText = o.replace(DROPDOWN_DIVIDER_SHORTCODE, '') + return + } + + return ( + + {o} + + ) + })} + + {options.filter(option => + option.toUpperCase().includes(filterString.toUpperCase()) + ).length === 0 ? ( + + ) : null} + + ) return ( diff --git a/src/Components/Dropdowns/Documentation/Dropdowns.stories.tsx b/src/Components/Dropdowns/Documentation/Dropdowns.stories.tsx index c9a37548..f049471b 100644 --- a/src/Components/Dropdowns/Documentation/Dropdowns.stories.tsx +++ b/src/Components/Dropdowns/Documentation/Dropdowns.stories.tsx @@ -906,6 +906,11 @@ dropdownComposedStories.add( emptyText={text('emptyText', 'None selected')} selectedOptions={selectedOptions} options={array('options', defaultMultiSelectOptions)} + isSearchable={boolean('isSearchable', true)} + searchbarInputPlaceholder={text( + 'searchbarInputPlaceholder', + 'Search' + )} />
diff --git a/src/Components/Dropdowns/Dropdown.scss b/src/Components/Dropdowns/Dropdown.scss index 57f78e85..36d31ffa 100644 --- a/src/Components/Dropdowns/Dropdown.scss +++ b/src/Components/Dropdowns/Dropdown.scss @@ -43,6 +43,7 @@ $dropdown-item--padding-v: $cf-space-2xs; border-radius: $cf-radius; box-shadow: 0 2px 5px 0.6px rgba($g0-obsidian, 0.2); padding: $cf-space-2xs; + border: rgba(255, 255, 255, 0.05) solid $cf-border; } .cf-dropdown-menu--contents { @@ -52,6 +53,8 @@ $dropdown-item--padding-v: $cf-space-2xs; flex-direction: column; align-items: stretch; cursor: pointer; + margin-right: 2px; + margin-left: 1px; } /* @@ -69,10 +72,18 @@ $dropdown-item--padding-v: $cf-space-2xs; .cf-dropdown-divider { @include dropdownItemStyles(); font-weight: $cf-font-weight--medium; + text-transform: uppercase; + color: #88889b; + padding-bottom: 4px; + border-bottom: $cf-grey-4 1px solid; + margin-bottom: 4px; &.line { padding: 0; height: $cf-border; + background: $cf-grey-4; + margin: 8px 0 4px; + width: 100%; } &:hover { @@ -85,6 +96,7 @@ $dropdown-item--padding-v: $cf-space-2xs; color: $g20-white; position: relative; border-radius: $cf-radius; + margin-top: $cf-space-3xs; &.cf-dropdown-link-item { padding: 0; @@ -287,12 +299,14 @@ $dropdown-item--padding-v: $cf-space-2xs; .cf-dropdown-item:not(.cf-dropdown-item__disabled):hover, .cf-dropdown-item:not(.cf-dropdown-item__disabled):focus { - background-color: rgba($cf-grey-95, 0.1); + background-color: rgba($cf-grey-95, 0.09); outline: none; } .cf-dropdown-item.active:not(.cf-dropdown-item__disabled) { - background-color: $active; + background-color: #2a2649; + border: $cf-item-selected-border; + border-radius: $cf-border; } } @@ -309,7 +323,7 @@ $dropdown-item--padding-v: $cf-space-2xs; } .cf-dropdown__onyx { - @include dropdownMenuColor($c-pool); + @include dropdownMenuColor($cf-lavender); } .cf-dropdown__none { diff --git a/src/Components/Dropdowns/DropdownMenu.tsx b/src/Components/Dropdowns/DropdownMenu.tsx index 8defa92e..9ae1bd0f 100644 --- a/src/Components/Dropdowns/DropdownMenu.tsx +++ b/src/Components/Dropdowns/DropdownMenu.tsx @@ -61,8 +61,6 @@ export const DropdownMenu = forwardRef( [`cf-dropdown__${theme}`]: theme, }) - // const {thumbStartColor, thumbStopColor} = getScrollbarColorsFromTheme(theme) - const scrollTop = calculateSelectedPosition(scrollToSelected, children) const scrollbarsStyle = { diff --git a/src/Components/FunnelPage/Documentation/FunnelPage.stories.tsx b/src/Components/FunnelPage/Documentation/FunnelPage.stories.tsx index e69a286a..86bca2d8 100644 --- a/src/Components/FunnelPage/Documentation/FunnelPage.stories.tsx +++ b/src/Components/FunnelPage/Documentation/FunnelPage.stories.tsx @@ -31,7 +31,6 @@ import { ComponentSize, Columns, HeadingElement, - Gradients, } from '../../../Types' // Notes @@ -224,7 +223,6 @@ funnelPageExampleStories.add( size={ComponentSize.Small} visible={notificationState} icon={IconFont.Zap} - gradient={Gradients.KawaiiDesu} onDismiss={handleDismissNotification} > Yeehaw I'm a notification diff --git a/src/Components/Icon/Composed/Bullet.scss b/src/Components/Icon/Composed/Bullet.scss index 58a9da4b..87b64df3 100644 --- a/src/Components/Icon/Composed/Bullet.scss +++ b/src/Components/Icon/Composed/Bullet.scss @@ -8,13 +8,12 @@ .cf-bullet { user-select: none; border-radius: 50%; - background-color: $g2-kevlar; + background-color: $cf-lavender; font-weight: $cf-font-weight--bold; text-align: center; display: inline-flex; justify-content: center; align-items: center; - color: $c-honeydew; } /* diff --git a/src/Components/Inputs/Composed/RangeSlider.scss b/src/Components/Inputs/Composed/RangeSlider.scss index d247a417..2ffc86ae 100644 --- a/src/Components/Inputs/Composed/RangeSlider.scss +++ b/src/Components/Inputs/Composed/RangeSlider.scss @@ -50,7 +50,7 @@ $slider-hover: $g17-whisper; width: $slider-handle-height; border-radius: $cf-radius; background: $slider-handle; - margin-top: -(($slider-handle-height*0.5) - ($slider-track-height*0.5)); + margin-top: -(($slider-handle-height * 0.5) - ($slider-track-height * 0.5)); &:hover, &:focus { @@ -229,7 +229,7 @@ $slider-hover: $g17-whisper; height: $slider-handle-mod-height; width: $slider-handle-mod-height; border-radius: 50%; - margin-top: -(($slider-handle-mod-height*0.5) - ($trackHeight*0.5)); + margin-top: -(($slider-handle-mod-height * 0.5) - ($trackHeight * 0.5)); } &::-moz-range-track { @@ -329,7 +329,7 @@ $slider-hover: $g17-whisper; @include rangeSliderColorModifier($g7-graphite, $g8-storm, $g9-mountain); } .cf-range-slider__primary { - @include rangeSliderColorModifier($c-pool, $c-laser, $c-hydrogen); + @include rangeSliderColorModifier($cf-lavender, $cf-lavender, $cf-lavender); } .cf-range-slider__secondary { @include rangeSliderColorModifier($c-star, $c-comet, $c-potassium); diff --git a/src/Components/Inputs/Input.scss b/src/Components/Inputs/Input.scss index a1d77166..fc131609 100644 --- a/src/Components/Inputs/Input.scss +++ b/src/Components/Inputs/Input.scss @@ -23,12 +23,6 @@ color: $cf-input-text--default; border: $cf-border solid $cf-input-border--default; - &:hover { - background-color: $cf-input-background--hover; - border-color: $cf-input-border--hover; - color: $cf-input-text--hover; - } - &:focus { background-color: $cf-input-background--focused; border-color: $cf-input-border--focused; @@ -133,6 +127,7 @@ alternate css for the other sizes */ &:before, &:after { width: $cf-form-sm-font; + background: $cf-input-text--default; } } } @@ -192,7 +187,7 @@ alternate css for the other sizes */ left: 50%; transform: translate(-50%, -50%) scale(1.5, 1.5); border-radius: 50%; - background: $cf-input-border--focused; + background: $cf-lavender; z-index: 2; opacity: 0; transition: opacity $cf-transition-default, transform $cf-transition-default; diff --git a/src/Components/Inputs/StatusIndicator.scss b/src/Components/Inputs/StatusIndicator.scss index 9093967f..ffdb0b7b 100644 --- a/src/Components/Inputs/StatusIndicator.scss +++ b/src/Components/Inputs/StatusIndicator.scss @@ -100,7 +100,7 @@ */ .cf-status-indicator__valid { - color: $c-rainforest; + color: $cf-green; } .cf-status-indicator__error { diff --git a/src/Components/Inputs/Toggle.scss b/src/Components/Inputs/Toggle.scss index e4ec7bc7..60c127bd 100644 --- a/src/Components/Inputs/Toggle.scss +++ b/src/Components/Inputs/Toggle.scss @@ -58,7 +58,7 @@ } .cf-toggle__checked & { - background: $c-pool; + background: $cf-lavender; .cf-toggle--indicator { opacity: 1; @@ -103,6 +103,7 @@ width: 100%; height: 100%; transform: translate(-50%, -50%) scale(0.333); + outline: rgba(0, 0, 0, 0.2) solid 1px; } .cf-toggle--icon { diff --git a/src/Components/List/List.scss b/src/Components/List/List.scss index 69c1ca88..b8d5a0fb 100644 --- a/src/Components/List/List.scss +++ b/src/Components/List/List.scss @@ -5,16 +5,17 @@ $list-item--text-opacity: 0.666; $list-item--divider-color--light: $cf-grey-25; $list-item--divider-text--light: rgba($g20-white, 0.4); -$list-item--background-light: $c-pool; +$list-item--background-light: $cf-dark-lavender; $list-item--divider-color--dark: $cf-grey-55; $list-item--divider-text--dark: rgba($g0-obsidian, 0.4); -$list-item--background-dark: $c-pool; +$list-item--background-dark: $cf-dark-lavender; .cf-list { overflow: hidden; border-radius: $cf-radius; padding: $cf-border; + background: $cf-grey-2; .cf-dapper-scrollbars--track-y { z-index: 2; @@ -85,19 +86,21 @@ $list-item--background-dark: $c-pool; .cf-list-item:hover .cf-list-item--highlight, .cf-list-item:focus .cf-list-item--highlight { - background-color: rgba($cf-grey-95, 0.1); + background-color: $cf-grey-3; } .cf-list-item__active .cf-list-item--highlight__light, .cf-list-item__active:hover .cf-list-item--highlight__light, .cf-list-item__active:focus .cf-list-item--highlight__light { background-color: $list-item--background-light; + border: $cf-item-selected-border; } .cf-list-item__active .cf-list-item--highlight__dark, .cf-list-item__active:hover .cf-list-item--highlight__dark, .cf-list-item__active:focus .cf-list-item--highlight__dark { background-color: $list-item--background-dark; + border: $cf-item-selected-border; } .cf-list-item__light { @@ -146,7 +149,7 @@ $list-item--background-dark: $c-pool; */ .cf-list-divider { - color: $cf-grey-35; + color: $cf-grey-5; border-radius: $cf-radius-sm; border-bottom: $cf-border solid $list-item--divider-color--light; white-space: nowrap; diff --git a/src/Components/List/ListIndicator.scss b/src/Components/List/ListIndicator.scss index 5c591566..21d01754 100644 --- a/src/Components/List/ListIndicator.scss +++ b/src/Components/List/ListIndicator.scss @@ -18,20 +18,20 @@ .cf-list-indicator__dot { border-radius: 50%; - background-color: rgba($cf-grey-95, 0.1); + background-color: $cf-grey-4; .cf-list-indicator--element { border-radius: 50%; opacity: 0; transform: translate(-50%, -50%) scale(0.25, 0.25); transition: transform $cf-transition-default, opacity $cf-transition-default; - background-color: $g20-white; + background-color: $cf-white; width: 0.5em; height: 0.5em; } &.cf-list-indicator__selected { - background-color: $cf-grey-35; + background-color: $cf-lavender; .cf-list-indicator--element { transform: translate(-50%, -50%) scale(1, 1); @@ -47,7 +47,7 @@ .cf-list-indicator__checkbox { border-radius: $cf-border; - background-color: rgba($cf-grey-95, 0.1); + background-color: $cf-grey-4; .cf-list-indicator--element { width: 0.5em; @@ -60,7 +60,7 @@ } &.cf-list-indicator__selected { - background-color: $cf-grey-25; + background-color: $cf-lavender; .cf-list-indicator--element { opacity: 1; diff --git a/src/Components/NavMenu/Documentation/NavMenu.md b/src/Components/NavMenu/Documentation/NavMenu.md deleted file mode 100644 index f3f2c6b8..00000000 --- a/src/Components/NavMenu/Documentation/NavMenu.md +++ /dev/null @@ -1,36 +0,0 @@ -# NavMenu - -This is primary navigation component for Clockface applications. It is intentionally minimalistic to maximize screen space for application features. On small screens it moves to the top. - -### Usage -```tsx -import {NavMenu} from '@influxdata/clockface' -``` -```tsx - - - - - - -``` - -### As Part of an Application Layout - -We recommend using `NavMenu` in combination with `AppWrapper` and `Page` to have all the basics for an application: -```tsx - - - - -``` - -### Example - - - - - - - - diff --git a/src/Components/NavMenu/Documentation/NavMenu.stories.tsx b/src/Components/NavMenu/Documentation/NavMenu.stories.tsx deleted file mode 100644 index d5254fbe..00000000 --- a/src/Components/NavMenu/Documentation/NavMenu.stories.tsx +++ /dev/null @@ -1,247 +0,0 @@ -// Libraries -import React, {createRef} from 'react' -import marked from 'marked' - -// Storybook -import {storiesOf} from '@storybook/react' -import {mapEnumKeys} from '../../../Utils/storybook' -import {withKnobs, boolean, text, select, radios} from '@storybook/addon-knobs' - -// Components -import {NavMenu, NavMenuRef, NavMenuItemRef} from '../' -import {Icon} from '../../Icon/Base/Icon' - -// Types -import {IconFont} from '../../../Types' - -// Notes -import NavMenuReadme from './NavMenu.md' -import NavMenuItemReadme from './NavMenuItem.md' -import NavMenuSubItemReadme from './NavMenuSubItem.md' - -const navMenuStories = storiesOf( - 'Components/Navigation/NavMenu', - module -).addDecorator(withKnobs) - -enum NavItems { - First = 'First', - Second = 'Second', - Third = 'Third', -} - -navMenuStories.add( - 'NavMenu', - () => { - const navMenuRef = createRef() - - const logRef = (): void => { - /* eslint-disable */ - console.log(navMenuRef.current) - /* eslint-enable */ - } - - return ( -
- - ( - - {text('1 - title', 'First Item')} - - )} - iconLink={className => ( - - - - )} - active={ - NavItems[ - radios( - 'active item', - mapEnumKeys(NavItems), - NavItems.First - ) - ] == NavItems.First - } - /> - ( - - {text('2 - title', 'Second Item')} - - )} - iconLink={className => ( - - - - )} - active={ - NavItems[ - radios( - 'active item', - mapEnumKeys(NavItems), - NavItems.First - ) - ] == NavItems.Second - } - > - ( - - First Sub-Item - - )} - active={false} - /> - ( - - Second Sub-Item - - )} - active={false} - /> - ( - - Third Sub-Item - - )} - active={false} - /> - - ( - - {text('3 - title', 'Third Item')} - - )} - iconLink={className => ( - - - - )} - active={ - NavItems[ - radios( - 'active item', - mapEnumKeys(NavItems), - NavItems.First - ) - ] == NavItems.Third - } - /> - -
- -
-
- ) - }, - { - readme: { - content: marked(NavMenuReadme), - }, - } -) - -navMenuStories.add( - 'NavMenuItem', - () => { - const navMenuRef = createRef() - - const logRef = (): void => { - /* eslint-disable */ - console.log(navMenuRef.current) - /* eslint-enable */ - } - - return ( -
- ( - - {text('title', 'Item Title')} - - )} - iconLink={className => ( - - - - )} - active={boolean('active', false)} - > - ( - - First Sub-Item - - )} - active={false} - /> - ( - - Second Sub-Item - - )} - active={false} - /> - ( - - Third Sub-Item - - )} - active={false} - /> - -
- -
-
- ) - }, - { - readme: { - content: marked(NavMenuItemReadme), - }, - } -) - -navMenuStories.add( - 'NavMenuSubItem', - () => ( -
- ( - - {text('title', 'Sub Item Title')} - - )} - active={boolean('active', false)} - /> -
- ), - { - readme: { - content: marked(NavMenuSubItemReadme), - }, - } -) diff --git a/src/Components/NavMenu/Documentation/NavMenuItem.md b/src/Components/NavMenu/Documentation/NavMenuItem.md deleted file mode 100644 index 98c8beff..00000000 --- a/src/Components/NavMenu/Documentation/NavMenuItem.md +++ /dev/null @@ -1,49 +0,0 @@ -# NavMenuItem - -The first tier of navigation items. It can optionally contain `NavMenu.SubItem` - -### Usage -```tsx -import {NavMenu} from '@influxdata/clockface' -``` -```tsx - -``` - -### React Router - -Becuase we wanted to avoid having React Router as a dependency `NavMenuItem` and `NavMenuSubItem` make use of render props to allow `` elements to be passed in. -The `titleLink` and `iconLink` props should be passed the same element to ensure consistency: - -```tsx -// Using anchor tags - } - titleLink={className => Item Title} -/> -``` -```tsx -// Using a router link - } - titleLink={className => Item Title} -/> -``` - -### Creating Sub-Items - -Simply pass in `` as children of `` and they will appear below the title link - -### Styling - -`` receives its styles by being a child of `` - -### Example - - - - - - - - diff --git a/src/Components/NavMenu/Documentation/NavMenuSubItem.md b/src/Components/NavMenu/Documentation/NavMenuSubItem.md deleted file mode 100644 index 0a49ab1d..00000000 --- a/src/Components/NavMenu/Documentation/NavMenuSubItem.md +++ /dev/null @@ -1,39 +0,0 @@ -# NavMenuSubItem - -The second tier of navigation items - -### Usage -```tsx -import {NavMenu} from '@influxdata/clockface' -``` -```tsx - -``` - -### React Router - -Becuase we wanted to avoid having React Router as a dependency `NavMenuItem` and `NavMenuSubItem` make use of render props to allow `` elements to be passed in. -The `titleLink` and `iconLink` props should be passed the same element to ensure consistency: - -```tsx -// Using anchor tags - Item Title} /> -``` -```tsx -// Using a router link - Item Title} /> -``` - -### Styling - -`` receives its styles by being a child of `` - -### Example - - - - - - - - diff --git a/src/Components/NavMenu/NavMenu.scss b/src/Components/NavMenu/NavMenu.scss deleted file mode 100644 index befee876..00000000 --- a/src/Components/NavMenu/NavMenu.scss +++ /dev/null @@ -1,419 +0,0 @@ -@import '../../Styles/variables'; - -/* - Navigation Menu - ---------------------------------------------------------------------------- -*/ - -.cf-nav { - position: absolute; - height: 100%; - width: 100%; - top: 0; - left: 0; - z-index: $cf-z--nav-menu; - transform: translateX(-100%); - transition: transform $cf-time-slow $cf-ease-smooth; - display: flex; - - &.cf-nav__expanded { - transform: translateX(0); - } -} - -.cf-nav--mask { - position: absolute; - height: 100%; - width: 100%; - top: 0; - left: 0; - background-color: $cf-page--background; - opacity: 0; - pointer-events: none; - z-index: $cf-z--nav-mask; - transition: opacity $cf-transition-default; - - .cf-nav__expanded + & { - opacity: 0.66; - } -} - -.cf-nav--toggle { - z-index: $cf-z--nav-toggle; - position: absolute; - top: 0; - left: 0; - width: $cf-nav-menu--size; - height: $cf-nav-menu--size; - - &:hover { - cursor: pointer; - } -} - -.cf-nav--hamburger { - position: absolute; - height: $cf-nav-menu--size; - width: $cf-nav-menu--size; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - transition: transform $cf-time-slow $cf-ease-smooth; -} - -.cf-nav--hamburger-top, -.cf-nav--hamburger-middle, -.cf-nav--hamburger-bottom { - width: ceil($cf-nav-menu--size * 0.4); - height: $cf-border; - position: absolute; - top: 50%; - left: 50%; - transition: background-color $cf-time-slow $cf-ease-smooth, - transform $cf-time-slow $cf-ease-smooth; - background-color: $g11-sidewalk; - - .cf-nav--toggle:hover & { - background-color: $c-pool; - } -} -.cf-nav--hamburger-top { - transform: translate(-50%, -325%); -} -.cf-nav--hamburger-middle { - transform: translate(-50%, -50%); -} -.cf-nav--hamburger-bottom { - transform: translate(-50%, 225%); -} - -.cf-nav--toggle__expanded { - .cf-nav--hamburger { - transform: translate(-50%, -50%) rotate(45deg); - } - - .cf-nav--hamburger-top, - .cf-nav--hamburger-middle, - .cf-nav--hamburger-bottom { - background-color: $c-neutrino; - } - - .cf-nav--hamburger-top, - .cf-nav--hamburger-bottom { - transform: translate(-50%, -50%); - } - - .cf-nav--hamburger-middle { - transform: translate(-50%, -50%) rotate(90deg); - } - - &:hover { - .cf-nav--hamburger-top, - .cf-nav--hamburger-middle, - .cf-nav--hamburger-bottom { - background-color: $g20-white; - } - } -} - -/* - Link Styles - ------------------------------------------------------------------------------ -*/ - -.cf-nav--item, -.cf-nav--item-header, -.cf-nav--sub-item { - &:link, - &:active, - &:visited, - &:hover { - text-decoration: none; - } -} - -/* - Navigation Items - ---------------------------------------------------------------------------- -*/ - -.cf-nav--menu { - display: flex; - flex-direction: column; - overflow: auto; - height: 100%; - @include gradient-h($cf-nav-menu--bg, $cf-nav-menu--bg-accent); - padding-top: ceil($cf-nav-menu--size * 1); - padding-left: $cf-marg-b; - padding-bottom: $cf-marg-b; -} - -.cf-nav--item { - display: flex; - align-items: flex-start; - position: relative; -} - -.cf-nav--item-icon { - display: block; - width: ceil($cf-nav-menu--size * 0.75); - height: ceil($cf-nav-menu--size * 0.75); - position: absolute; - pointer-events: none; - z-index: 1; - top: 0; - left: 0; - - > .cf-icon { - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - font-size: ceil($cf-nav-menu--size * 0.3); - } - - &, - &:link, - &:active, - &:visited { - transition: text-shadow $cf-time-slow $cf-ease-smooth, - color $cf-transition-default; - color: $c-yeti; - } -} - -.cf-nav--item-menu { - display: flex; - flex-direction: column; - align-items: stretch; - overflow: hidden; - flex: 1 0 0; -} - -.cf-nav--item-header { - display: block; - height: ceil($cf-nav-menu--size * 0.75); - line-height: ceil($cf-nav-menu--size * 0.75); - font-size: $cf-form-lg-font; - padding: 0 ceil($cf-nav-menu--size * 0.75); - white-space: nowrap; - border-radius: $cf-radius 0 0 $cf-radius; - - &, - &:link, - &:visited, - &:active { - font-weight: $cf-font-weight--medium; - transition: none; - color: $c-yeti; - } - - &:hover { - color: $g20-white; - @include gradient-h($cf-nav-menu--bg-hover, $cf-nav-menu--bg-hover-accent); - } -} - -// Active State -.cf-nav--item.active { - .cf-nav--item-header { - color: $g20-white; - @include gradient-h($cf-nav-menu--bg-hover, $cf-nav-menu--bg-hover-accent); - } - .cf-nav--item-icon { - color: $g20-white; - text-shadow: 0 0 9px $c-laser, 0 0 15px $c-ocean, 0 0 20px $c-amethyst; - } -} - -// Sub Menu Items -.cf-nav--sub-item { - margin-left: ceil($cf-nav-menu--size * 0.75); - padding: 6px ceil($cf-nav-menu--gutter * 0.75); - user-select: none; - font-size: 13px; - white-space: nowrap; - position: relative; - z-index: 2; - - &, - &:link, - &:visited, - &:active { - font-weight: $cf-font-weight--medium; - color: $c-neutrino; - } - - &:after { - position: absolute; - content: ''; - top: 0; - left: 0; - width: 100%; - height: 100%; - border-radius: $cf-radius 0 0 $cf-radius; - @include gradient-h($cf-nav-menu--bg-hover, $cf-nav-menu--bg-hover-accent); - z-index: -1; - opacity: 0; - transition: opacity $cf-transition-default; - } - - &:hover, - &.active { - color: $g20-white; - cursor: pointer; - - &:after { - opacity: 1; - } - } -} - -/* - Navigation Menu (Large Screens) - ---------------------------------------------------------------------------- -*/ -@media screen and (min-width: $cf-nav-menu--breakpoint) { - .cf-nav--toggle, - .cf-nav--mask { - display: none; - } - - .cf-nav, - .cf-nav.cf-nav__expanded { - position: static; - top: initial; - left: initial; - flex-direction: column; - height: auto; - display: flex; - flex-direction: column; - justify-content: center; - width: $cf-nav-menu--size; - transform: translateX(0); - transition: none; - } - - .cf-nav--menu { - padding-left: 0; - padding-top: 0; - padding-bottom: 0; - height: auto; - border-radius: 0 $cf-radius $cf-radius 0; - display: flex; - background-image: none; - background-color: $g3-castle; - overflow: visible; - } - - .cf-nav--item { - width: $cf-nav-menu--size; - height: $cf-nav-menu--size; - - &:hover { - z-index: 9999; - } - } - - .cf-nav--item-icon { - width: $cf-nav-menu--size; - height: $cf-nav-menu--size; - pointer-events: all; - z-index: 2; - - &, - &:link, - &:active, - &:visited { - transition: text-shadow $cf-time-slow $cf-ease-smooth; - color: $g13-mist; - } - - > .cf-icon { - font-size: ceil($cf-nav-menu--size * 0.4222); - } - - .cf-nav--item:first-child & { - border-top-right-radius: $cf-radius; - } - - .cf-nav--item:last-child & { - border-bottom-right-radius: $cf-radius; - } - - .cf-nav--item:hover & { - &, - &:link, - &:active, - &:visited { - border-top-right-radius: 0; - border-bottom-right-radius: 0; - background-color: $cf-nav-menu--bg; - color: $g20-white; - } - } - - .cf-nav--item.active & { - &, - &:link, - &:active, - &:visited { - background-color: $g6-smoke; - color: $g20-white; - } - } - .cf-nav--item.active:hover & { - &, - &:link, - &:active, - &:visited, - &:hover { - background-color: $cf-nav-menu--bg; - text-shadow: 0 0 9px $c-yeti, 0 0 15px $c-hydrogen, 0 0 20px $c-laser; - } - } - } - - .cf-nav--item-menu { - display: none; - position: absolute; - top: 0; - left: $cf-nav-menu--size; - align-items: stretch; - border-radius: 0 $cf-radius $cf-radius 0; - @include gradient-h($cf-nav-menu--bg, $cf-nav-menu--bg-accent); - - .cf-nav--item:hover & { - display: flex; - } - } - - .cf-nav--item-header { - height: $cf-nav-menu--size; - line-height: $cf-nav-menu--size; - padding: 0 $cf-nav-menu--gutter; - border-top-left-radius: 0; - border-bottom-left-radius: 0; - - &, - .cf-nav--item.active & { - &, - &:link, - &:active, - &:visited, - &:hover { - background-image: none; - } - } - } - - .cf-nav--sub-item { - padding: 6px $cf-nav-menu--gutter; - margin: 0; - - &:after { - border-top-left-radius: 0; - border-bottom-left-radius: 0; - } - } -} diff --git a/src/Components/NavMenu/NavMenu.tsx b/src/Components/NavMenu/NavMenu.tsx deleted file mode 100644 index b73d1e0c..00000000 --- a/src/Components/NavMenu/NavMenu.tsx +++ /dev/null @@ -1,57 +0,0 @@ -// Libraries -import React, {forwardRef, useState} from 'react' -import classnames from 'classnames' -import _ from 'lodash' - -// Types -import {StandardFunctionProps} from '../../Types' - -// Styles -import './NavMenu.scss' - -export type NavMenuProps = StandardFunctionProps - -export type NavMenuRef = HTMLElement - -export const NavMenuRoot = forwardRef( - ({id, style, children, className, testID = 'nav-menu'}, ref) => { - const [menuVisible, setMenuVisible] = useState(false) - - const navMenuRootClass = classnames('cf-nav', { - 'cf-nav__expanded': menuVisible, - [`${className}`]: className, - }) - - const toggleClassName = classnames('cf-nav--toggle', { - 'cf-nav--toggle__expanded': menuVisible, - }) - - const handleToggleMenu = (): void => { - setMenuVisible(!menuVisible) - } - - return ( - <> -
-
-
-
-
-
-
- -
- - ) - } -) - -NavMenuRoot.displayName = 'NavMenu' diff --git a/src/Components/NavMenu/NavMenuItem.tsx b/src/Components/NavMenu/NavMenuItem.tsx deleted file mode 100644 index 69b1a4a6..00000000 --- a/src/Components/NavMenu/NavMenuItem.tsx +++ /dev/null @@ -1,56 +0,0 @@ -// Libraries -import React, {forwardRef} from 'react' -import classnames from 'classnames' - -// Types -import {StandardFunctionProps, RenderLinkElement} from '../../Types' - -export interface NavMenuItemProps extends StandardFunctionProps { - /** Render prop for linked title text */ - titleLink: RenderLinkElement - /** Render prop for linked icon component */ - iconLink: RenderLinkElement - /** Controls highlighting of the menu item */ - active: boolean -} - -export type NavMenuItemRef = HTMLDivElement - -export const NavMenuItem = forwardRef( - ( - { - id, - style, - active, - iconLink, - children, - titleLink, - className, - testID = 'nav-menu--item', - }, - ref - ) => { - const navMenuItemClass = classnames('cf-nav--item', { - active, - [`${className}`]: className, - }) - - return ( -
- {iconLink('cf-nav--item-icon')} -
- {titleLink('cf-nav--item-header')} - {children} -
-
- ) - } -) - -NavMenuItem.displayName = 'NavMenuItem' diff --git a/src/Components/NavMenu/NavMenuSubItem.tsx b/src/Components/NavMenu/NavMenuSubItem.tsx deleted file mode 100644 index 2a7440ab..00000000 --- a/src/Components/NavMenu/NavMenuSubItem.tsx +++ /dev/null @@ -1,34 +0,0 @@ -// Libraries -import {FunctionComponent, CSSProperties} from 'react' -import classnames from 'classnames' - -// Types -import {StandardFunctionProps} from '../../Types' - -export interface NavMenuSubItemProps extends StandardFunctionProps { - /** Controls highlighting of the menu item */ - active: boolean - /** Render prop for linked title text (suggested or ) */ - titleLink: ( - className: string, - testID?: string, - style?: CSSProperties - ) => JSX.Element -} - -export const NavMenuSubItem: FunctionComponent = ({ - style, - active, - className, - titleLink, - testID = 'nav-menu--link-item', -}) => { - const titleClass = classnames('cf-nav--sub-item', { - active, - [`${className}`]: className, - }) - - return titleLink(titleClass, testID, style) -} - -NavMenuSubItem.displayName = 'NavMenuSubItem' diff --git a/src/Components/NavMenu/index.tsx b/src/Components/NavMenu/index.tsx deleted file mode 100644 index e31cc6db..00000000 --- a/src/Components/NavMenu/index.tsx +++ /dev/null @@ -1,23 +0,0 @@ -// Libraries -import React, {Component} from 'react' - -// Components -import {NavMenuRoot, NavMenuProps} from './NavMenu' -import {NavMenuItem} from './NavMenuItem' -import {NavMenuSubItem} from './NavMenuSubItem' - -export class NavMenu extends Component { - public static readonly displayName = 'NavMenu' - - public static NavMenu = NavMenuRoot - public static Item = NavMenuItem - public static SubItem = NavMenuSubItem - - render() { - return - } -} - -export {NavMenuProps, NavMenuRef} from './NavMenu' -export * from './NavMenuItem' -export * from './NavMenuSubItem' diff --git a/src/Components/Notification/Documentation/Notification.stories.tsx b/src/Components/Notification/Documentation/Notification.stories.tsx index 6f10a46d..644b70df 100644 --- a/src/Components/Notification/Documentation/Notification.stories.tsx +++ b/src/Components/Notification/Documentation/Notification.stories.tsx @@ -10,7 +10,6 @@ import { text, select, boolean, - color, number, object, } from '@storybook/addon-knobs' @@ -31,7 +30,6 @@ import {Notification, NotificationDialog, NotificationDialogRef} from '../index' import { IconFont, Gradients, - InfluxColors, Alignment, VerticalAlignment, ComponentSize, @@ -231,7 +229,6 @@ notificationStories.add( id={notification.id} visible={notification.visible} icon={notification.icon} - gradient={notification.gradient} onDismiss={handleDismiss} size={ComponentSize.Small} horizontalAlignment={notification.horizontalAlign} @@ -285,15 +282,6 @@ notificationStories.add( ) ] } - gradient={ - Gradients[ - select( - 'gradient', - {None: 'none', ...mapEnumKeys(Gradients)}, - 'GarageBand' - ) - ] - } color={ ComponentColor[ select( @@ -303,7 +291,6 @@ notificationStories.add( ) ] } - backgroundColor={color('backgroundColor', `${InfluxColors.Castle}`)} onDismiss={boolean('dismissable', true) ? handleClose : undefined} > {text('text', 'Congrats! The thing has happened!')} diff --git a/src/Components/Notification/Notification.scss b/src/Components/Notification/Notification.scss index 9fb4c141..76d29769 100644 --- a/src/Components/Notification/Notification.scss +++ b/src/Components/Notification/Notification.scss @@ -9,12 +9,11 @@ $cf-notification-screen-margin: $cf-space-s; .cf-notification { margin-bottom: $cf-space-3xs; - color: $g18-cloud; + color: $cf-white; display: inline-flex; justify-content: space-between; align-items: center; - border-radius: $cf-radius; - font-weight: $cf-font-weight--medium; + border-radius: $cf-radius * 2; .cf-notification--contents { display: inline-flex; @@ -30,7 +29,7 @@ $cf-notification-screen-margin: $cf-space-s; } .cf-notification--icon { - font-size: 1.125em; + font-size: 1.5em; margin-right: $cf-space-s; display: inline-flex; flex-shrink: 0; @@ -44,8 +43,8 @@ $cf-notification-screen-margin: $cf-space-s; background-color: transparent; background-image: none; border: none; - color: $g18-cloud; - opacity: 0.6; + color: $cf-white; + font-size: 1.5em; transition: opacity $cf-transition-default, transform $cf-transition-default; &:active, @@ -145,17 +144,17 @@ $cf-notification-screen-margin: $cf-space-s; */ .cf-notification__dark-text { - color: rgba($g2-kevlar, 0.85); + color: $cf-grey-1; .cf-notification--dismiss { - color: rgba($g2-kevlar, 0.85); + color: $cf-grey-1; } } .cf-notification__light-text { - color: rgba($g20-white, 0.85); + color: $cf-white; .cf-notification--dismiss { - color: rgba($g20-white, 0.85); + color: $cf-white; } } diff --git a/src/Components/Notification/Notification.tsx b/src/Components/Notification/Notification.tsx index 1c57470c..621096ca 100644 --- a/src/Components/Notification/Notification.tsx +++ b/src/Components/Notification/Notification.tsx @@ -7,12 +7,7 @@ import * as easings from 'd3-ease' import {NotificationDialog} from './NotificationDialog' // Types -import { - Alignment, - InfluxColors, - VerticalAlignment, - ComponentSize, -} from '../../Types' +import {Alignment, VerticalAlignment, ComponentSize} from '../../Types' import { NotificationDialogProps, NotificationDialogRef, @@ -52,11 +47,9 @@ export const NotificationRoot = forwardRef( visible = true, duration = Infinity, children, - gradient, onDismiss, className, onTimeout, - backgroundColor = InfluxColors.Castle, verticalAlignment = VerticalAlignment.Top, horizontalAlignment = Alignment.Right, }, @@ -115,10 +108,8 @@ export const NotificationRoot = forwardRef( visible && (props => (