From 8f595f7364f9e2c7c190e820cdb09efdd04033c8 Mon Sep 17 00:00:00 2001 From: fmehta-eightfold Date: Thu, 23 Feb 2023 11:18:27 +0530 Subject: [PATCH 1/7] feat: add new spaced avatar group style --- src/components/Avatar/Avatar.types.ts | 10 +++++++++ src/components/Avatar/AvatarGroup.stories.tsx | 18 ++++++++++++++-- src/components/Avatar/AvatarGroup.tsx | 21 ++++++++++++++----- src/components/Avatar/Styles/group.scss | 21 +++++++++++++++++++ src/components/Avatar/Styles/rtl.scss | 9 ++++++++ 5 files changed, 72 insertions(+), 7 deletions(-) diff --git a/src/components/Avatar/Avatar.types.ts b/src/components/Avatar/Avatar.types.ts index 34f8358d0..c2f641e90 100644 --- a/src/components/Avatar/Avatar.types.ts +++ b/src/components/Avatar/Avatar.types.ts @@ -97,6 +97,11 @@ interface MaxAvatarProps extends BaseAvatarProps { interface AvatarListProps extends Omit, 'footer' | 'header' | 'layout'> {} +export enum AvatarGroupStyle { + Overlapped = 'overlapped', + Spaced = 'spaced', +} + export interface AvatarGroupProps extends OcBaseProps { /** * Avatar group List props. @@ -111,6 +116,11 @@ export interface AvatarGroupProps extends OcBaseProps { * @default '18px' */ fontSize?: string; + /** + * Avatar grouping style + * @default AvatarGroupStyle.Overlapped + */ + groupStyle?: AvatarGroupStyle; /** * Avatar group max props. */ diff --git a/src/components/Avatar/AvatarGroup.stories.tsx b/src/components/Avatar/AvatarGroup.stories.tsx index 4b3ed220b..f46b6ca8b 100644 --- a/src/components/Avatar/AvatarGroup.stories.tsx +++ b/src/components/Avatar/AvatarGroup.stories.tsx @@ -1,7 +1,7 @@ import React from 'react'; import { Stories } from '@storybook/addon-docs'; -import { ComponentStory, ComponentMeta } from '@storybook/react'; -import { Avatar, AvatarGroup } from '.'; +import { ComponentMeta, ComponentStory } from '@storybook/react'; +import { Avatar, AvatarGroup, AvatarGroupStyle } from '.'; import { Tooltip, TooltipSize, TooltipTheme } from '../Tooltip'; export default { @@ -131,6 +131,8 @@ const Basic_Story: ComponentStory = (args) => ( export const Basic = Basic_Story.bind({}); +export const Basic_Spaced = Basic_Story.bind({}); + const List_Story: ComponentStory = (args) => ( = (args) => ( export const List_Group = List_Story.bind({}); +export const List_Group_Spaced = List_Story.bind({}); + const avatarGroupArgs: Object = { classNames: 'my-avatar-group-class', 'data-test-id': 'my-avatar-group-test-id', @@ -179,6 +183,16 @@ Basic.args = { ...avatarGroupArgs, }; +Basic_Spaced.args = { + ...avatarGroupArgs, + groupStyle: AvatarGroupStyle.Spaced, +}; + List_Group.args = { ...avatarGroupArgs, }; + +List_Group_Spaced.args = { + ...avatarGroupArgs, + groupStyle: AvatarGroupStyle.Spaced, +}; diff --git a/src/components/Avatar/AvatarGroup.tsx b/src/components/Avatar/AvatarGroup.tsx index 99b99dfee..fd5ff85e7 100644 --- a/src/components/Avatar/AvatarGroup.tsx +++ b/src/components/Avatar/AvatarGroup.tsx @@ -1,5 +1,5 @@ import React, { Ref } from 'react'; -import { Avatar, AvatarGroupProps } from '.'; +import { Avatar, AvatarGroupProps, AvatarGroupStyle } from '.'; import { List } from '../List'; import { Tooltip } from '../Tooltip'; import { useCanvasDirection } from '../../hooks/useCanvasDirection'; @@ -18,6 +18,7 @@ export const AvatarGroup: React.FC = React.forwardRef( avatarListProps, children, classNames, + groupStyle = AvatarGroupStyle.Overlapped, maxProps, size, style, @@ -30,8 +31,14 @@ export const AvatarGroup: React.FC = React.forwardRef( const maxCount: number = maxProps?.count; const avatarGroupClassNames: string = mergeClasses([ - styles.avatarGroup, - { [styles.avatarGroupRtl]: htmlDir === 'rtl' }, + groupStyle === AvatarGroupStyle.Overlapped + ? styles.avatarGroup + : styles.avatarGroupSpaced, + { + [groupStyle === AvatarGroupStyle.Overlapped + ? styles.avatarGroupRtl + : styles.avatarGroupSpacedRtl]: htmlDir === 'rtl', + }, classNames, ]); @@ -67,7 +74,9 @@ export const AvatarGroup: React.FC = React.forwardRef( fontSize={styles.maxCountFontSize} {...maxProps} classNames={mergeClasses([ - styles.avatarGroupMaxCount, + groupStyle === AvatarGroupStyle.Overlapped + ? styles.avatarGroupMaxCount + : styles.avatarGroupSpacedMaxCount, maxProps?.classNames, ])} > @@ -91,7 +100,9 @@ export const AvatarGroup: React.FC = React.forwardRef( Date: Thu, 23 Feb 2023 12:49:11 +0530 Subject: [PATCH 2/7] refactor: rename variable --- src/components/Avatar/Avatar.types.ts | 8 ++++---- src/components/Avatar/AvatarGroup.stories.tsx | 6 +++--- src/components/Avatar/AvatarGroup.tsx | 12 ++++++------ 3 files changed, 13 insertions(+), 13 deletions(-) diff --git a/src/components/Avatar/Avatar.types.ts b/src/components/Avatar/Avatar.types.ts index c2f641e90..fcf857070 100644 --- a/src/components/Avatar/Avatar.types.ts +++ b/src/components/Avatar/Avatar.types.ts @@ -97,7 +97,7 @@ interface MaxAvatarProps extends BaseAvatarProps { interface AvatarListProps extends Omit, 'footer' | 'header' | 'layout'> {} -export enum AvatarGroupStyle { +export enum AvatarGroupVariant { Overlapped = 'overlapped', Spaced = 'spaced', } @@ -117,10 +117,10 @@ export interface AvatarGroupProps extends OcBaseProps { */ fontSize?: string; /** - * Avatar grouping style - * @default AvatarGroupStyle.Overlapped + * Avatar grouping variant + * @default AvatarGroupVariant.Overlapped */ - groupStyle?: AvatarGroupStyle; + groupStyle?: AvatarGroupVariant; /** * Avatar group max props. */ diff --git a/src/components/Avatar/AvatarGroup.stories.tsx b/src/components/Avatar/AvatarGroup.stories.tsx index f46b6ca8b..483a4ae4a 100644 --- a/src/components/Avatar/AvatarGroup.stories.tsx +++ b/src/components/Avatar/AvatarGroup.stories.tsx @@ -1,7 +1,7 @@ import React from 'react'; import { Stories } from '@storybook/addon-docs'; import { ComponentMeta, ComponentStory } from '@storybook/react'; -import { Avatar, AvatarGroup, AvatarGroupStyle } from '.'; +import { Avatar, AvatarGroup, AvatarGroupVariant } from '.'; import { Tooltip, TooltipSize, TooltipTheme } from '../Tooltip'; export default { @@ -185,7 +185,7 @@ Basic.args = { Basic_Spaced.args = { ...avatarGroupArgs, - groupStyle: AvatarGroupStyle.Spaced, + groupStyle: AvatarGroupVariant.Spaced, }; List_Group.args = { @@ -194,5 +194,5 @@ List_Group.args = { List_Group_Spaced.args = { ...avatarGroupArgs, - groupStyle: AvatarGroupStyle.Spaced, + groupStyle: AvatarGroupVariant.Spaced, }; diff --git a/src/components/Avatar/AvatarGroup.tsx b/src/components/Avatar/AvatarGroup.tsx index fd5ff85e7..6798c5c4e 100644 --- a/src/components/Avatar/AvatarGroup.tsx +++ b/src/components/Avatar/AvatarGroup.tsx @@ -1,5 +1,5 @@ import React, { Ref } from 'react'; -import { Avatar, AvatarGroupProps, AvatarGroupStyle } from '.'; +import { Avatar, AvatarGroupProps, AvatarGroupVariant } from '.'; import { List } from '../List'; import { Tooltip } from '../Tooltip'; import { useCanvasDirection } from '../../hooks/useCanvasDirection'; @@ -18,7 +18,7 @@ export const AvatarGroup: React.FC = React.forwardRef( avatarListProps, children, classNames, - groupStyle = AvatarGroupStyle.Overlapped, + groupStyle = AvatarGroupVariant.Overlapped, maxProps, size, style, @@ -31,11 +31,11 @@ export const AvatarGroup: React.FC = React.forwardRef( const maxCount: number = maxProps?.count; const avatarGroupClassNames: string = mergeClasses([ - groupStyle === AvatarGroupStyle.Overlapped + groupStyle === AvatarGroupVariant.Overlapped ? styles.avatarGroup : styles.avatarGroupSpaced, { - [groupStyle === AvatarGroupStyle.Overlapped + [groupStyle === AvatarGroupVariant.Overlapped ? styles.avatarGroupRtl : styles.avatarGroupSpacedRtl]: htmlDir === 'rtl', }, @@ -74,7 +74,7 @@ export const AvatarGroup: React.FC = React.forwardRef( fontSize={styles.maxCountFontSize} {...maxProps} classNames={mergeClasses([ - groupStyle === AvatarGroupStyle.Overlapped + groupStyle === AvatarGroupVariant.Overlapped ? styles.avatarGroupMaxCount : styles.avatarGroupSpacedMaxCount, maxProps?.classNames, @@ -100,7 +100,7 @@ export const AvatarGroup: React.FC = React.forwardRef( Date: Thu, 23 Feb 2023 14:28:30 +0530 Subject: [PATCH 3/7] chore: misc --- src/components/Avatar/AvatarGroup.tsx | 36 ++++++++++++++++++--------- 1 file changed, 24 insertions(+), 12 deletions(-) diff --git a/src/components/Avatar/AvatarGroup.tsx b/src/components/Avatar/AvatarGroup.tsx index 6798c5c4e..33a4792c8 100644 --- a/src/components/Avatar/AvatarGroup.tsx +++ b/src/components/Avatar/AvatarGroup.tsx @@ -31,13 +31,15 @@ export const AvatarGroup: React.FC = React.forwardRef( const maxCount: number = maxProps?.count; const avatarGroupClassNames: string = mergeClasses([ - groupStyle === AvatarGroupVariant.Overlapped - ? styles.avatarGroup - : styles.avatarGroupSpaced, + { [styles.avatarGroup]: groupStyle === AvatarGroupVariant.Overlapped }, + { [styles.avatarGroupSpaced]: groupStyle === AvatarGroupVariant.Spaced }, { - [groupStyle === AvatarGroupVariant.Overlapped - ? styles.avatarGroupRtl - : styles.avatarGroupSpacedRtl]: htmlDir === 'rtl', + [styles.avatarGroupRtl]: + htmlDir === 'rtl' && groupStyle === AvatarGroupVariant.Overlapped, + }, + { + [styles.avatarGroupSpacedRtl]: + htmlDir === 'rtl' && groupStyle === AvatarGroupVariant.Spaced, }, classNames, ]); @@ -74,9 +76,14 @@ export const AvatarGroup: React.FC = React.forwardRef( fontSize={styles.maxCountFontSize} {...maxProps} classNames={mergeClasses([ - groupStyle === AvatarGroupVariant.Overlapped - ? styles.avatarGroupMaxCount - : styles.avatarGroupSpacedMaxCount, + { + [styles.avatarGroupMaxCount]: + groupStyle === AvatarGroupVariant.Overlapped, + }, + { + [styles.avatarGroupSpacedMaxCount]: + groupStyle === AvatarGroupVariant.Spaced, + }, maxProps?.classNames, ])} > @@ -100,9 +107,14 @@ export const AvatarGroup: React.FC = React.forwardRef( Date: Thu, 23 Feb 2023 16:05:14 +0530 Subject: [PATCH 4/7] chore: resolve comments --- src/components/Avatar/AvatarGroup.tsx | 29 +++++-------------------- src/components/Avatar/Styles/group.scss | 23 ++++---------------- src/components/Avatar/Styles/rtl.scss | 12 +++++----- 3 files changed, 16 insertions(+), 48 deletions(-) diff --git a/src/components/Avatar/AvatarGroup.tsx b/src/components/Avatar/AvatarGroup.tsx index 33a4792c8..9d1710686 100644 --- a/src/components/Avatar/AvatarGroup.tsx +++ b/src/components/Avatar/AvatarGroup.tsx @@ -31,14 +31,11 @@ export const AvatarGroup: React.FC = React.forwardRef( const maxCount: number = maxProps?.count; const avatarGroupClassNames: string = mergeClasses([ - { [styles.avatarGroup]: groupStyle === AvatarGroupVariant.Overlapped }, - { [styles.avatarGroupSpaced]: groupStyle === AvatarGroupVariant.Spaced }, + styles.avatarGroup, + { [styles.spaced]: groupStyle === AvatarGroupVariant.Spaced }, + { [styles.avatarGroupRtl]: htmlDir === 'rtl' }, { - [styles.avatarGroupRtl]: - htmlDir === 'rtl' && groupStyle === AvatarGroupVariant.Overlapped, - }, - { - [styles.avatarGroupSpacedRtl]: + [styles.spacedRtl]: htmlDir === 'rtl' && groupStyle === AvatarGroupVariant.Spaced, }, classNames, @@ -76,14 +73,7 @@ export const AvatarGroup: React.FC = React.forwardRef( fontSize={styles.maxCountFontSize} {...maxProps} classNames={mergeClasses([ - { - [styles.avatarGroupMaxCount]: - groupStyle === AvatarGroupVariant.Overlapped, - }, - { - [styles.avatarGroupSpacedMaxCount]: - groupStyle === AvatarGroupVariant.Spaced, - }, + styles.avatarGroupMaxCount, maxProps?.classNames, ])} > @@ -107,14 +97,7 @@ export const AvatarGroup: React.FC = React.forwardRef( Date: Thu, 23 Feb 2023 16:09:27 +0530 Subject: [PATCH 5/7] chore: resolve comments --- src/components/Avatar/AvatarGroup.tsx | 4 ---- src/components/Avatar/Styles/rtl.scss | 4 +--- 2 files changed, 1 insertion(+), 7 deletions(-) diff --git a/src/components/Avatar/AvatarGroup.tsx b/src/components/Avatar/AvatarGroup.tsx index 9d1710686..821f19942 100644 --- a/src/components/Avatar/AvatarGroup.tsx +++ b/src/components/Avatar/AvatarGroup.tsx @@ -34,10 +34,6 @@ export const AvatarGroup: React.FC = React.forwardRef( styles.avatarGroup, { [styles.spaced]: groupStyle === AvatarGroupVariant.Spaced }, { [styles.avatarGroupRtl]: htmlDir === 'rtl' }, - { - [styles.spacedRtl]: - htmlDir === 'rtl' && groupStyle === AvatarGroupVariant.Spaced, - }, classNames, ]); diff --git a/src/components/Avatar/Styles/rtl.scss b/src/components/Avatar/Styles/rtl.scss index 538f9414f..c3e59a453 100644 --- a/src/components/Avatar/Styles/rtl.scss +++ b/src/components/Avatar/Styles/rtl.scss @@ -4,10 +4,8 @@ margin-right: -$space-xs; margin-left: 0; } - } - &.spaced { - &-rtl { + &.spaced { :not(:first-child):not(.avatar-group-spaced-tooltip) { margin-right: -$space-xxxs; margin-left: 0; From 5ae90e6ecd3138337a4be76f0ca918905f24fb0a Mon Sep 17 00:00:00 2001 From: fmehta-eightfold Date: Wed, 1 Mar 2023 10:23:02 +0530 Subject: [PATCH 6/7] chore: resolve comment --- src/octuple.ts | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/src/octuple.ts b/src/octuple.ts index e2054553e..4b87f6425 100644 --- a/src/octuple.ts +++ b/src/octuple.ts @@ -4,7 +4,13 @@ import { AccordionSize, } from './components/Accordion'; -import { AVATAR_THEME_SET, Avatar, AvatarGroup } from './components/Avatar'; +import { + AVATAR_THEME_SET, + Avatar, + AvatarGroup, + AvatarGroupVariant, + StatusItemsPosition, +} from './components/Avatar'; import { Badge } from './components/Badge'; @@ -204,6 +210,7 @@ export { AVATAR_THEME_SET, Avatar, AvatarGroup, + AvatarGroupVariant, Badge, ButtonIconAlign, ButtonShape, @@ -316,6 +323,7 @@ export { Stack, Stat, StatThemeName, + StatusItemsPosition, StatValidationStatus, Step, StepSize, From 0e4f8c73b7ac2e887d055c0f5bf6e468014676fd Mon Sep 17 00:00:00 2001 From: fmehta-eightfold Date: Wed, 1 Mar 2023 11:23:10 +0530 Subject: [PATCH 7/7] refactor: rename var --- src/components/Avatar/Avatar.types.ts | 2 +- src/components/Avatar/AvatarGroup.stories.tsx | 4 ++-- src/components/Avatar/AvatarGroup.tsx | 4 ++-- 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/components/Avatar/Avatar.types.ts b/src/components/Avatar/Avatar.types.ts index c17b04d5e..0a076d331 100644 --- a/src/components/Avatar/Avatar.types.ts +++ b/src/components/Avatar/Avatar.types.ts @@ -195,7 +195,7 @@ export interface AvatarGroupProps extends OcBaseProps { * Avatar grouping variant * @default AvatarGroupVariant.Overlapped */ - groupStyle?: AvatarGroupVariant; + groupVariant?: AvatarGroupVariant; /** * Avatar group max props. */ diff --git a/src/components/Avatar/AvatarGroup.stories.tsx b/src/components/Avatar/AvatarGroup.stories.tsx index 483a4ae4a..9b4608744 100644 --- a/src/components/Avatar/AvatarGroup.stories.tsx +++ b/src/components/Avatar/AvatarGroup.stories.tsx @@ -185,7 +185,7 @@ Basic.args = { Basic_Spaced.args = { ...avatarGroupArgs, - groupStyle: AvatarGroupVariant.Spaced, + groupVariant: AvatarGroupVariant.Spaced, }; List_Group.args = { @@ -194,5 +194,5 @@ List_Group.args = { List_Group_Spaced.args = { ...avatarGroupArgs, - groupStyle: AvatarGroupVariant.Spaced, + groupVariant: AvatarGroupVariant.Spaced, }; diff --git a/src/components/Avatar/AvatarGroup.tsx b/src/components/Avatar/AvatarGroup.tsx index 821f19942..9ced310e9 100644 --- a/src/components/Avatar/AvatarGroup.tsx +++ b/src/components/Avatar/AvatarGroup.tsx @@ -18,7 +18,7 @@ export const AvatarGroup: React.FC = React.forwardRef( avatarListProps, children, classNames, - groupStyle = AvatarGroupVariant.Overlapped, + groupVariant = AvatarGroupVariant.Overlapped, maxProps, size, style, @@ -32,7 +32,7 @@ export const AvatarGroup: React.FC = React.forwardRef( const avatarGroupClassNames: string = mergeClasses([ styles.avatarGroup, - { [styles.spaced]: groupStyle === AvatarGroupVariant.Spaced }, + { [styles.spaced]: groupVariant === AvatarGroupVariant.Spaced }, { [styles.avatarGroupRtl]: htmlDir === 'rtl' }, classNames, ]);