From bab941f8818897a6c862088b24df367dc07e6b16 Mon Sep 17 00:00:00 2001 From: Chitlange Sahas Date: Wed, 5 Oct 2022 23:12:12 -0700 Subject: [PATCH 01/17] feat(Accordion): Accordion Changes (#859) 1. Colors and Icon placement 2. Fixed the icon bug for when accordion opens/closes (it didn't change icons) 3. Updated storybook --- src/Components/Accordion/Accordion.scss | 11 +++-- src/Components/Accordion/Accordion.tsx | 14 +----- src/Components/Accordion/AccordionHeader.tsx | 29 ++++--------- .../Documentation/Accordion.stories.tsx | 43 ++++++++----------- src/Styles/variables.scss | 27 ++++++++++++ 5 files changed, 62 insertions(+), 62 deletions(-) diff --git a/src/Components/Accordion/Accordion.scss b/src/Components/Accordion/Accordion.scss index 3c555c66..aa464684 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-martinique; } } 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/Styles/variables.scss b/src/Styles/variables.scss index a57f85e6..990840a3 100644 --- a/src/Styles/variables.scss +++ b/src/Styles/variables.scss @@ -3,6 +3,33 @@ ----------------------------------------------------------------------------- */ +// New Greys +$cf-grey-1: #0e101f; +$cf-grey-2: #1a1c2b; +$cf-grey-3: #232533; +$cf-grey-4: #4b4f62; +$cf-grey-5: #88889b; +$cf-grey-6: #c2c5db; +$cf-white: #ffffff; + +// Brand Colors +$cf-turquoise: #5ee4e4; +$cf-lavender: #c77bea; +$cf-hot-pink: #f863b0; +$cf-chartreuse: #d6f622; + +// Utility Colors +$cf-lime-green: #51d91c; +$cf-carnation: #e65b5b; + +// Background Colors +$cf-elephant: #1e3a46; +$cf-martinique: #332548; +$cf-voodoo: #482543; +$cf-verdun-green: #546120; +$cf-seaweed: #1b381f; +$cf-thunder: #311c29; + // Greys $cf-grey-5: #07070e; $cf-grey-15: #1a1a2a; From 1bb40f1da2fc29703173b0f084c5d1beb612ebd8 Mon Sep 17 00:00:00 2001 From: Chitlange Sahas Date: Thu, 6 Oct 2022 09:30:13 -0700 Subject: [PATCH 02/17] feat(ButtonBase): clockface 4 colors (#861) --- src/Components/Button/Button.scss | 8 ++++++-- src/Components/Button/Composed/DismissButton.scss | 2 +- src/Components/Button/Composed/LinkButton.scss | 5 +++++ src/Styles/variables.scss | 6 +++--- 4 files changed, 15 insertions(+), 6 deletions(-) diff --git a/src/Components/Button/Button.scss b/src/Components/Button/Button.scss index 12a9298a..6a5d64f2 100644 --- a/src/Components/Button/Button.scss +++ b/src/Components/Button/Button.scss @@ -222,7 +222,7 @@ .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 +237,11 @@ .cf-button-warning, .cf-button-danger { - @include buttonColorModifier($c-ruby, $c-topaz, $cf-white, $cf-white); + @include buttonColorModifier($cf-carnation, $cf-carnation, $cf-grey-1, $cf-grey-1); + + &:focus{ + @include focus-shadow($cf-carnation) + } } .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/Styles/variables.scss b/src/Styles/variables.scss index 990840a3..7bea2a95 100644 --- a/src/Styles/variables.scss +++ b/src/Styles/variables.scss @@ -289,7 +289,7 @@ $cf-form-lg-font: #{var(--step-1)}; ----------------------------------------------------------------------------- */ -$cf-button-default-bg: $cf-grey-25; +$cf-button-default-bg: $cf-grey-3; /* Empty State @@ -630,11 +630,11 @@ $cf-scrollbar-offset: 3px; @mixin panel-shadow { box-shadow: 0 1px 4px 1px rgba($g0-obsidian, 0.2); } -@mixin focus-shadow($color: $c-pool) { +@mixin focus-shadow($color: $cf-turquoise) { box-shadow: inset 0 0 0 $cf-border rgba($color, 0.75), 0px 0px ($cf-border * 2) $color; } -@mixin focus-glow($color: $c-pool) { +@mixin focus-glow($color: $cf-turquoise) { box-shadow: 0px 0px ($cf-border * 2) $color; } From 0c4cb934e75f228525e02633df2ebd7fcae73465 Mon Sep 17 00:00:00 2001 From: Chitlange Sahas Date: Wed, 19 Oct 2022 09:39:27 -0700 Subject: [PATCH 03/17] feat(Dropdowns): Clockface 4 dropdown updates (#876) --- src/Components/Button/Button.scss | 18 ++++++++++++++---- src/Components/Dropdowns/Dropdown.scss | 20 +++++++++++++++++--- src/Components/Dropdowns/DropdownMenu.tsx | 2 -- src/Components/Inputs/Input.scss | 1 + src/Styles/variables.scss | 4 ++-- 5 files changed, 34 insertions(+), 11 deletions(-) diff --git a/src/Components/Button/Button.scss b/src/Components/Button/Button.scss index 6a5d64f2..c7d96484 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($cf-turquoise, $cf-turquoise, $cf-grey-1, $cf-grey-1); + @include buttonColorModifier( + $cf-turquoise, + $cf-turquoise, + $cf-grey-1, + $cf-grey-1 + ); } .cf-button-tertiary { @@ -237,10 +242,15 @@ .cf-button-warning, .cf-button-danger { - @include buttonColorModifier($cf-carnation, $cf-carnation, $cf-grey-1, $cf-grey-1); + @include buttonColorModifier( + $cf-carnation, + $cf-carnation, + $cf-grey-1, + $cf-grey-1 + ); - &:focus{ - @include focus-shadow($cf-carnation) + &:focus { + @include focus-shadow($cf-carnation); } } diff --git a/src/Components/Dropdowns/Dropdown.scss b/src/Components/Dropdowns/Dropdown.scss index 57f78e85..d3d5a29e 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: $cf-martinique; + border: 1px $cf-lavender solid; + 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/Inputs/Input.scss b/src/Components/Inputs/Input.scss index a1d77166..01fd292a 100644 --- a/src/Components/Inputs/Input.scss +++ b/src/Components/Inputs/Input.scss @@ -133,6 +133,7 @@ alternate css for the other sizes */ &:before, &:after { width: $cf-form-sm-font; + background: $cf-input-text--default; } } } diff --git a/src/Styles/variables.scss b/src/Styles/variables.scss index 7bea2a95..2e316d96 100644 --- a/src/Styles/variables.scss +++ b/src/Styles/variables.scss @@ -330,8 +330,8 @@ $cf-input-text--focused: $cf-white; $cf-input-text--hover: $cf-white; $cf-input-text--disabled: $cf-empty-state-text; -$cf-input-border--default: $g5-pepper; -$cf-input-border--focused: rgba($c-pool, 0.75); +$cf-input-border--default: $cf-grey-4; +$cf-input-border--focused: rgba($cf-turquoise, 0.75); $cf-input-border--hover: $g5-pepper; $cf-input-border--disabled: $g4-onyx; From f63c03cd77ca690e09749750094d4391d1ffeac7 Mon Sep 17 00:00:00 2001 From: ChitlangeSahas Date: Wed, 19 Oct 2022 09:56:44 -0700 Subject: [PATCH 04/17] fix: dropdown blur (glass morphism) --- src/Styles/variables.scss | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/Styles/variables.scss b/src/Styles/variables.scss index 2e316d96..1cbbda67 100644 --- a/src/Styles/variables.scss +++ b/src/Styles/variables.scss @@ -650,12 +650,12 @@ $cf-scrollbar-offset: 3px; // Blur %backdrop-blur { - -webkit-backdrop-filter: blur(28px); - backdrop-filter: blur(28px); + -webkit-backdrop-filter: blur(15px); + backdrop-filter: blur(15px); } %backdrop-bg { - background-color: rgba($cf-grey-15, 0.9); + background-color: rgba(26, 28, 43, 0.7); @supports ( (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) From 0b7d3d7c6688f59068d7b390bfa907e7509ddb76 Mon Sep 17 00:00:00 2001 From: Chitlange Sahas Date: Wed, 19 Oct 2022 10:01:20 -0700 Subject: [PATCH 05/17] feat(EmptyState): Clockface 4 Updates (#878) --- src/Styles/variables.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/Styles/variables.scss b/src/Styles/variables.scss index 1cbbda67..5babf9eb 100644 --- a/src/Styles/variables.scss +++ b/src/Styles/variables.scss @@ -296,8 +296,8 @@ $cf-button-default-bg: $cf-grey-3; ----------------------------------------------------------------------------- */ -$cf-empty-state-text: $cf-grey-55; -$cf-empty-state-highlight: $cf-grey-95; +$cf-empty-state-text: #88889b; +$cf-empty-state-highlight: $cf-white; /* Animations From 5d7a96c095e757156120ae6f3e1195ddee518021 Mon Sep 17 00:00:00 2001 From: Chitlange Sahas Date: Wed, 26 Oct 2022 14:21:42 -0700 Subject: [PATCH 06/17] feat(inputs): clockface 4 updates (#880) --- src/Components/Dropdowns/Dropdown.scss | 2 +- src/Components/Inputs/Composed/RangeSlider.scss | 2 +- src/Components/Inputs/Input.scss | 8 +------- src/Components/Inputs/StatusIndicator.scss | 2 +- src/Components/Inputs/Toggle.scss | 3 ++- src/Components/SlideToggle/SlideToggle.scss | 7 +++---- src/Styles/variables.scss | 10 ++++++---- src/Types/index.tsx | 1 + src/Utils/index.ts | 2 +- 9 files changed, 17 insertions(+), 20 deletions(-) diff --git a/src/Components/Dropdowns/Dropdown.scss b/src/Components/Dropdowns/Dropdown.scss index d3d5a29e..7646547f 100644 --- a/src/Components/Dropdowns/Dropdown.scss +++ b/src/Components/Dropdowns/Dropdown.scss @@ -304,7 +304,7 @@ $dropdown-item--padding-v: $cf-space-2xs; } .cf-dropdown-item.active:not(.cf-dropdown-item__disabled) { - background-color: $cf-martinique; + background-color: #2A2649; border: 1px $cf-lavender solid; border-radius: $cf-border; } diff --git a/src/Components/Inputs/Composed/RangeSlider.scss b/src/Components/Inputs/Composed/RangeSlider.scss index d247a417..3c53b3f9 100644 --- a/src/Components/Inputs/Composed/RangeSlider.scss +++ b/src/Components/Inputs/Composed/RangeSlider.scss @@ -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 01fd292a..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; @@ -193,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..b690c3ab 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/SlideToggle/SlideToggle.scss b/src/Components/SlideToggle/SlideToggle.scss index 362e7848..42acfd2b 100644 --- a/src/Components/SlideToggle/SlideToggle.scss +++ b/src/Components/SlideToggle/SlideToggle.scss @@ -45,8 +45,6 @@ $slide-toggle--gap: 3px; transform $cf-transition-default; transform: translate(0, -50%); border-radius: 50%; - box-shadow: 0 0 $slide-toggle--gap ($slide-toggle--gap * 0.5) - rgba($cf-grey-5, 0.25); background-color: $cf-grey-75; left: 10%; @@ -62,6 +60,7 @@ $slide-toggle--gap: 3px; .cf-slide-toggle.active .cf-slide-toggle--knob { transform: translate(100%, -50%); background-color: $cf-white; + outline: rgba(0,0,0, 0.2) solid 1px; } /* @@ -123,7 +122,7 @@ $slide-toggle--gap: 3px; .cf-slide-toggle { &.cf-slide-toggle-default, &.cf-slide-toggle-primary { - @include slideToggleColorModifier($c-pool); + @include slideToggleColorModifier($cf-lavender); } &.cf-slide-toggle-secondary { @include slideToggleColorModifier($c-star); @@ -132,7 +131,7 @@ $slide-toggle--gap: 3px; @include slideToggleColorModifier($c-rainforest); } &.cf-slide-toggle-danger { - @include slideToggleColorModifier($c-curacao); + @include slideToggleColorModifier($cf-carnation); } &.cf-slide-toggle-warning { @include slideToggleColorModifier($c-pineapple); diff --git a/src/Styles/variables.scss b/src/Styles/variables.scss index 5babf9eb..ef495885 100644 --- a/src/Styles/variables.scss +++ b/src/Styles/variables.scss @@ -14,10 +14,12 @@ $cf-white: #ffffff; // Brand Colors $cf-turquoise: #5ee4e4; -$cf-lavender: #c77bea; +$cf-lavender: #9394FF; $cf-hot-pink: #f863b0; $cf-chartreuse: #d6f622; +$cf-green: #53E51A; + // Utility Colors $cf-lime-green: #51d91c; $cf-carnation: #e65b5b; @@ -335,9 +337,9 @@ $cf-input-border--focused: rgba($cf-turquoise, 0.75); $cf-input-border--hover: $g5-pepper; $cf-input-border--disabled: $g4-onyx; -$cf-input-border--error: $c-fire; -$cf-input-border--error-hover: $c-fire; -$cf-input-border--error-focused: $c-fire; +$cf-input-border--error: $cf-carnation; +$cf-input-border--error-hover: $cf-carnation; +$cf-input-border--error-focused: $cf-carnation; $cf-input--field-z: 1; $cf-input--shadow-z: $cf-input--field-z + 1; diff --git a/src/Types/index.tsx b/src/Types/index.tsx index 7c996147..a8fef6bb 100644 --- a/src/Types/index.tsx +++ b/src/Types/index.tsx @@ -179,6 +179,7 @@ export enum ButtonType { } export enum InfluxColors { + Lavender = '#9394FF', // Grey Grey5 = '#07070e', Grey15 = '#1a1a2a', diff --git a/src/Utils/index.ts b/src/Utils/index.ts index e8bef3b3..569c1ac5 100644 --- a/src/Utils/index.ts +++ b/src/Utils/index.ts @@ -170,7 +170,7 @@ export const generateRangeSliderTrackFillStyle = ( const fillColor = { default: InfluxColors.Graphite, - primary: InfluxColors.Pool, + primary: InfluxColors.Lavender, secondary: InfluxColors.Star, success: InfluxColors.Rainforest, warning: InfluxColors.Pineapple, From 29e4b34a30669f6688130ed59beb2f7602601a6f Mon Sep 17 00:00:00 2001 From: ChitlangeSahas Date: Wed, 2 Nov 2022 14:01:35 -0700 Subject: [PATCH 07/17] chore: master merge --- CHANGELOG.md | 6 +- package.json | 2 +- .../Composed/MultiSelectDropdown.tsx | 107 +++++++++++++----- .../Documentation/Dropdowns.stories.tsx | 5 + 4 files changed, 92 insertions(+), 28 deletions(-) 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/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' + )} />
From bdddfb669724f765d919f0d32775807c3a41424c Mon Sep 17 00:00:00 2001 From: Chitlange Sahas Date: Thu, 3 Nov 2022 14:40:47 -0700 Subject: [PATCH 08/17] chore: remove unused clockface color variables (#886) --- src/Styles/variables.scss | 16 ---------------- 1 file changed, 16 deletions(-) diff --git a/src/Styles/variables.scss b/src/Styles/variables.scss index ef495885..f6edf65e 100644 --- a/src/Styles/variables.scss +++ b/src/Styles/variables.scss @@ -25,12 +25,7 @@ $cf-lime-green: #51d91c; $cf-carnation: #e65b5b; // Background Colors -$cf-elephant: #1e3a46; $cf-martinique: #332548; -$cf-voodoo: #482543; -$cf-verdun-green: #546120; -$cf-seaweed: #1b381f; -$cf-thunder: #311c29; // Greys $cf-grey-5: #07070e; @@ -69,14 +64,12 @@ $g19-ghost: $cf-grey-95; $g20-white: $cf-white; // Reds -$c-basalt: #2f1f29; $c-ruby: #bf3d5e; $c-fire: #dc4e58; $c-curacao: #f95f53; $c-dreamsicle: #ff8564; $c-tungsten: #ffb6a0; $c-marmelade: #ffdccf; -$c-flan: #fff7f4; // Blues $c-abyss: #120653; @@ -96,34 +89,25 @@ $c-star: #be2ee4; $c-comet: #ce58eb; $c-potassium: #dd84f1; $c-moonstone: #ebadf8; -$c-twilight: #fad9ff; // Greens -$c-gypsy: #003e34; $c-emerald: #006f49; $c-viridian: #009f5f; $c-rainforest: #2fa74d; $c-honeydew: #67d74e; $c-krypton: #9bf445; $c-wasabi: #c6f98e; -$c-mint: #f3ffd6; // Yellows -$c-oak: #3f241f; -$c-topaz: #e85b1c; $c-tiger: #f48d38; $c-pineapple: #ffb94a; $c-thunder: #ffd255; $c-sulfur: #ffe480; $c-daisy: #fff6b8; -$c-banana: #fffdde; // Marketing Brand Colors -$c-chartreuse: #d6f622; $c-magenta: #bf2fe5; -$c-deeppurple: #13002d; $c-galaxy: #9394ff; -$c-pulsar: #513cc6; /* State change variables From 04cd1abbc74dfbfadbe03375ebf248bf2b29f971 Mon Sep 17 00:00:00 2001 From: Chitlange Sahas Date: Fri, 4 Nov 2022 09:55:29 -0700 Subject: [PATCH 09/17] feat(Clockface 4): labels (#887) --- src/Components/Accordion/Accordion.scss | 2 +- src/Components/Button/Button.scss | 9 ++----- src/Components/Dropdowns/Dropdown.scss | 2 +- .../Inputs/Composed/RangeSlider.scss | 4 +-- src/Components/Inputs/Toggle.scss | 2 +- src/Components/SlideToggle/SlideToggle.scss | 4 +-- src/Styles/variables.scss | 25 +++++++++++-------- src/Types/index.tsx | 1 + src/Utils/index.ts | 2 +- 9 files changed, 25 insertions(+), 26 deletions(-) diff --git a/src/Components/Accordion/Accordion.scss b/src/Components/Accordion/Accordion.scss index aa464684..af04faf5 100644 --- a/src/Components/Accordion/Accordion.scss +++ b/src/Components/Accordion/Accordion.scss @@ -122,7 +122,7 @@ border-radius: 0px; &:hover { - background-color: $cf-martinique; + background-color: $cf-dark-lavender; } } diff --git a/src/Components/Button/Button.scss b/src/Components/Button/Button.scss index c7d96484..0a765c5f 100644 --- a/src/Components/Button/Button.scss +++ b/src/Components/Button/Button.scss @@ -242,15 +242,10 @@ .cf-button-warning, .cf-button-danger { - @include buttonColorModifier( - $cf-carnation, - $cf-carnation, - $cf-grey-1, - $cf-grey-1 - ); + @include buttonColorModifier($cf-red, $cf-red, $cf-grey-1, $cf-grey-1); &:focus { - @include focus-shadow($cf-carnation); + @include focus-shadow($cf-red); } } diff --git a/src/Components/Dropdowns/Dropdown.scss b/src/Components/Dropdowns/Dropdown.scss index 7646547f..ff50f89d 100644 --- a/src/Components/Dropdowns/Dropdown.scss +++ b/src/Components/Dropdowns/Dropdown.scss @@ -304,7 +304,7 @@ $dropdown-item--padding-v: $cf-space-2xs; } .cf-dropdown-item.active:not(.cf-dropdown-item__disabled) { - background-color: #2A2649; + background-color: #2a2649; border: 1px $cf-lavender solid; border-radius: $cf-border; } diff --git a/src/Components/Inputs/Composed/RangeSlider.scss b/src/Components/Inputs/Composed/RangeSlider.scss index 3c53b3f9..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 { diff --git a/src/Components/Inputs/Toggle.scss b/src/Components/Inputs/Toggle.scss index b690c3ab..60c127bd 100644 --- a/src/Components/Inputs/Toggle.scss +++ b/src/Components/Inputs/Toggle.scss @@ -103,7 +103,7 @@ width: 100%; height: 100%; transform: translate(-50%, -50%) scale(0.333); - outline: rgba(0,0,0, 0.2) solid 1px; + outline: rgba(0, 0, 0, 0.2) solid 1px; } .cf-toggle--icon { diff --git a/src/Components/SlideToggle/SlideToggle.scss b/src/Components/SlideToggle/SlideToggle.scss index 42acfd2b..3b6e3e5f 100644 --- a/src/Components/SlideToggle/SlideToggle.scss +++ b/src/Components/SlideToggle/SlideToggle.scss @@ -60,7 +60,7 @@ $slide-toggle--gap: 3px; .cf-slide-toggle.active .cf-slide-toggle--knob { transform: translate(100%, -50%); background-color: $cf-white; - outline: rgba(0,0,0, 0.2) solid 1px; + outline: rgba(0, 0, 0, 0.2) solid 1px; } /* @@ -131,7 +131,7 @@ $slide-toggle--gap: 3px; @include slideToggleColorModifier($c-rainforest); } &.cf-slide-toggle-danger { - @include slideToggleColorModifier($cf-carnation); + @include slideToggleColorModifier($cf-red); } &.cf-slide-toggle-warning { @include slideToggleColorModifier($c-pineapple); diff --git a/src/Styles/variables.scss b/src/Styles/variables.scss index f6edf65e..a4abf7b5 100644 --- a/src/Styles/variables.scss +++ b/src/Styles/variables.scss @@ -3,7 +3,7 @@ ----------------------------------------------------------------------------- */ -// New Greys +// Greys $cf-grey-1: #0e101f; $cf-grey-2: #1a1c2b; $cf-grey-3: #232533; @@ -14,18 +14,21 @@ $cf-white: #ffffff; // Brand Colors $cf-turquoise: #5ee4e4; -$cf-lavender: #9394FF; -$cf-hot-pink: #f863b0; +$cf-lavender: #9394ff; +$cf-pink: #f863b0; $cf-chartreuse: #d6f622; -$cf-green: #53E51A; +$cf-dark-turquoise: #1e3a46; +$cf-dark-lavender: #2a2649; +$cf-dark-pink: #482543; +$cf-dark-chartreuse: #546120; // Utility Colors -$cf-lime-green: #51d91c; -$cf-carnation: #e65b5b; +$cf-green: #53e51a; +$cf-red: #e65b5b; -// Background Colors -$cf-martinique: #332548; +$cf-dark-green: #1b381f; +$cf-dark-red: #311c29; // Greys $cf-grey-5: #07070e; @@ -321,9 +324,9 @@ $cf-input-border--focused: rgba($cf-turquoise, 0.75); $cf-input-border--hover: $g5-pepper; $cf-input-border--disabled: $g4-onyx; -$cf-input-border--error: $cf-carnation; -$cf-input-border--error-hover: $cf-carnation; -$cf-input-border--error-focused: $cf-carnation; +$cf-input-border--error: $cf-red; +$cf-input-border--error-hover: $cf-red; +$cf-input-border--error-focused: $cf-red; $cf-input--field-z: 1; $cf-input--shadow-z: $cf-input--field-z + 1; diff --git a/src/Types/index.tsx b/src/Types/index.tsx index a8fef6bb..b3718168 100644 --- a/src/Types/index.tsx +++ b/src/Types/index.tsx @@ -180,6 +180,7 @@ export enum ButtonType { export enum InfluxColors { Lavender = '#9394FF', + Grey1 = '#0e101f', // Grey Grey5 = '#07070e', Grey15 = '#1a1a2a', diff --git a/src/Utils/index.ts b/src/Utils/index.ts index 569c1ac5..0a893925 100644 --- a/src/Utils/index.ts +++ b/src/Utils/index.ts @@ -119,7 +119,7 @@ export const generateLabelStyle = ( const color = calculateTextColorFromBackground(labelColor) === 'dark' - ? InfluxColors.Kevlar + ? InfluxColors.Grey1 : InfluxColors.White return { From 2899a5a0030e9adf6609b493c2196b1e45b66bae Mon Sep 17 00:00:00 2001 From: Chitlange Sahas Date: Fri, 4 Nov 2022 10:42:44 -0700 Subject: [PATCH 10/17] feat(Clockface 4): List (#889) --- src/Components/Dropdowns/Dropdown.scss | 2 +- src/Components/List/List.scss | 11 +++++++---- src/Components/List/ListIndicator.scss | 10 +++++----- src/Styles/variables.scss | 5 +++++ 4 files changed, 18 insertions(+), 10 deletions(-) diff --git a/src/Components/Dropdowns/Dropdown.scss b/src/Components/Dropdowns/Dropdown.scss index ff50f89d..36d31ffa 100644 --- a/src/Components/Dropdowns/Dropdown.scss +++ b/src/Components/Dropdowns/Dropdown.scss @@ -305,7 +305,7 @@ $dropdown-item--padding-v: $cf-space-2xs; .cf-dropdown-item.active:not(.cf-dropdown-item__disabled) { background-color: #2a2649; - border: 1px $cf-lavender solid; + border: $cf-item-selected-border; border-radius: $cf-border; } } 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/Styles/variables.scss b/src/Styles/variables.scss index a4abf7b5..61c9d60d 100644 --- a/src/Styles/variables.scss +++ b/src/Styles/variables.scss @@ -112,6 +112,11 @@ $c-daisy: #fff6b8; $c-magenta: #bf2fe5; $c-galaxy: #9394ff; +/* + List item variables +*/ +$cf-item-selected-border: 1px $cf-lavender solid; + /* State change variables */ From 4316a612c9f37f461c8355b24cafbc0c7f482852 Mon Sep 17 00:00:00 2001 From: Chitlange Sahas Date: Fri, 4 Nov 2022 11:06:17 -0700 Subject: [PATCH 11/17] chore(Clockface 4): delete unused NavMenu (#890) --- .../Documentation/AppWrapper.stories.tsx | 449 +----------------- .../NavMenu/Documentation/NavMenu.md | 36 -- .../NavMenu/Documentation/NavMenu.stories.tsx | 247 ---------- .../NavMenu/Documentation/NavMenuItem.md | 49 -- .../NavMenu/Documentation/NavMenuSubItem.md | 39 -- src/Components/NavMenu/NavMenu.scss | 419 ---------------- src/Components/NavMenu/NavMenu.tsx | 57 --- src/Components/NavMenu/NavMenuItem.tsx | 56 --- src/Components/NavMenu/NavMenuSubItem.tsx | 34 -- src/Components/NavMenu/index.tsx | 23 - src/index.ts | 1 - 11 files changed, 2 insertions(+), 1408 deletions(-) delete mode 100644 src/Components/NavMenu/Documentation/NavMenu.md delete mode 100644 src/Components/NavMenu/Documentation/NavMenu.stories.tsx delete mode 100644 src/Components/NavMenu/Documentation/NavMenuItem.md delete mode 100644 src/Components/NavMenu/Documentation/NavMenuSubItem.md delete mode 100644 src/Components/NavMenu/NavMenu.scss delete mode 100644 src/Components/NavMenu/NavMenu.tsx delete mode 100644 src/Components/NavMenu/NavMenuItem.tsx delete mode 100644 src/Components/NavMenu/NavMenuSubItem.tsx delete mode 100644 src/Components/NavMenu/index.tsx 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/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/index.ts b/src/index.ts index 7b5e9a47..eb3b2299 100644 --- a/src/index.ts +++ b/src/index.ts @@ -35,7 +35,6 @@ export * from './Components/Icon/index' export * from './Components/IndexList/index' export * from './Components/Inputs/index' export * from './Components/Label/index' -export * from './Components/NavMenu/index' export * from './Components/Notification/index' export * from './Components/Overlay/index' export * from './Components/List/index' From d83a42875a850dd6f35f632097f203c87e9e6167 Mon Sep 17 00:00:00 2001 From: Chitlange Sahas Date: Fri, 4 Nov 2022 12:20:42 -0700 Subject: [PATCH 12/17] feat(Clockface 4): TreeNav updates (#891) --- src/Components/TreeNav/TreeNav.scss | 48 ++++++++++------------------- 1 file changed, 17 insertions(+), 31 deletions(-) diff --git a/src/Components/TreeNav/TreeNav.scss b/src/Components/TreeNav/TreeNav.scss index 4bc899d0..c1693ec9 100644 --- a/src/Components/TreeNav/TreeNav.scss +++ b/src/Components/TreeNav/TreeNav.scss @@ -8,13 +8,7 @@ .cf-tree-nav { width: 100%; user-select: none; - background-image: linear-gradient( - 13.54deg, - rgba($c-pool, 0.1) 36.27%, - rgba($c-pool, 0.25) 78.76%, - rgba($c-pool, 0.15) 100% - ); - background-color: $cf-grey-5; + background-color: $cf-grey-1; a, a:link, @@ -44,13 +38,7 @@ $cf-tree-nav__header-height: 60px; display: flex; flex-direction: column; align-items: stretch; - background-image: linear-gradient( - 13.54deg, - rgba($c-pool, 0.1) 36.27%, - rgba($c-pool, 0.25) 78.76%, - rgba($c-pool, 0.15) 100% - ); - background-color: $cf-grey-5; + background-color: $cf-grey-1; padding: $cf-space-xs $cf-space-2xs; } @@ -203,7 +191,7 @@ a.cf-tree-nav--header:active { .cf-tree-nav--header { color: $cf-white; - background: rgba($cf-grey-95, 0.05); + background: $cf-grey-2; &:after { @include createOverlayBase(); @@ -239,16 +227,20 @@ a.cf-tree-nav--header:active { outline: none; } - &:after { - @include createOverlayBase(); - background: linear-gradient(0deg, rgba($c-pool, 0.05), rgba($c-pool, 0.05)), - rgba($cf-grey-95, 0.05); + &.cf-tree-nav--item__active { + background-color: $cf-dark-lavender; + + .cf-tree-nav--label, + .cf-tree-nav--square { + color: $cf-lavender; + } + .cf-tree-nav--sub-menu { + background-color: $cf-grey-2; + } } - .cf-tree-nav:not(.cf-tree-nav__collapsed) &.cf-tree-nav--item__active:after, - &:hover:after, - &:focus-within:after { - opacity: 1; + &:hover:not(.cf-tree-nav--item__active) { + background-color: $cf-grey-3; } } @@ -363,7 +355,7 @@ a.cf-tree-nav--item-block:active { &.cf-tree-nav--sub-item__active, &:not(.cf-tree-nav--sub-heading):hover { - background: rgba($cf-grey-95, $cf-hover-active-opacity); + background: rgba($cf-grey-4, 0.5); border-radius: $cf-radius; cursor: pointer; } @@ -583,13 +575,7 @@ a.cf-tree-nav--user-item:hover { position: relative; transition: flex-basis $cf-transition-default; z-index: $cf-z--nav-menu; - background-image: linear-gradient( - 13.54deg, - rgba($c-pool, 0.1) 36.27%, - rgba($c-pool, 0.25) 78.76%, - rgba($c-pool, 0.15) 100% - ); - background-color: $cf-grey-5; + background-color: $cf-grey-1; } .cf-tree-nav--menu, From dfe6a24aa3e6ee397790d6b2a252809b664bebcc Mon Sep 17 00:00:00 2001 From: Chitlange Sahas Date: Fri, 4 Nov 2022 15:08:58 -0700 Subject: [PATCH 13/17] feat(Clockface 4): Notifications (#892) --- .../Documentation/FunnelPage.stories.tsx | 2 - .../Documentation/Notification.stories.tsx | 13 ---- src/Components/Notification/Notification.scss | 19 +++--- src/Components/Notification/Notification.tsx | 11 +--- .../Notification/NotificationDialog.tsx | 60 +++++++++---------- src/Sandbox/Portals.stories.tsx | 9 +-- src/Types/index.tsx | 20 ++++++- 7 files changed, 57 insertions(+), 77 deletions(-) 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/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 => (