From 9e28c886aafc78b9fedf4e0b367e865022781959 Mon Sep 17 00:00:00 2001 From: Sarah Alli Date: Tue, 1 Oct 2024 18:42:32 -0400 Subject: [PATCH] avatar/avatargroup changes --- docs/examples/avatar/mainExample.tsx | 108 ----- docs/examples/avatar/overExample.tsx | 10 - docs/examples/avatar/shapeExample.tsx | 30 -- docs/examples/avatarGroup/accessibility.tsx | 10 - docs/examples/avatarGroup/main.tsx | 65 --- docs/examples/avatarGroup/noEmoji.tsx | 16 - docs/examples/avatarGroup/noImageSource.tsx | 10 - docs/examples/avatarGroup/person.tsx | 10 - docs/examples/avatarGroup/roleLink.tsx | 81 ++-- docs/pages/web/avatar.tsx | 35 -- docs/pages/web/avatargroup.tsx | 455 ------------------ packages/gestalt/src/Avatar.tsx | 53 +- .../gestalt/src/Avatar/AvatarFoundation.css | 54 +-- packages/gestalt/src/Avatar/DefaultAvatar.tsx | 16 - packages/gestalt/src/Avatar/Foundation.tsx | 180 +------ .../gestalt/src/Avatar/getAvatarColorToken.ts | 217 +-------- packages/gestalt/src/AvatarGroup.css | 46 -- packages/gestalt/src/AvatarGroup.tsx | 100 ++-- 18 files changed, 108 insertions(+), 1388 deletions(-) diff --git a/docs/examples/avatar/mainExample.tsx b/docs/examples/avatar/mainExample.tsx index 58b9a37b3f..652b013bcd 100644 --- a/docs/examples/avatar/mainExample.tsx +++ b/docs/examples/avatar/mainExample.tsx @@ -1,6 +1,3 @@ -<<<<<<< HEAD -<<<<<<< HEAD -<<<<<<< HEAD import { Avatar, Flex, useDangerouslyInGestaltExperiment } from 'gestalt'; export default function Example() { @@ -37,93 +34,6 @@ export default function Example() { /> ) : ( -======= -// import { Avatar, Flex, useDangerouslyInGestaltExperiment } from 'gestalt'; - -// export default function Example() { -// const isInVRExperiment = useDangerouslyInGestaltExperiment({ -// webExperimentName: 'web_gestalt_visualRefresh', -// mwebExperimentName: 'web_gestalt_visualRefresh', -// }); - -// return isInVRExperiment ? ( -// -// -// -// -// -// -// -// ) : ( -// -// -// -// -// -// -// -// ); -// } - - -======= ->>>>>>> 88a4a9048 (added more VR examples) -import { Avatar, Flex } from 'gestalt'; -======= -import { Avatar, Flex, useDangerouslyInGestaltExperiment } from 'gestalt'; ->>>>>>> 2003c2dd8 (examples fixed) - -export default function Example() { - const isInVRExperiment = useDangerouslyInGestaltExperiment({ - webExperimentName: 'web_gestalt_visualRefresh', - mwebExperimentName: 'web_gestalt_visualRefresh', - }); - -<<<<<<< HEAD - return ( ->>>>>>> e205634e9 (fixing docs) -======= - return isInVRExperiment ? ( - - - - - - - - ) : ( ->>>>>>> 2003c2dd8 (examples fixed) -<<<<<<< HEAD -<<<<<<< HEAD -<<<<<<< HEAD - - - -======= - - - ->>>>>>> e205634e9 (fixing docs) -======= - - - ->>>>>>> 80cd4e984 (working on docs) -======= ->>>>>>> 2003c2dd8 (examples fixed) ); diff --git a/docs/examples/avatar/overExample.tsx b/docs/examples/avatar/overExample.tsx index 5481baad84..768899b427 100644 --- a/docs/examples/avatar/overExample.tsx +++ b/docs/examples/avatar/overExample.tsx @@ -6,19 +6,9 @@ export default function Example() { mwebExperimentName: 'web_gestalt_visualRefresh', }); -<<<<<<< HEAD -<<<<<<< HEAD const src = isInVRExperiment ? 'https://i.pinimg.com/564x/8e/fb/f7/8efbf75008c34394104ef9568c038d2d.jpg' : 'https://i.ibb.co/jVR29XV/stock5.jpg'; -======= - const src = isInVRExperiment ? 'https://i.pinimg.com/564x/8e/fb/f7/8efbf75008c34394104ef9568c038d2d.jpg' : 'https://i.ibb.co/jVR29XV/stock5.jpg'; ->>>>>>> 2003c2dd8 (examples fixed) -======= - const src = isInVRExperiment - ? 'https://i.pinimg.com/564x/8e/fb/f7/8efbf75008c34394104ef9568c038d2d.jpg' - : 'https://i.ibb.co/jVR29XV/stock5.jpg'; ->>>>>>> e3b5eac32 (prettier) return ( diff --git a/docs/examples/avatar/shapeExample.tsx b/docs/examples/avatar/shapeExample.tsx index 7626e3e67d..9ea69deae6 100644 --- a/docs/examples/avatar/shapeExample.tsx +++ b/docs/examples/avatar/shapeExample.tsx @@ -6,45 +6,15 @@ export default function Example() { mwebExperimentName: 'web_gestalt_visualRefresh', }); -<<<<<<< HEAD -<<<<<<< HEAD const alt = isInVRExperiment ? 'Ayesha Avatar' : 'Keerthi Avatar'; const src = isInVRExperiment ? 'https://i.pinimg.com/originals/50/ce/c4/50cec4ca4c65131580c540c65548e0a3.jpg' : 'https://i.ibb.co/ZfCZrY8/keerthi.jpg'; -======= - const alt = isInVRExperiment ? 'Sora Avatar' : 'Keerthi Avatar'; -<<<<<<< HEAD - const src = isInVRExperiment ? 'https://i.pinimg.com/originals/ab/c5/4a/abc54abd85df131e90ca6b372368b738.jpg' : 'https://i.ibb.co/ZfCZrY8/keerthi.jpg'; ->>>>>>> 2003c2dd8 (examples fixed) -======= -======= - const alt = isInVRExperiment ? 'Ayesha Avatar' : 'Keerthi Avatar'; ->>>>>>> 6b25f9ea8 (small fixes) - const src = isInVRExperiment - ? 'https://i.pinimg.com/originals/50/ce/c4/50cec4ca4c65131580c540c65548e0a3.jpg' - : 'https://i.ibb.co/ZfCZrY8/keerthi.jpg'; ->>>>>>> e3b5eac32 (prettier) return ( -<<<<<<< HEAD -<<<<<<< HEAD - {alt} -======= - {alt} ->>>>>>> 2003c2dd8 (examples fixed) -======= {alt} ->>>>>>> e3b5eac32 (prettier) ); diff --git a/docs/examples/avatarGroup/accessibility.tsx b/docs/examples/avatarGroup/accessibility.tsx index ee258a95ca..0df9efdec0 100644 --- a/docs/examples/avatarGroup/accessibility.tsx +++ b/docs/examples/avatarGroup/accessibility.tsx @@ -1,8 +1,4 @@ import { useEffect, useRef, useState } from 'react'; -<<<<<<< HEAD -<<<<<<< HEAD -======= ->>>>>>> e3b5eac32 (prettier) import { AvatarGroup, Box, @@ -13,12 +9,6 @@ import { Text, useDangerouslyInGestaltExperiment, } from 'gestalt'; -<<<<<<< HEAD -======= -import { AvatarGroup, Box, Flex, Layer, Popover, SearchField, Text, useDangerouslyInGestaltExperiment } from 'gestalt'; ->>>>>>> da83e2698 (updated AvatarGroup examples) -======= ->>>>>>> e3b5eac32 (prettier) function SearchCollaboratorsField() { const ref = useRef(null); diff --git a/docs/examples/avatarGroup/main.tsx b/docs/examples/avatarGroup/main.tsx index 7273680f59..12fc87739d 100644 --- a/docs/examples/avatarGroup/main.tsx +++ b/docs/examples/avatarGroup/main.tsx @@ -36,72 +36,7 @@ export default function Example() { }, ]; -<<<<<<< HEAD -<<<<<<< HEAD - const collaborators = [ - { - name: 'Keerthi', - src: 'https://i.ibb.co/ZfCZrY8/keerthi.jpg', - }, - { - name: 'Alberto', - src: 'https://i.ibb.co/NsK2w5y/Alberto.jpg', - }, - { - name: 'Shanice', - src: 'https://i.ibb.co/7tGKGvb/shanice.jpg', - }, - ]; - - const collaboratorsVR = [ - { - name: 'Fatima', - src: 'https://i.pinimg.com/originals/bf/bc/27/bfbc27685d81eb9a8f65c201ea661f0e.jpg', - }, - { - name: 'Sora', - src: 'https://i.pinimg.com/originals/ab/c5/4a/abc54abd85df131e90ca6b372368b738.jpg', - }, - { - name: 'Ayesha', - src: 'https://i.pinimg.com/originals/c5/5c/ac/c55caca43a7c16766215ec165b649c1c.jpg', - }, - ]; - - return ( -======= - return isInVRExperiment ? ( - - - - ) : ( ->>>>>>> 4707f0fa6 (fixed container) -======= return ( ->>>>>>> e205634e9 (fixing docs) >>>>>> da83e2698 (updated AvatarGroup examples) -======= - avatarColor: '10', - name: 'Sora', - }, - { - avatarColor: '04', ->>>>>>> e3b5eac32 (prettier) name: '🙏🏾', }, { diff --git a/docs/examples/avatarGroup/noImageSource.tsx b/docs/examples/avatarGroup/noImageSource.tsx index 6cebf39425..998279ecde 100644 --- a/docs/examples/avatarGroup/noImageSource.tsx +++ b/docs/examples/avatarGroup/noImageSource.tsx @@ -7,18 +7,8 @@ export default function Example() { }); const accessibilityLabel = isInVRExperiment -<<<<<<< HEAD -<<<<<<< HEAD ? 'Collaborators: Fatima, Sora, Ayesha.' : 'Collaborators: Keerthi, Alberto, Shanice.'; -======= - ? 'Collaborators: Fatima, Sora, Ayesha.' - : 'Collaborators: Keerthi, Alberto, Shanice.'; ->>>>>>> da83e2698 (updated AvatarGroup examples) -======= - ? 'Collaborators: Fatima, Sora, Ayesha.' - : 'Collaborators: Keerthi, Alberto, Shanice.'; ->>>>>>> e3b5eac32 (prettier) const collaborators = [ { diff --git a/docs/examples/avatarGroup/person.tsx b/docs/examples/avatarGroup/person.tsx index 3a11735374..3b973f37c4 100644 --- a/docs/examples/avatarGroup/person.tsx +++ b/docs/examples/avatarGroup/person.tsx @@ -7,18 +7,8 @@ export default function Example() { }); const accessibilityLabel = isInVRExperiment -<<<<<<< HEAD -<<<<<<< HEAD ? 'Collaborators: Fatima, Mami Wata, Ayesha.' : 'Collaborators: Keerthi, Mami Wata, Shanice.'; -======= - ? 'Collaborators: Fatima, Mami Wata, Ayesha.' - : 'Collaborators: Keerthi, Mami Wata, Shanice.'; ->>>>>>> da83e2698 (updated AvatarGroup examples) -======= - ? 'Collaborators: Fatima, Mami Wata, Ayesha.' - : 'Collaborators: Keerthi, Mami Wata, Shanice.'; ->>>>>>> e3b5eac32 (prettier) const collaborators = [ { diff --git a/docs/examples/avatarGroup/roleLink.tsx b/docs/examples/avatarGroup/roleLink.tsx index 4ab21b029b..eccaac1d9d 100644 --- a/docs/examples/avatarGroup/roleLink.tsx +++ b/docs/examples/avatarGroup/roleLink.tsx @@ -1,51 +1,44 @@ -import { AvatarGroup, Flex, useDangerouslyInGestaltExperiment } from 'gestalt'; +import { AvatarGroup, Box, Flex, Link, Text } from 'gestalt'; export default function Example() { - const isInVRExperiment = useDangerouslyInGestaltExperiment({ - webExperimentName: 'web_gestalt_visualRefresh', - mwebExperimentName: 'web_gestalt_visualRefresh', - }); - - const collaborators = [ - { - name: 'Keerthi', - src: 'https://i.ibb.co/ZfCZrY8/keerthi.jpg', - }, - { - name: 'Alberto', - src: 'https://i.ibb.co/NsK2w5y/Alberto.jpg', - }, - { - name: 'Shanice', - src: 'https://i.ibb.co/7tGKGvb/shanice.jpg', - }, - ]; - - const collaboratorsVR = [ - { - name: 'Fatima', - src: 'https://i.pinimg.com/originals/bf/bc/27/bfbc27685d81eb9a8f65c201ea661f0e.jpg', - }, - { - name: 'Sora', - src: 'https://i.pinimg.com/originals/ab/c5/4a/abc54abd85df131e90ca6b372368b738.jpg', - }, - { - name: 'Ayesha', - src: 'https://i.pinimg.com/originals/c5/5c/ac/c55caca43a7c16766215ec165b649c1c.jpg', - }, - ]; - return ( - {}} - role="link" - size="md" - /> + + + + + + + The + + + Quick Vegan Recipes{' '} + + + board has 3 followers. + + + ); } diff --git a/docs/pages/web/avatar.tsx b/docs/pages/web/avatar.tsx index 2681f4ade6..f3904934a3 100644 --- a/docs/pages/web/avatar.tsx +++ b/docs/pages/web/avatar.tsx @@ -181,28 +181,6 @@ export default function AvatarPage({ generatedDocGen }: { generatedDocGen: DocGe - - - } - title="When to use" - type="do" - /> - } -======= - sandpackExample={ - - } ->>>>>>> 88a4a9048 (added more VR examples) -======= sandpackExample={} ->>>>>>> 2003c2dd8 (examples fixed) /> {!isInVRExperiment && ( diff --git a/docs/pages/web/avatargroup.tsx b/docs/pages/web/avatargroup.tsx index 9971e3df27..e71b9c8cf4 100644 --- a/docs/pages/web/avatargroup.tsx +++ b/docs/pages/web/avatargroup.tsx @@ -1,13 +1,4 @@ -<<<<<<< HEAD -<<<<<<< HEAD import { useState } from 'react'; -<<<<<<< HEAD -======= -import { Fragment, useState } from 'react'; ->>>>>>> a8d098199 (building examples) -======= -import { useState } from 'react'; ->>>>>>> da83e2698 (updated AvatarGroup examples) import { AvatarGroup, Box, @@ -16,12 +7,6 @@ import { Text, useDangerouslyInGestaltExperiment, } from 'gestalt'; -<<<<<<< HEAD -======= -import { AvatarGroup, Box, SelectList, useDangerouslyInGestaltExperiment } from 'gestalt'; ->>>>>>> b81f81405 (fixed prop naming) -======= ->>>>>>> a8d098199 (building examples) import AccessibilitySection from '../../docs-components/AccessibilitySection'; import CombinationNew from '../../docs-components/CombinationNew'; import docGen, { DocGen } from '../../docs-components/docgen'; @@ -43,25 +28,10 @@ import roleLink from '../../examples/avatarGroup/roleLink'; import sizing from '../../examples/avatarGroup/sizing'; export default function AvatarGroupPage({ generatedDocGen }: { generatedDocGen: DocGen }) { -<<<<<<< HEAD -<<<<<<< HEAD - const isInVRExperiment = useDangerouslyInGestaltExperiment({ - webExperimentName: 'web_gestalt_visualRefresh', - mwebExperimentName: 'web_gestalt_visualRefresh', - }); -<<<<<<< HEAD -======= - const isInVRExperiment = useDangerouslyInGestaltExperiment({ -======= const isInVRExperiment = useDangerouslyInGestaltExperiment({ ->>>>>>> 80cd4e984 (working on docs) webExperimentName: 'web_gestalt_visualRefresh', mwebExperimentName: 'web_gestalt_visualRefresh', }); - ->>>>>>> b81f81405 (fixed prop naming) -======= ->>>>>>> a8d098199 (building examples) const [avatarsize, setAvatarsize] = useState<'md' | 'xs' | 'sm'>('md'); const sizeExamples = ( @@ -394,336 +364,6 @@ export default function AvatarGroupPage({ generatedDocGen }: { generatedDocGen: ); - const sizeExamples = ( -
- - { - if (value === 'md' || value === 'xs' || value === 'sm') { - setAvatarsize(value); - } - }} - size="md" - value={avatarsize} - > - {[ - { label: 'xs', value: 'xs' }, - { label: 'sm', value: 'sm' }, - { label: 'md', value: 'md' }, - ].map(({ label, value }) => ( - - ))} - - - Element; addCollaborators: boolean[]; collaborators: any[][]; hideTitle: true; }' is not assignable to type 'IntrinsicAttributes & Props'. - addCollaborators={[false, true]} - collaborators={[ - [ - { - name: 'Keerthi', - src: 'https://i.ibb.co/ZfCZrY8/keerthi.jpg', - }, - ], - [ - { - name: 'Keerthi', - src: 'https://i.ibb.co/ZfCZrY8/keerthi.jpg', - }, - { - name: 'Alberto', - src: 'https://i.ibb.co/NsK2w5y/Alberto.jpg', - }, - ], - [ - { - name: 'Keerthi', - src: 'https://i.ibb.co/ZfCZrY8/keerthi.jpg', - }, - { - name: 'Alberto', - src: 'https://i.ibb.co/NsK2w5y/Alberto.jpg', - }, - { - name: 'Shanice', - src: 'https://i.ibb.co/7tGKGvb/shanice.jpg', - }, - ], - [ - { - name: 'Keerthi', - src: 'https://i.ibb.co/ZfCZrY8/keerthi.jpg', - }, - { - name: 'Alberto', - src: 'https://i.ibb.co/NsK2w5y/Alberto.jpg', - }, - { - name: 'Shanice', - src: 'https://i.ibb.co/7tGKGvb/shanice.jpg', - }, - ...new Array(10), - ], - [ - { - name: 'Keerthi', - src: 'https://i.ibb.co/ZfCZrY8/keerthi.jpg', - }, - { - name: 'Alberto', - src: 'https://i.ibb.co/NsK2w5y/Alberto.jpg', - }, - { - name: 'Shanice', - src: 'https://i.ibb.co/7tGKGvb/shanice.jpg', - }, - ...new Array(100), - ], - ]} - hideTitle - > - {({ addCollaborators, collaborators }) => { - const accessibilityLabel = - collaborators.length <= 3 - ? // @ts-expect-error - TS7006 - Parameter 'x' implicitly has an 'any' type. - `Collaborators: ${collaborators.map((x) => x?.name).join(', and ')}.` - : `Collaborators: ${collaborators - .slice(0, 2) - // @ts-expect-error - TS7006 - Parameter 'x' implicitly has an 'any' type. - .map((x) => x?.name) - .join(', ')} ${ - collaborators.length > 3 ? `and ${collaborators.length - 2} more.` : '.' - }`; - return addCollaborators ? ( - {}} - role="button" - size={avatarsize} - /> - ) : ( - - ); - }} - -
- ); - - const staticCollaborators = [ - [ - { - name: 'Sora', - src: 'https://i.pinimg.com/originals/ab/c5/4a/abc54abd85df131e90ca6b372368b738.jpg', - }, - ], - [ - { - name: 'Fatima', - src: 'https://i.pinimg.com/originals/bf/bc/27/bfbc27685d81eb9a8f65c201ea661f0e.jpg', - }, - { - name: 'Sora', - src: 'https://i.pinimg.com/originals/ab/c5/4a/abc54abd85df131e90ca6b372368b738.jpg', - }, - { - name: 'Ayesha', - src: 'https://i.pinimg.com/originals/c5/5c/ac/c55caca43a7c16766215ec165b649c1c.jpg', - }, - ], - [ - { - name: 'Fatima', - src: 'https://i.pinimg.com/originals/bf/bc/27/bfbc27685d81eb9a8f65c201ea661f0e.jpg', - }, - { - avatarColor: '08', - name: 'Zola', - }, - { - name: 'Ayesha', - src: 'https://i.pinimg.com/originals/c5/5c/ac/c55caca43a7c16766215ec165b649c1c.jpg', - }, - ], - ]; - - const interactiveCollaborators = [ - [ - { - name: 'Fatima', - src: 'https://i.pinimg.com/originals/bf/bc/27/bfbc27685d81eb9a8f65c201ea661f0e.jpg', - }, - ], - [ - { - avatarColor: '10', - name: 'Benito', - }, - { - name: 'Ayesha', - src: 'https://i.pinimg.com/originals/c5/5c/ac/c55caca43a7c16766215ec165b649c1c.jpg', - }, - ...new Array(10), - ], - [ - { - avatarColor: '04', - name: 'Alanna', - }, - { - avatarColor: '06', - name: 'Elliot', - }, - { - avatarColor: '08', - name: 'Ricardo', - }, - { - avatarColor: '10', - name: 'Ricardo', - }, - ...new Array(10), - ], - [ - { - name: 'Fatima', - src: 'https://i.pinimg.com/originals/bf/bc/27/bfbc27685d81eb9a8f65c201ea661f0e.jpg', - }, - { - name: 'Sora', - src: 'https://i.pinimg.com/originals/ab/c5/4a/abc54abd85df131e90ca6b372368b738.jpg', - }, - { - name: 'Ayesha', - src: 'https://i.pinimg.com/originals/c5/5c/ac/c55caca43a7c16766215ec165b649c1c.jpg', - }, - ...new Array(100), - ], - ]; - - const staticExamples = ( - Element; addCollaborators: boolean[]; collaborators: any[][]; hideTitle: true; }' is not assignable to type 'IntrinsicAttributes & Props'. - addCollaborators={[false]} - collaborators={staticCollaborators} - hideTitle - > - {({ collaborators }) => { - const accessibilityLabel = - collaborators.length <= 3 - ? // @ts-expect-error - TS7006 - Parameter 'x' implicitly has an 'any' type. - `Collaborators: ${collaborators.map((x) => x?.name).join(', and ')}.` - : `Collaborators: ${collaborators - .slice(0, 2) - // @ts-expect-error - TS7006 - Parameter 'x' implicitly has an 'any' type. - .map((x) => x?.name) - .join(', ')} ${ - collaborators.length > 3 ? `and ${collaborators.length - 2} more.` : '.' - }`; - - return ( - - - - Display Only - - - ); - }} - - ); - - const interactiveExamples = ( - Element; addCollaborators: boolean[]; collaborators: any[][]; hideTitle: true; }' is not assignable to type 'IntrinsicAttributes & Props'. - addCollaborators={[true]} - collaborators={interactiveCollaborators} - hideTitle - > - {({ addCollaborators, collaborators }) => { - const accessibilityLabel = - collaborators.length <= 3 - ? // @ts-expect-error - TS7006 - Parameter 'x' implicitly has an 'any' type. - `Collaborators: ${collaborators.map((x) => x?.name).join(', and ')}.` - : `Collaborators: ${collaborators - .slice(0, 2) - // @ts-expect-error - TS7006 - Parameter 'x' implicitly has an 'any' type. - .map((x) => x?.name) - .join(', ')} ${ - collaborators.length > 3 ? `and ${collaborators.length - 2} more.` : '.' - }`; - - return addCollaborators && collaborators.length > 12 ? ( - - {}} - role="button" - size={avatarsize} - /> - - Interactive - - - ) : ( - - {}} - role="button" - size={avatarsize} - /> - - Interactive - - - ); - }} - - ); - - const sizeExamplesVR = ( - - - { - if (value === 'md' || value === 'xs' || value === 'sm') { - setAvatarsize(value); - } - }} - size="md" - value={avatarsize} - > - {[ - { label: 'xs', value: 'xs' }, - { label: 'sm', value: 'sm' }, - { label: 'md', value: 'md' }, - ].map(({ label, value }) => ( - - ))} - - - {staticExamples} - {interactiveExamples} - - ); - return ( @@ -842,85 +482,11 @@ If AvatarGroup is used as a control button to show/hide Popover-component, we re {({ size }) => ( >>>>>> da83e2698 (updated AvatarGroup examples) accessibilityLabel={ isInVRExperiment ? 'Collaborators: Fatima, Sora, Ayesha.' : 'Collaborators: Keerthi, Alberto, and Shanice.' } -<<<<<<< HEAD - collaborators={ - isInVRExperiment - ? [ - { - name: 'Fatima', - src: 'https://i.pinimg.com/originals/bf/bc/27/bfbc27685d81eb9a8f65c201ea661f0e.jpg', - }, - { - name: 'Sora', - src: 'https://i.pinimg.com/originals/ab/c5/4a/abc54abd85df131e90ca6b372368b738.jpg', - }, - { - name: 'Ayesha', - src: 'https://i.pinimg.com/originals/c5/5c/ac/c55caca43a7c16766215ec165b649c1c.jpg', - }, - ] - : [ - { - name: 'Keerthi', - src: 'https://i.ibb.co/ZfCZrY8/keerthi.jpg', - }, - { - name: 'Alberto', - src: 'https://i.ibb.co/NsK2w5y/Alberto.jpg', - }, - { - name: 'Shanice', - src: 'https://i.ibb.co/7tGKGvb/shanice.jpg', - }, - ] - } -======= - accessibilityLabel="Collaborators: Keerthi, Alberto, and Shanice." -<<<<<<< HEAD - collaborators={ isInVRExperiment ? [ - { - name: 'Sora', - src: 'https://i.pinimg.com/originals/ab/b6/ed/abb6ed2d94c8ed84c9ade8b21db6b5ab.jpg', - }, - { - name: 'Tamia', - src: 'https://i.pinimg.com/originals/7c/4c/7e/7c4c7e35d0c85fe3959c78841a59f153.jpg', - }, - { - name: 'Javier', - src: 'https://i.pinimg.com/originals/c2/ad/f1/c2adf1758516e3f21459a1717124cb66.jpg', - }, - ] : [ - { - name: 'Keerthi', - src: 'https://i.ibb.co/ZfCZrY8/keerthi.jpg', - }, - { - name: 'Alberto', - src: 'https://i.ibb.co/NsK2w5y/Alberto.jpg', - }, - { - name: 'Shanice', - src: 'https://i.ibb.co/7tGKGvb/shanice.jpg', - }, - ]} ->>>>>>> 80cd4e984 (working on docs) -======= -======= - accessibilityLabel={isInVRExperiment ? 'Collaborators: Fatima, Sora, Ayesha.' : 'Collaborators: Keerthi, Alberto, and Shanice.'} ->>>>>>> 4161d981c (updated images) -======= ->>>>>>> da83e2698 (updated AvatarGroup examples) collaborators={ isInVRExperiment ? [ @@ -952,7 +518,6 @@ If AvatarGroup is used as a control button to show/hide Popover-component, we re }, ] } ->>>>>>> a8d098199 (building examples) size={size} /> )} @@ -962,10 +527,6 @@ If AvatarGroup is used as a control button to show/hide Popover-component, we re )} -<<<<<<< HEAD -======= - Resize the width or number of avatars to see the AvatarGroup change to match the width of the Column it's been placed in. - " - title="Responsive sizing" - > - - } - /> - ->>>>>>> b81f81405 (fixed prop naming) -======= ->>>>>>> 80cd4e984 (working on docs) ; -type Props = DocumentedProps & Partial; - /** * [Avatar](https://gestalt.pinterest.systems/web/avatar) is used to represent a user. Every Avatar image has a subtle color wash. * @@ -77,15 +72,7 @@ function Avatar(props: Props) { }); const { accessibilityLabel, -<<<<<<< HEAD -<<<<<<< HEAD - avatarColor, -======= - avatarColorIndex, ->>>>>>> 950395011 (fixed focus outline) -======= avatarColor, ->>>>>>> b81f81405 (fixed prop naming) isHovered, isPressed, name, @@ -98,45 +85,15 @@ function Avatar(props: Props) { const handleImageError = () => setIsImageLoaded(false); const width = size === 'fit' ? '100%' : sizes[size]; const height = size === 'fit' ? '' : sizes[size]; -<<<<<<< HEAD -<<<<<<< HEAD -======= - const { handleOnBlur, handleOnFocus, isFocused } = useInteractiveStates(); - const { isFocusVisible } = useFocusVisible(); ->>>>>>> 950395011 (fixed focus outline) -======= ->>>>>>> b81f81405 (fixed prop naming) return (
>>>>>> b81f81405 (fixed prop naming) - })} -<<<<<<< HEAD - // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex - tabIndex={0} ->>>>>>> 950395011 (fixed focus outline) -======= ->>>>>>> ed3635c15 (removed focus from regular avatar) > >>>>>> 950395011 (fixed focus outline) -======= avatarColor={avatarColor} ->>>>>>> b81f81405 (fixed prop naming) isHovered={isHovered} isPressed={isPressed} name={name} diff --git a/packages/gestalt/src/Avatar/AvatarFoundation.css b/packages/gestalt/src/Avatar/AvatarFoundation.css index db8509617c..5051babb1c 100644 --- a/packages/gestalt/src/Avatar/AvatarFoundation.css +++ b/packages/gestalt/src/Avatar/AvatarFoundation.css @@ -5,15 +5,8 @@ } .outline { -<<<<<<< HEAD -<<<<<<< HEAD - outline: 1px solid var(--sema-color-border-focus-inner-default); -======= - outline: 1px solid var(--sema-color-border-focus-outer-default); ->>>>>>> 950395011 (fixed focus outline) -======= - outline: 1px solid var(--sema-color-border-focus-inner-default); ->>>>>>> 8e95c0684 (cleanup) + border-radius: 50%; + outline: 1px solid rgb(255 255 255); } .outlineVR { @@ -27,17 +20,23 @@ outline: 2px solid var(--sema-color-border-focus-outer-default); } +.imageHovered { + background: var(--sema-color-hover-background-wash-image-tint); +} + +.imagePressed { + background: var(--sema-color-pressed-background-wash-image-tint); +} + .innerDiv { display: flex; inset: 0; justify-content: center; position: absolute; -<<<<<<< HEAD } .text { composes: antialiased sansSerif fontWeightSemiBold from "../Typography.css"; - color: var(--color-icon-avatar-default); } .vrText { @@ -49,39 +48,10 @@ vertical-align: middle; } -.imageHovered { - background: var(--sema-color-hover-background-wash-image-tint); +.iconFillDefault { + fill: var(--color-icon-avatar-default); } -<<<<<<< HEAD -.imagePressed { - background: var(--sema-color-pressed-background-wash-image-tint); -======= .iconFillDarkMode { fill: var(--color-icon-light); -======= ->>>>>>> 950395011 (fixed focus outline) ->>>>>>> 4e0fbafb8 (fixed focus outline) -} - -.text { - composes: antialiased sansSerif fontWeightSemiBold from "../Typography.css"; - color: var(--color-icon-avatar-default); -} - -.vrText { - composes: lg from "../TextUI.css"; -} - -.icon { - stroke-width: 0; - vertical-align: middle; -} - -.imageHovered { - background: var(--sema-color-hover-background-wash-image-tint); -} - -.imagePressed { - background: var(--sema-color-pressed-background-wash-image-tint); } diff --git a/packages/gestalt/src/Avatar/DefaultAvatar.tsx b/packages/gestalt/src/Avatar/DefaultAvatar.tsx index 8550fc225c..d49f178004 100644 --- a/packages/gestalt/src/Avatar/DefaultAvatar.tsx +++ b/packages/gestalt/src/Avatar/DefaultAvatar.tsx @@ -2,15 +2,7 @@ import AvatarFoundation from './Foundation'; type Props = { accessibilityLabel?: string; -<<<<<<< HEAD -<<<<<<< HEAD avatarColor?: '01' | '02' | '03' | '04' | '05' | '06' | '07' | '08' | '09' | '10'; -======= - avatarColorIndex?: '01' | '02' | '03' | '04' | '05' | '06' | '07' | '08' | '09' | '10'; ->>>>>>> 950395011 (fixed focus outline) -======= - avatarColor?: '01' | '02' | '03' | '04' | '05' | '06' | '07' | '08' | '09' | '10'; ->>>>>>> b81f81405 (fixed prop naming) isHovered?: boolean; isPressed?: boolean; name: string; @@ -18,15 +10,7 @@ type Props = { export default function DefaultAvatar({ accessibilityLabel, -<<<<<<< HEAD -<<<<<<< HEAD - avatarColor, -======= - avatarColorIndex, ->>>>>>> 950395011 (fixed focus outline) -======= avatarColor, ->>>>>>> b81f81405 (fixed prop naming) isHovered, isPressed, name, diff --git a/packages/gestalt/src/Avatar/Foundation.tsx b/packages/gestalt/src/Avatar/Foundation.tsx index 5b1da3c0b6..36f1b6aba0 100644 --- a/packages/gestalt/src/Avatar/Foundation.tsx +++ b/packages/gestalt/src/Avatar/Foundation.tsx @@ -1,26 +1,11 @@ import { ReactNode } from 'react'; -import { useCookies } from 'react-cookie'; import classnames from 'classnames'; import { TOKEN_COLOR_BORDER_AVATAR, TOKEN_COLOR_TEXT_DEFAULT } from 'gestalt-design-tokens'; -<<<<<<< HEAD -import foundationStyles from './AvatarFoundation.css'; -======= -<<<<<<< HEAD import avatarStyles from './AvatarFoundation.css'; -======= -import foundationStyles from './AvatarFoundation.css'; ->>>>>>> 80cd4e984 (working on docs) ->>>>>>> 1d7a86c2a (working on docs) import getAvatarColorToken from './getAvatarColorToken'; -import avatarStyles from '../AvatarGroup.css'; +import avatarGroupStyles from '../AvatarGroup.css'; import Box from '../Box'; -<<<<<<< HEAD -======= -<<<<<<< HEAD import { useColorScheme } from '../contexts/ColorSchemeProvider'; -======= ->>>>>>> cff195f61 (fixed pressed state) ->>>>>>> 51f88bc1b (fixed pressed state) import icons from '../icons/index'; import vrIcons from '../icons-vr-theme/index'; import useInExperiment from '../useInExperiment'; @@ -37,9 +22,6 @@ type ResponsiveFitSizeBoxProps = { outline: boolean; }; -type ColorScheme = 'light' | 'dark'; -const colorSchemeKey = 'gestalt-color-scheme'; - function ResponsiveFitSizeBox({ avatarColor, content, @@ -54,127 +36,27 @@ function ResponsiveFitSizeBox({ mwebExperimentName: 'web_gestalt_visualRefresh', }); -<<<<<<< HEAD -<<<<<<< HEAD -<<<<<<< HEAD -<<<<<<< HEAD -<<<<<<< HEAD - const [cookies] = useCookies([colorSchemeKey]); - const colorScheme: ColorScheme = cookies[colorSchemeKey] === 'dark' ? 'dark' : 'light'; -======= -<<<<<<< HEAD -======= ->>>>>>> 6a2c8216a (fixed colors) -======= ->>>>>>> 1d7a86c2a (working on docs) -======= ->>>>>>> bf4255802 (building examples) -======= ->>>>>>> 83ae6ab77 (dark mode support for temp color values) const { colorSchemeName } = useColorScheme(); const isDarkMode = colorSchemeName === 'darkMode'; ->>>>>>> dcdd556c4 (fixed) const avatarBackgroundColor = content === 'icon' || isCollaboratorCount -<<<<<<< HEAD - ? getAvatarColorToken('default', isHovered, isPressed, colorScheme) - : getAvatarColorToken(avatarColor || 'default', isHovered, isPressed, colorScheme); -======= -<<<<<<< HEAD ? getAvatarColorToken('default', isHovered, isPressed, isDarkMode) : getAvatarColorToken(avatarColor || 'default', isHovered, isPressed, isDarkMode); -======= - ? TOKEN_COLOR_BACKGROUND_BOX_SECONDARY - : getAvatarColorToken(avatarColor || '06', isHovered, isPressed); ->>>>>>> b81f81405 (fixed prop naming) -<<<<<<< HEAD ->>>>>>> 50df2c38e (fixed prop naming) -======= -======= - const avatarBackgroundColor = getAvatarColorToken(content === 'icon' || isCollaboratorCount ? 'default' : avatarColor || 'default', isHovered, isPressed); ->>>>>>> 80cd4e984 (working on docs) -<<<<<<< HEAD ->>>>>>> 1d7a86c2a (working on docs) -======= -======= - const avatarBackgroundColor = - content === 'icon' || isCollaboratorCount - ? getAvatarColorToken('default', isHovered, isPressed) - : getAvatarColorToken(avatarColor || 'default', isHovered, isPressed); ->>>>>>> a8d098199 (building examples) -<<<<<<< HEAD ->>>>>>> bf4255802 (building examples) -======= -======= - const [cookies] = useCookies([colorSchemeKey]); - const colorScheme: ColorScheme = cookies[colorSchemeKey] === 'dark' ? 'dark' : 'light'; - - const avatarBackgroundColor = - content === 'icon' || isCollaboratorCount - ? getAvatarColorToken('default', isHovered, isPressed, colorScheme) - : getAvatarColorToken(avatarColor || 'default', isHovered, isPressed, colorScheme); ->>>>>>> 9c35bc114 (dark mode support for temp color values) ->>>>>>> 83ae6ab77 (dark mode support for temp color values) return isInVRExperiment ? (
>>>>>> 950395011 (fixed focus outline) -======= className={classnames({ - [foundationStyles.container]: true, - [foundationStyles.outline]: !isInVRExperiment && outline, - [foundationStyles.outlineVR]: isInVRExperiment && outline, + [avatarStyles.container]: true, + [avatarStyles.outline]: !isInVRExperiment && outline, + [avatarStyles.outlineVR]: isInVRExperiment && outline, })} ->>>>>>> 4707f0fa6 (fixed container) role="button" style={{ -<<<<<<< HEAD -<<<<<<< HEAD -<<<<<<< HEAD backgroundColor: avatarBackgroundColor, -======= - backgroundColor: isInVRExperiment ? avatarBackgroundColor : '06', ->>>>>>> 245f695f5 (prettier) -======= - backgroundColor: avatarBackgroundColor ->>>>>>> 80cd4e984 (working on docs) -======= - backgroundColor: avatarBackgroundColor, ->>>>>>> a8d098199 (building examples) }} > -<<<<<<< HEAD -
{children}
-=======
{children}
->>>>>>> 6a2c8216a (fixed colors) -
- ) : ( - -<<<<<<< HEAD -======= -
{children}
) : ( ->>>>>>> dcdd556c4 (fixed) >>>>>> cff195f61 (fixed pressed state) -======= ->>>>>>> 8e95c0684 (cleanup) const isInVRExperiment = useInExperiment({ webExperimentName: 'web_gestalt_visualRefresh', mwebExperimentName: 'web_gestalt_visualRefresh', }); + const { colorSchemeName } = useColorScheme(); + const isDarkMode = colorSchemeName === 'darkMode'; return ( {title} : null} >>>>>> 4e0fbafb8 (fixed focus outline) [avatarStyles.text]: !isInVRExperiment, [avatarStyles.vrText]: isInVRExperiment, -======= - [foundationStyles.text]: !isInVRExperiment, -<<<<<<< HEAD - [foundationStyles.textVR]: isInVRExperiment, ->>>>>>> 6408ebbaf (fixed) ->>>>>>> dcdd556c4 (fixed) -======= - [avatarStyles.text]: !isInVRExperiment, - [avatarStyles.vrText]: isInVRExperiment, ->>>>>>> 6a2c8216a (fixed colors) -======= - [foundationStyles.vrText]: isInVRExperiment, ->>>>>>> 950395011 (fixed focus outline) ->>>>>>> 4e0fbafb8 (fixed focus outline) }, )} dy="0.35em" @@ -305,30 +158,11 @@ export default function AvatarFoundation({ ) : null} {content === 'icon' ? ( >>>>>> 6a2c8216a (fixed colors) - })} -======= - className={classnames({ - // [avatarStyles.text]: true, - [foundationStyles.icon]: true, - })} ->>>>>>> cff195f61 (fixed pressed state) -======= - className={classnames({ - [avatarStyles.text]: true, - [foundationStyles.icon]: true, })} ->>>>>>> 8e95c0684 (cleanup) preserveAspectRatio="xMidYMid meet" // percentual width to the parent container, reduces icon to 20px on a 48px parent container and keeps proportions upon resizing role="img" // full icon size version="1.1" diff --git a/packages/gestalt/src/Avatar/getAvatarColorToken.ts b/packages/gestalt/src/Avatar/getAvatarColorToken.ts index 486124a9b2..e7ce660a6c 100644 --- a/packages/gestalt/src/Avatar/getAvatarColorToken.ts +++ b/packages/gestalt/src/Avatar/getAvatarColorToken.ts @@ -9,29 +9,7 @@ interface ColorTokens { } // Need to replace color tokens -<<<<<<< HEAD -<<<<<<< HEAD -<<<<<<< HEAD -const colorTokensLight: ColorTokens = { -======= -<<<<<<< HEAD const colorTokensLight: ColorTokens = Object.freeze({ ->>>>>>> bd0922cb1 (colors working) -======= -======= ->>>>>>> 83ae6ab77 (dark mode support for temp color values) -<<<<<<< HEAD -const colorTokensLight: ColorTokens = Object.freeze({ -======= -const colorTokens: ColorTokens = { ->>>>>>> 80cd4e984 (working on docs) -<<<<<<< HEAD ->>>>>>> 1d7a86c2a (working on docs) -======= -======= -const colorTokensLight: ColorTokens = { ->>>>>>> 9c35bc114 (dark mode support for temp color values) ->>>>>>> 83ae6ab77 (dark mode support for temp color values) 'default': { base: '#E8E7E1', hover: '#D6D4CD', @@ -42,220 +20,64 @@ const colorTokensLight: ColorTokens = { base: '#FFD3D1', hover: '#FBBEBB', pressed: '#F4A8A4', -======= -const colorTokens: ColorTokens = { - '01': { - // redWeak - base: '#FFD3D1', - hover: '#FBBEBB', -<<<<<<< HEAD - pressed: '#F4A8A4' ->>>>>>> 466cf26aa (colors working) -======= - pressed: '#F4A8A4', ->>>>>>> 245f695f5 (prettier) }, '02': { // redDefault base: '#FF9494', hover: '#F87777', -<<<<<<< HEAD -<<<<<<< HEAD - pressed: '#ED5A5A', -======= - pressed: '#ED5A5A' ->>>>>>> 466cf26aa (colors working) -======= pressed: '#ED5A5A', ->>>>>>> 245f695f5 (prettier) }, '03': { // purpleWeak base: '#FCD8FC', hover: '#FAC7FA', -<<<<<<< HEAD -<<<<<<< HEAD pressed: '#F8B5F8', -======= - pressed: '#F8B5F8' ->>>>>>> 466cf26aa (colors working) -======= - pressed: '#F8B5F8', ->>>>>>> 245f695f5 (prettier) }, '04': { // purpleDefault base: '#EFADEF', hover: '#E599E5', -<<<<<<< HEAD -<<<<<<< HEAD - pressed: '#DA86DA', -======= - pressed: '#DA86DA' ->>>>>>> 466cf26aa (colors working) -======= pressed: '#DA86DA', ->>>>>>> 245f695f5 (prettier) }, '05': { // blueWeak base: '#C5EAF7', hover: '#A8DDF0', -<<<<<<< HEAD -<<<<<<< HEAD - pressed: '#8ECFE6', -======= - pressed: '#8ECFE6' ->>>>>>> 466cf26aa (colors working) -======= pressed: '#8ECFE6', ->>>>>>> 245f695f5 (prettier) }, '06': { // blueDefault base: '#7CBEDE', hover: '#58A9D0', -<<<<<<< HEAD -<<<<<<< HEAD pressed: '#4096BF', -======= - pressed: '#4096BF' ->>>>>>> 466cf26aa (colors working) -======= - pressed: '#4096BF', ->>>>>>> 245f695f5 (prettier) }, '07': { // greenWeak base: '#D0E2A8', hover: '#BCD090', -<<<<<<< HEAD -<<<<<<< HEAD - pressed: '#A7B97E', -======= - pressed: '#A7B97E' ->>>>>>> 466cf26aa (colors working) -======= pressed: '#A7B97E', ->>>>>>> 245f695f5 (prettier) }, '08': { // greenDefault base: '#A8BB63', hover: '#93A550', -<<<<<<< HEAD -<<<<<<< HEAD - pressed: '#81904C', -======= - pressed: '#81904C' ->>>>>>> 466cf26aa (colors working) -======= pressed: '#81904C', ->>>>>>> 245f695f5 (prettier) }, '09': { // orangeWeak base: '#FDE7C9', hover: '#F9D9AE', -<<<<<<< HEAD -<<<<<<< HEAD pressed: '#F4CC95', -======= - pressed: '#F4CC95' ->>>>>>> 466cf26aa (colors working) -======= - pressed: '#F4CC95', ->>>>>>> 245f695f5 (prettier) }, '10': { // orangeDefault base: '#FBC55B', hover: '#F8B430', -<<<<<<< HEAD -<<<<<<< HEAD pressed: '#F1A613', -======= - pressed: '#F1A613' ->>>>>>> 466cf26aa (colors working) - }, -}; - -const colorTokensDark: ColorTokens = { - 'default': { - base: '#757570', - hover: '#757570', - pressed: '#757570', - }, - '01': { - // redWeak - base: '#8A0F0F', - hover: '#8A0F0F', - pressed: '#8A0F0F', - }, - '02': { - // redDefault - base: '#B2001A', - hover: '#B2001A', - pressed: '#B2001A', - }, - '03': { - // purpleWeak - base: '#6D4270', - hover: '#6D4270', - pressed: '#6D4270', - }, - '04': { - // purpleDefault - base: '#8F4696', - hover: '#8F4696', - pressed: '#8F4696', - }, - '05': { - // blueWeak - base: '#215D82', - hover: '#215D82', - pressed: '#215D82', }, - '06': { - // blueDefault - base: '#007DB8', - hover: '#007DB8', - pressed: '#007DB8', - }, - '07': { - // greenWeak - base: '#265926', - hover: '#265926', - pressed: '#265926', - }, - '08': { - // greenDefault - base: '#517D3B', - hover: '#517D3B', - pressed: '#517D3B', - }, - '09': { - // orangeWeak - base: '#9B4B1C', - hover: '#9B4B1C', - pressed: '#9B4B1C', - }, - '10': { - // orangeDefault - base: '#9B4B1C', - hover: '#9B4B1C', - pressed: '#9B4B1C', - }, -<<<<<<< HEAD -}; -======= }); -======= - pressed: '#F1A613', - }, -}; -const colorTokensDark: ColorTokens = { +const colorTokensDark: ColorTokens = Object.freeze({ 'default': { base: '#757570', hover: '#757570', @@ -321,57 +143,26 @@ const colorTokensDark: ColorTokens = { hover: '#9B4B1C', pressed: '#9B4B1C', }, -}; - -type BackgroundColorLight = keyof typeof colorTokensLight; -type BackgroundColorDark = keyof typeof colorTokensDark; -type GetAvatarColorToken = ( - avatarColor: BackgroundColorLight | BackgroundColorDark, - isHovered?: boolean, - isPressed?: boolean, - colorScheme?: 'light' | 'dark', -) => string; ->>>>>>> 245f695f5 (prettier) ->>>>>>> e81ae73dd (prettier) +}); -<<<<<<< HEAD -<<<<<<< HEAD type BackgroundColorLight = keyof typeof colorTokensLight; type BackgroundColorDark = keyof typeof colorTokensDark; type GetAvatarColorToken = ( avatarColor: BackgroundColorLight | BackgroundColorDark, isHovered?: boolean, isPressed?: boolean, - colorScheme?: 'light' | 'dark', + isDarkMode?: boolean ) => string; -======= ->>>>>>> 9c35bc114 (dark mode support for temp color values) const getAvatarColorToken: GetAvatarColorToken = ( avatarColor, isHovered, isPressed, -<<<<<<< HEAD - colorScheme, -======= -<<<<<<< HEAD isDarkMode, ->>>>>>> 83ae6ab77 (dark mode support for temp color values) -) => { - const colorToken = - colorScheme === 'light' ? colorTokensLight[avatarColor] : colorTokensDark[avatarColor]; - -======= -const getAvatarColorToken: GetAvatarColorToken = (avatarColor, isHovered, isPressed) => { - const colorToken = colorTokens[avatarColor]; -======= - colorScheme, ) => { const colorToken = - colorScheme === 'light' ? colorTokensLight[avatarColor] : colorTokensDark[avatarColor]; ->>>>>>> 9c35bc114 (dark mode support for temp color values) + isDarkMode ? colorTokensDark[avatarColor] : colorTokensLight[avatarColor]; ->>>>>>> b81f81405 (fixed prop naming) if (!colorToken || !avatarColor) { throw new Error(`Invalid background color: ${avatarColor}`); } diff --git a/packages/gestalt/src/AvatarGroup.css b/packages/gestalt/src/AvatarGroup.css index 87b7199b26..edee1df093 100644 --- a/packages/gestalt/src/AvatarGroup.css +++ b/packages/gestalt/src/AvatarGroup.css @@ -31,49 +31,3 @@ html[dir="rtl"] .translateX10 { transform: translateX(10%); } -<<<<<<< HEAD -======= -<<<<<<< HEAD -======= ->>>>>>> 50df2c38e (fixed prop naming) - -.text { - color: var(--color-icon-avatar-default); -} - -<<<<<<< HEAD -<<<<<<< HEAD -.focused { -======= -======= ->>>>>>> b08ccdd67 (cleanup) -.groupFocused { ->>>>>>> 50df2c38e (fixed prop naming) - border: 2px solid var(--sema-color-border-focus-inner-default); - border-radius: var(--sema-rounding-pill); - outline: 2px solid var(--sema-color-border-focus-outer-default); -} -<<<<<<< HEAD -======= - -.singleFocused { - border: 2px solid var(--sema-color-border-focus-inner-default); - border-radius: var(--sema-rounding-circle); - outline: 2px solid var(--sema-color-border-focus-outer-default); -} -<<<<<<< HEAD ->>>>>>> b81f81405 (fixed prop naming) -<<<<<<< HEAD ->>>>>>> 50df2c38e (fixed prop naming) -======= -======= - -======= ->>>>>>> 8e95c0684 (cleanup) -.focused { - border: 2px solid var(--sema-color-border-focus-inner-default); - border-radius: var(--sema-rounding-pill); - outline: 2px solid var(--sema-color-border-focus-outer-default); -} ->>>>>>> cff195f61 (fixed pressed state) ->>>>>>> 51f88bc1b (fixed pressed state) diff --git a/packages/gestalt/src/AvatarGroup.tsx b/packages/gestalt/src/AvatarGroup.tsx index 9c990590bb..f25b416fb2 100644 --- a/packages/gestalt/src/AvatarGroup.tsx +++ b/packages/gestalt/src/AvatarGroup.tsx @@ -48,19 +48,7 @@ type Props = { * The user group data. See the [collaborators display](https://gestalt.pinterest.systems/web/avatargroup#Collaborators-display) variant to learn more. */ collaborators: ReadonlyArray<{ -<<<<<<< HEAD -<<<<<<< HEAD -<<<<<<< HEAD avatarColor?: '01' | '02' | '03' | '04' | '05' | '06' | '07' | '08' | '09' | '10'; -======= - avatarColorIndex?: string; ->>>>>>> 389753d3c (fixed typing) -======= - avatarColorIndex?: '01' | '02' | '03' | '04' | '05' | '06' | '07' | '08' | '09' | '10'; ->>>>>>> 6408ebbaf (fixed) -======= - avatarColor?: '01' | '02' | '03' | '04' | '05' | '06' | '07' | '08' | '09' | '10'; ->>>>>>> b81f81405 (fixed prop naming) name: string; src?: string; }>; @@ -255,34 +243,58 @@ const AvatarGroupWithForwardRef = forwardRef(function AvatarGr ); } + if (isInVRExperiment && role === 'link' && href) { + return ( + | undefined} + accessibilityLabel={accessibilityLabel} + fullWidth={false} + href={href} + innerFocusColor="default" + onMouseDown={handleOnMouseDown} + onMouseEnter={handleOnMouseEnter} + onMouseLeave={handleOnMouseLeave} + onMouseUp={handleOnMouseUp} + onTap={({ event, dangerouslyDisableOnNavigation }) => + onClick?.({ event, dangerouslyDisableOnNavigation }) + } + rounding="pill" + tapStyle="compress" + > + {avatarGroupStack} + + ); + } + + if (isInVRExperiment && role === 'button' && onClick) { + return ( + | undefined} + accessibilityControls={accessibilityControls} + accessibilityExpanded={accessibilityExpanded} + accessibilityHaspopup={accessibilityHaspopup} + accessibilityLabel={accessibilityLabel} + fullWidth={false} + innerFocusColor="default" + onMouseDown={handleOnMouseDown} + onMouseEnter={handleOnMouseEnter} + onMouseLeave={handleOnMouseLeave} + onMouseUp={handleOnMouseUp} + // @ts-expect-error - TS2345 - Argument of type '{ event: KeyboardEvent | MouseEvent; }' is not assignable to parameter of type '{ event: MouseEvent | KeyboardEvent | KeyboardEvent<...> | MouseEvent<...>; dangerouslyDisableOnNavigation: () => void; }'. + onTap={({ event }) => onClick({ event })} + rounding="pill" + tapStyle="compress" + > + {avatarGroupStack} + + ); + } + if (isInVRExperiment && role === 'link' && href) { return (
>>>>>> 950395011 (fixed focus outline) - [avatarGroupStyles.focused]: true, ->>>>>>> f0a23bbc2 (text ui working) -======= - [avatarGroupStyles.groupFocused]: displayedCollaborators.length > 1 && isFocused && isFocusVisible, - [avatarGroupStyles.singleFocused]: displayedCollaborators.length === 1 && isFocused && isFocusVisible, ->>>>>>> b81f81405 (fixed prop naming) -======= - // [avatarGroupStyles.focused]: displayedCollaborators.length > 1 && isFocused && isFocusVisible, - // [avatarGroupStyles.focused]: displayedCollaborators.length === 1 && isFocused && isFocusVisible, -======= ->>>>>>> 8e95c0684 (cleanup) - [avatarGroupStyles.focused]: isFocused && isFocusVisible, ->>>>>>> cff195f61 (fixed pressed state) })} onBlur={handleOnBlur} onFocus={handleOnFocus} @@ -314,25 +326,7 @@ const AvatarGroupWithForwardRef = forwardRef(function AvatarGr return (
>>>>>> 950395011 (fixed focus outline) -======= - [avatarGroupStyles.groupFocused]: displayedCollaborators.length > 1 && isFocused && isFocusVisible, - [avatarGroupStyles.singleFocused]: displayedCollaborators.length === 1 && isFocused && isFocusVisible, ->>>>>>> b81f81405 (fixed prop naming) -======= - // [avatarGroupStyles.focused]: displayedCollaborators.length > 1 && isFocused && isFocusVisible, - // [avatarGroupStyles.focused]: displayedCollaborators.length === 1 && isFocused && isFocusVisible, -======= ->>>>>>> 8e95c0684 (cleanup) [avatarGroupStyles.focused]: isFocused && isFocusVisible, ->>>>>>> cff195f61 (fixed pressed state) })} onBlur={handleOnBlur} onFocus={handleOnFocus}