From 4fb768622794f6a01d266f1dd3454b4b5f6024f3 Mon Sep 17 00:00:00 2001 From: saurabhraghuvanshii Date: Wed, 6 Aug 2025 09:46:38 +0000 Subject: [PATCH 1/2] added resize icon Signed-off-by: saurabhraghuvanshii --- CONTRIBUTING.md | 1 + .../CollaboratorAvatarGroup.tsx | 14 +++++++++-- src/custom/Panel/Panel.tsx | 8 +++++-- src/custom/Panel/style.tsx | 14 +++++++++++ src/icons/Resize/ResizeIcon.tsx | 23 +++++++++++++++++++ src/icons/Resize/index.ts | 1 + src/icons/index.ts | 1 + 7 files changed, 58 insertions(+), 4 deletions(-) create mode 100644 src/icons/Resize/ResizeIcon.tsx create mode 100644 src/icons/Resize/index.ts diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index eb0ddc547..ad860ae73 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -148,4 +148,5 @@ This repository and site are available as open source under the terms of the [Ap

The Layer5 community represents the largest collection of service mesh projects and their maintainers in the world.

**Open Source First** +

At Layer5, we champion developer-defined infrastructure, giving engineers the power to reshape application delivery. We empower operators in reimagining how they manage modern infrastructure: collaboratively.

diff --git a/src/custom/CollaboratorAvatarGroup/CollaboratorAvatarGroup.tsx b/src/custom/CollaboratorAvatarGroup/CollaboratorAvatarGroup.tsx index ed704a6e8..8f12c1fea 100644 --- a/src/custom/CollaboratorAvatarGroup/CollaboratorAvatarGroup.tsx +++ b/src/custom/CollaboratorAvatarGroup/CollaboratorAvatarGroup.tsx @@ -1,6 +1,6 @@ import { ExpandMore } from '@mui/icons-material'; import { MouseEvent, useState } from 'react'; -import { Avatar, AvatarGroup, Button, Popover, Typography, Divider } from '../../base'; +import { Avatar, AvatarGroup, Button, Divider, Popover, Typography } from '../../base'; import { iconSmall } from '../../constants/iconsSizes'; import { styled, useTheme } from '../../theme'; import { DARK_TEAL_BLUE } from '../../theme/colors/colors'; @@ -146,7 +146,17 @@ const CollaboratorAvatarGroup = ({ key={clientID} title={
- {user.name} + + {user.name} +
{children} + + + diff --git a/src/custom/Panel/style.tsx b/src/custom/Panel/style.tsx index 17c6fc80b..74655f665 100644 --- a/src/custom/Panel/style.tsx +++ b/src/custom/Panel/style.tsx @@ -129,3 +129,17 @@ export const PanelTitle = styled('div')(() => ({ marginInline: 'auto', width: 'fit-content' })); + +export const ResizeIconContainer = styled('div')(({ theme }) => ({ + position: 'absolute', + bottom: '-14px', + right: '14px', + pointerEvents: 'none', + '& svg': { + width: '18px', + height: '18px', + stroke: 'currentColor', + fill: 'currentColor', + color: theme.palette.text.primary + } +})); diff --git a/src/icons/Resize/ResizeIcon.tsx b/src/icons/Resize/ResizeIcon.tsx new file mode 100644 index 000000000..4d7777d73 --- /dev/null +++ b/src/icons/Resize/ResizeIcon.tsx @@ -0,0 +1,23 @@ +import { FC } from 'react'; +import { DEFAULT_HEIGHT, DEFAULT_WIDTH } from '../../constants/constants'; +import { IconProps } from '../types'; + +export const ResizeIcon: FC = ({ + width = DEFAULT_WIDTH, + height = DEFAULT_HEIGHT, + ...props +}) => { + return ( + + + + ); +}; + +export default ResizeIcon; diff --git a/src/icons/Resize/index.ts b/src/icons/Resize/index.ts new file mode 100644 index 000000000..2a86d249d --- /dev/null +++ b/src/icons/Resize/index.ts @@ -0,0 +1 @@ +export { default as ResizeIcon } from './ResizeIcon'; diff --git a/src/icons/index.ts b/src/icons/index.ts index 284941302..3592c4363 100644 --- a/src/icons/index.ts +++ b/src/icons/index.ts @@ -99,6 +99,7 @@ export * from './Rectangle'; export * from './Redo'; export * from './Remove'; export * from './Reset'; +export * from './Resize'; export * from './RightArrow'; export * from './Ring'; export * from './Save'; From 9a23089ead5a2dbb34a9b16c49f23c1bbbe96656 Mon Sep 17 00:00:00 2001 From: saurabhraghuvanshii Date: Sat, 9 Aug 2025 04:43:46 +0530 Subject: [PATCH 2/2] chore: update suggestion and position Signed-off-by: saurabhraghuvanshii --- CONTRIBUTING.md | 1 - .../CollaboratorAvatarGroup.tsx | 14 ++------------ src/custom/Panel/style.tsx | 4 ++-- 3 files changed, 4 insertions(+), 15 deletions(-) diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index ad860ae73..eb0ddc547 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -148,5 +148,4 @@ This repository and site are available as open source under the terms of the [Ap

The Layer5 community represents the largest collection of service mesh projects and their maintainers in the world.

**Open Source First** -

At Layer5, we champion developer-defined infrastructure, giving engineers the power to reshape application delivery. We empower operators in reimagining how they manage modern infrastructure: collaboratively.

diff --git a/src/custom/CollaboratorAvatarGroup/CollaboratorAvatarGroup.tsx b/src/custom/CollaboratorAvatarGroup/CollaboratorAvatarGroup.tsx index 8f12c1fea..ed704a6e8 100644 --- a/src/custom/CollaboratorAvatarGroup/CollaboratorAvatarGroup.tsx +++ b/src/custom/CollaboratorAvatarGroup/CollaboratorAvatarGroup.tsx @@ -1,6 +1,6 @@ import { ExpandMore } from '@mui/icons-material'; import { MouseEvent, useState } from 'react'; -import { Avatar, AvatarGroup, Button, Divider, Popover, Typography } from '../../base'; +import { Avatar, AvatarGroup, Button, Popover, Typography, Divider } from '../../base'; import { iconSmall } from '../../constants/iconsSizes'; import { styled, useTheme } from '../../theme'; import { DARK_TEAL_BLUE } from '../../theme/colors/colors'; @@ -146,17 +146,7 @@ const CollaboratorAvatarGroup = ({ key={clientID} title={
- - {user.name} - + {user.name}