From 901b4a1a9b4ec83cbcc3d586974e8a334b01a33d Mon Sep 17 00:00:00 2001 From: Monalisha Mishra Date: Fri, 26 Jul 2024 16:06:52 +0530 Subject: [PATCH 1/6] added loading colour --- src/blocks/button/Button.tsx | 8 +++++++- src/blocks/button/Button.utils.ts | 8 +++++--- src/blocks/theme/semantics/semantics.button.ts | 6 ++++++ src/modules/dashboard/Dashboard.tsx | 8 +++++++- 4 files changed, 25 insertions(+), 5 deletions(-) diff --git a/src/blocks/button/Button.tsx b/src/blocks/button/Button.tsx index 623c096a99..81bc406a64 100644 --- a/src/blocks/button/Button.tsx +++ b/src/blocks/button/Button.tsx @@ -26,6 +26,8 @@ export type ButtonProps = { variant?: ButtonVariant; /* Button takes the full width if enabled */ block?: boolean; + /* Button loading state */ + loading?: boolean; } & TransformedHTMLAttributes; const StyledButton = styled.button` @@ -46,7 +48,9 @@ const StyledButton = styled.button` } /* Button variant CSS styles */ - ${({ variant }) => getButtonVariantStyles(variant || 'primary')} + ${({ variant, loading }) => getButtonVariantStyles(variant || 'primary', loading || false)} + + ${({ loading }) => loading && 'opacity: 0.8;'} /* Button and font size CSS styles */ ${({ iconOnly, size }) => getButtonSizeStyles({ iconOnly: !!iconOnly, size: size || 'medium' })} @@ -69,6 +73,7 @@ const Button = forwardRef( size = 'medium', leadingIcon, trailingIcon, + loading = false, iconOnly, circular = false, children, @@ -81,6 +86,7 @@ const Button = forwardRef( circular={circular} disabled={disabled} iconOnly={iconOnly} + loading={loading} role="button" ref={ref} size={size} diff --git a/src/blocks/button/Button.utils.ts b/src/blocks/button/Button.utils.ts index 80d5ba91b6..b7ae0a18ce 100644 --- a/src/blocks/button/Button.utils.ts +++ b/src/blocks/button/Button.utils.ts @@ -1,13 +1,15 @@ import { FlattenSimpleInterpolation, css } from 'styled-components'; import { ButtonSize, ButtonVariant } from './Button.types'; -export const getButtonVariantStyles = (variant: ButtonVariant) => { +export const getButtonVariantStyles = (variant: ButtonVariant, loading: boolean) => { switch (variant) { case 'primary': { return ` - background-color: var(--components-button-primary-background-default); + background-color: var(--${ + loading ? 'components-button-primary-background-loading' : 'components-button-primary-background-default' + }); color: var(--components-button-primary-text-default); - + &:hover { background-color: var(--components-button-primary-background-hover) } diff --git a/src/blocks/theme/semantics/semantics.button.ts b/src/blocks/theme/semantics/semantics.button.ts index fd625cc34f..3ac4dda4e7 100644 --- a/src/blocks/theme/semantics/semantics.button.ts +++ b/src/blocks/theme/semantics/semantics.button.ts @@ -10,6 +10,7 @@ export const primaryButtonSemantics = { 'background-hover': { light: colorBrands['primary-400'], dark: colorBrands['primary-400'] }, 'background-pressed': { light: colorBrands['primary-800'], dark: colorBrands['primary-600'] }, 'background-focus': { light: colorBrands['primary-500'], dark: colorBrands['primary-400'] }, + 'background-loading': { light: colorBrands['primary-400'], dark: colorBrands['primary-400'] }, 'background-disabled': { light: surfaceSemantics['state-disabled'].light, dark: surfaceSemantics['state-disabled'].dark, @@ -29,6 +30,7 @@ export const secondaryButtonSemantics = { 'background-hover': { light: colorBrands['neutral-200'], dark: colorBrands['neutral-700'] }, 'background-pressed': { light: colorBrands['neutral-300'], dark: colorBrands['neutral-1000'] }, 'background-focus': { light: colorBrands['neutral-100'], dark: colorBrands['neutral-800'] }, + 'background-loading': { light: colorBrands['neutral-100'], dark: colorBrands['neutral-800'] }, 'background-disabled': { light: surfaceSemantics['state-disabled'].light, dark: surfaceSemantics['state-disabled'].dark, @@ -49,6 +51,7 @@ export const tertiaryButtonSemantics = { 'background-hover': { light: colorBrands['neutral-900'], dark: colorBrands['neutral-300'] }, 'background-pressed': { light: colorBrands['neutral-100'], dark: colorPrimitives['gray-1000'] }, 'background-focus': { light: colorBrands['neutral-1000'], dark: colorBrands['neutral-700'] }, + 'background-loading': { light: colorBrands['neutral-900'], dark: colorBrands['neutral-700'] }, 'background-disabled': { light: surfaceSemantics['state-disabled'].light, dark: surfaceSemantics['state-disabled'].dark, @@ -81,6 +84,7 @@ export const outlineButtonSemantics = { 'stroke-default': { light: strokeSemantics['tertiary'].light, dark: strokeSemantics['tertiary'].dark }, 'stroke-focus': { light: colorBrands['primary-300'], dark: colorBrands['primary-400'] }, + 'stroke-loading': { light: colorBrands['neutral-200'], dark: colorBrands['primary-400'] }, 'stroke-hover': { light: strokeSemantics['brand-subtle'].light, dark: strokeSemantics['secondary'].dark }, 'stroke-pressed': { light: colorBrands['neutral-600'], dark: colorBrands['neutral-300'] }, }; @@ -90,6 +94,7 @@ export const dangerButtonSemantics = { 'background-hover': { light: colorBrands['danger-500'], dark: colorBrands['danger-400'] }, 'background-pressed': { light: colorBrands['danger-800'], dark: colorBrands['danger-700'] }, 'background-focus': { light: colorBrands['danger-500'], dark: colorBrands['danger-400'] }, + 'background-loading': { light: colorBrands['danger-500'], dark: colorBrands['danger-400'] }, 'background-disabled': { light: surfaceSemantics['state-disabled'].light, dark: surfaceSemantics['state-disabled'].dark, @@ -109,6 +114,7 @@ export const dangerSecondaryButtonSemantics = { 'background-hover': { light: colorBrands['danger-100'], dark: colorBrands['danger-700'] }, 'background-pressed': { light: colorBrands['danger-500'], dark: colorBrands['danger-1000'] }, 'background-focus': { light: colorBrands['danger-100'], dark: colorBrands['danger-700'] }, + 'background-loading': { light: colorBrands['danger-100'], dark: colorBrands['danger-700'] }, 'background-disabled': { light: surfaceSemantics['state-disabled'].light, dark: surfaceSemantics['state-disabled'].dark, diff --git a/src/modules/dashboard/Dashboard.tsx b/src/modules/dashboard/Dashboard.tsx index 02c8424864..cf19f21854 100644 --- a/src/modules/dashboard/Dashboard.tsx +++ b/src/modules/dashboard/Dashboard.tsx @@ -2,7 +2,7 @@ import { FC, useState } from 'react'; // Components -import { Box } from 'blocks'; +import { Box, Button } from 'blocks'; import { DashboardSubHeader } from './components/DashboardSubHeader'; import { FeaturedChannels } from './components/FeaturedChannels'; import { ChannelVariantsSection } from './components/ChannelVariantsSection'; @@ -22,6 +22,12 @@ const Dashboard: FC = () => { height="100%" width="auto" > + + + Date: Thu, 1 Aug 2024 14:53:12 +0530 Subject: [PATCH 2/6] Update Dashboard.tsx --- src/modules/dashboard/Dashboard.tsx | 6 ------ 1 file changed, 6 deletions(-) diff --git a/src/modules/dashboard/Dashboard.tsx b/src/modules/dashboard/Dashboard.tsx index c850276270..b3f6db8f5a 100644 --- a/src/modules/dashboard/Dashboard.tsx +++ b/src/modules/dashboard/Dashboard.tsx @@ -24,12 +24,6 @@ const Dashboard: FC = () => { height="100%" width="auto" > - - - Date: Thu, 1 Aug 2024 16:46:27 +0530 Subject: [PATCH 3/6] fixed review comments --- src/blocks/button/Button.tsx | 16 ++-- src/blocks/button/Button.utils.ts | 152 ++++++++++++++++++------------ 2 files changed, 102 insertions(+), 66 deletions(-) diff --git a/src/blocks/button/Button.tsx b/src/blocks/button/Button.tsx index 1b6dbb83a2..7c18364131 100644 --- a/src/blocks/button/Button.tsx +++ b/src/blocks/button/Button.tsx @@ -47,17 +47,19 @@ const StyledButton = styled.button` align-items: center; justify-content: center; } - + [role='spinner'] { + margin: 6.667px; + } /* Button variant CSS styles */ - ${({ variant, loading }) => getButtonVariantStyles(variant || 'primary', loading || false)} + ${({ variant, loading }) => getButtonVariantStyles(variant || 'primary', loading!)} - ${({ iconOnly }) => + /* ${({ iconOnly }) => !iconOnly && `[role='spinner'] { margin-right: var(--spacing-xxxs); - };`} + };`} */ - ${({ loading }) => loading && 'opacity: 0.8;'} + ${({ loading }) => loading && 'opacity: var(--opacity-80);'} /* Button and font size CSS styles */ ${({ iconOnly, size }) => getButtonSizeStyles({ iconOnly: !!iconOnly, size: size || 'medium' })} @@ -89,9 +91,9 @@ const Button = forwardRef( ref ) => ( span { height: 16px; @@ -272,11 +298,14 @@ export const getButtonSizeStyles = ({ font-weight: 500; line-height: 16px; - [role='img'], - [role='spinner'] { + [role='img'] { width: 24px; height: 24px; } + [role='spinner'] { + width: 16px; + height: 16px; + } .icon-text > span { height: 16px; @@ -318,11 +347,14 @@ export const getButtonSizeStyles = ({ font-weight: 500; line-height: 16px; - [role='img'], - [role='spinner'] { + [role='img'] { width: 24px; height: 24px; } + [role='spinner'] { + width: 16px; + height: 16px; + } .icon-text > span { height: 24px; @@ -363,12 +395,14 @@ export const getButtonSizeStyles = ({ font-weight: 500; line-height: 16px; - [role='img'], - [role='spinner'] { + [role='img'] { width: 32px; height: 32px; } - + [role='spinner'] { + width: 21.333px; + height: 21.333px; + } .icon-text > span { height: 24px; width: 24px; From edf41b90893d1af098047e689a0a37adc7c481c7 Mon Sep 17 00:00:00 2001 From: Monalisha Mishra <42746736+mishramonalisha76@users.noreply.github.com> Date: Thu, 1 Aug 2024 16:55:44 +0530 Subject: [PATCH 4/6] Update Button.tsx --- src/blocks/button/Button.tsx | 6 ------ 1 file changed, 6 deletions(-) diff --git a/src/blocks/button/Button.tsx b/src/blocks/button/Button.tsx index 7c18364131..af7f0ca40c 100644 --- a/src/blocks/button/Button.tsx +++ b/src/blocks/button/Button.tsx @@ -53,12 +53,6 @@ const StyledButton = styled.button` /* Button variant CSS styles */ ${({ variant, loading }) => getButtonVariantStyles(variant || 'primary', loading!)} - /* ${({ iconOnly }) => - !iconOnly && - `[role='spinner'] { - margin-right: var(--spacing-xxxs); - };`} */ - ${({ loading }) => loading && 'opacity: var(--opacity-80);'} /* Button and font size CSS styles */ From 2ce385b0dd18986226238bb782aaa7f55703c559 Mon Sep 17 00:00:00 2001 From: Monalisha Mishra Date: Thu, 1 Aug 2024 18:21:31 +0530 Subject: [PATCH 5/6] fixed the spinner and button --- src/blocks/button/Button.tsx | 18 ++- src/blocks/button/Button.utils.ts | 159 +++++++++++------------- src/blocks/icons/components/Ellipse.tsx | 29 +++++ src/blocks/icons/index.ts | 2 + src/blocks/spinner/Spinner.tsx | 64 ++++------ src/blocks/spinner/Spinner.utils.ts | 8 +- 6 files changed, 139 insertions(+), 141 deletions(-) create mode 100644 src/blocks/icons/components/Ellipse.tsx diff --git a/src/blocks/button/Button.tsx b/src/blocks/button/Button.tsx index 7c18364131..ceef6f8d60 100644 --- a/src/blocks/button/Button.tsx +++ b/src/blocks/button/Button.tsx @@ -47,18 +47,9 @@ const StyledButton = styled.button` align-items: center; justify-content: center; } - [role='spinner'] { - margin: 6.667px; - } /* Button variant CSS styles */ ${({ variant, loading }) => getButtonVariantStyles(variant || 'primary', loading!)} - /* ${({ iconOnly }) => - !iconOnly && - `[role='spinner'] { - margin-right: var(--spacing-xxxs); - };`} */ - ${({ loading }) => loading && 'opacity: var(--opacity-80);'} /* Button and font size CSS styles */ @@ -74,6 +65,9 @@ const StyledButton = styled.button` ${(props) => props.css || ''} `; +const SpinnerContainer = styled.div` + padding: 5px; +`; const Button = forwardRef( ( { @@ -102,7 +96,11 @@ const Button = forwardRef( variant={variant} {...props} > - {loading && } + {loading && ( + + + + )} {leadingIcon && {leadingIcon}} {!iconOnly && children} {trailingIcon && {trailingIcon}} diff --git a/src/blocks/button/Button.utils.ts b/src/blocks/button/Button.utils.ts index 0d276b7791..8dd243fb1b 100644 --- a/src/blocks/button/Button.utils.ts +++ b/src/blocks/button/Button.utils.ts @@ -9,14 +9,17 @@ export const getButtonVariantStyles = (variant: ButtonVariant, loading: boolean) loading ? 'components-button-primary-background-loading' : 'components-button-primary-background-default' }); color: var(--components-button-primary-text-default); - - &:hover { - background-color: var(--components-button-primary-background-hover) - } - - &:active { - background-color: var(--components-button-primary-background-pressed); - } + ${ + !loading && + ` + &:hover { + background-color: var(--components-button-primary-background-hover) + } + &:active { + background-color: var(--components-button-primary-background-pressed); + } + ` + }; &:focus-visible { background-color: var(--components-button-primary-background-focus); @@ -31,26 +34,23 @@ export const getButtonVariantStyles = (variant: ButtonVariant, loading: boolean) }` }; - [role='spinner'] { - border-top-color: var(--components-button-primary-icon-default); - :before,:after { - background:var(--components-button-primary-icon-default); - } - } `; } case 'secondary': { return ` background-color: var(--components-button-secondary-background-default); color: var(--components-button-secondary-text-default); - - &:hover { - background-color: var(--components-button-secondary-background-hover); - } - - &:active { - background-color: var(--components-button-secondary-background-pressed); - } + ${ + !loading && + ` + &:hover { + background-color: var(--components-button-secondary-background-hover); + } + + &:active { + background-color: var(--components-button-secondary-background-pressed); + }` + }; &:focus-visible { background-color: var(--components-button-secondary-background-focus); @@ -64,28 +64,26 @@ export const getButtonVariantStyles = (variant: ButtonVariant, loading: boolean) color: var(--components-button-secondary-text-disabled); };` }; - [role='spinner'] { - border-top-color: var(--components-button-secondary-icon-default); - :before,:after { - background:var(--components-button-secondary-icon-default); - } - } + `; } case 'tertiary': { return ` background-color: var(--components-button-tertiary-background-default); color: var(--components-button-tertiary-text-default); - - &:hover { - color: var(--components-button-tertiary-text-default); - background-color: var(--components-button-tertiary-background-hover); - } - - &:active { - background-color: var(--components-button-tertiary-background-pressed); - color: var(--components-button-secondary-text-default); - } + ${ + !loading && + ` + &:hover { + color: var(--components-button-tertiary-text-default); + background-color: var(--components-button-tertiary-background-hover); + } + + &:active { + background-color: var(--components-button-tertiary-background-pressed); + color: var(--components-button-secondary-text-default); + }` + }; &:focus-visible { border: var(--border-sm) solid var(--components-button-tertiary-stroke-focus); @@ -100,26 +98,23 @@ export const getButtonVariantStyles = (variant: ButtonVariant, loading: boolean) color: var(--components-button-tertiary-text-disabled); }` }; - [role='spinner'] { - border-top-color: var(--components-button-tertiary-icon-default); - :before,:after { - background:var(--components-button-tertiary-icon-default); - } - } `; } case 'danger': { return ` background-color: var(--components-button-danger-background-default); color: var(--components-button-danger-text-default); - - &:hover { - background-color: var(--components-button-danger-background-hover); - } - - &:active { - background-color: var(--components-button-danger-background-pressed); - } + ${ + !loading && + ` + &:hover { + background-color: var(--components-button-danger-background-hover); + } + + &:active { + background-color: var(--components-button-danger-background-pressed); + }` + }; &:focus-visible { background-color: var(--components-button-danger-background-focus); @@ -133,26 +128,23 @@ export const getButtonVariantStyles = (variant: ButtonVariant, loading: boolean) color: var(--components-button-danger-text-disabled); }` }; - [role='spinner'] { - border-top-color: var(--components-button-danger-icon-default); - :before,:after { - background:var(--components-button-danger-icon-default); - } - } `; } case 'dangerSecondary': { return ` background-color: var(--components-button-danger-secondary-background-default); color: var(--components-button-danger-secondary-text-default); - - &:hover { - background-color: var(--components-button-danger-secondary-background-hover); - } - - &:active { - background-color: var(--components-button-danger-secondary-background-pressed); - } + ${ + !loading && + ` + &:hover { + background-color: var(--components-button-danger-secondary-background-hover); + } + + &:active { + background-color: var(--components-button-danger-secondary-background-pressed); + }` + }; &:focus-visible { background-color: var(--components-button-danger-secondary-background-focus); @@ -166,12 +158,6 @@ export const getButtonVariantStyles = (variant: ButtonVariant, loading: boolean) color:var(--components-button-danger-secondary-text-disabled); }` }; - [role='spinner'] { - border-top-color: var(--components-button-danger-secondary-icon-default); - :before,:after { - background:var(--components-button-danger-secondary-icon-default); - } - } `; } case 'outline': { @@ -180,16 +166,19 @@ export const getButtonVariantStyles = (variant: ButtonVariant, loading: boolean) border: var(--border-sm) solid var(--components-button-outline-stroke-default); color: var(--components-button-outline-text-default); outline: none; - - &:hover { - border: var(--border-sm) solid var(--components-button-outline-stroke-hover); - background-color: var(--components-button-outline-background-hover); - } - - &:active { - border: var(--border-sm) solid var(--components-button-outline-stroke-pressed); - background-color: var(--components-button-outline-background-pressed); - } + ${ + !loading && + ` + &:hover { + border: var(--border-sm) solid var(--components-button-outline-stroke-hover); + background-color: var(--components-button-outline-background-hover); + } + + &:active { + border: var(--border-sm) solid var(--components-button-outline-stroke-pressed); + background-color: var(--components-button-outline-background-pressed); + }` + }; &:focus-visible { border: var(--border-sm) solid var(--components-button-outline-stroke-focus); @@ -204,12 +193,6 @@ export const getButtonVariantStyles = (variant: ButtonVariant, loading: boolean) color: var(--components-button-outline-text-disabled); }` }; - [role='spinner'] { - border-top-color: var(--components-button-outline-icon-default); - :before,:after { - background:var(--components-button-outline-icon-default); - } - } `; } } diff --git a/src/blocks/icons/components/Ellipse.tsx b/src/blocks/icons/components/Ellipse.tsx new file mode 100644 index 0000000000..21e6038de7 --- /dev/null +++ b/src/blocks/icons/components/Ellipse.tsx @@ -0,0 +1,29 @@ +import { FC } from 'react'; +import { IconWrapper } from '../IconWrapper'; +import { IconProps } from '../Icons.types'; + +const Ellipse: FC = (allProps) => { + const { svgProps: props, ...restProps } = allProps; + return ( +