Skip to content

Commit 87bc9b8

Browse files
arunjaindevarunjaindev
authored
Merge pull request #1000 from devtron-labs/feat/navigation-upgraded
feat: navigation upgraded
2 parents 0b4ffbb + 2ff76f5 commit 87bc9b8

11 files changed

Lines changed: 57 additions & 8 deletions

File tree

‎package-lock.json‎

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@devtron-labs/devtron-fe-common-lib",
3-
"version": "1.22.4",
3+
"version": "1.22.5",
44
"description": "Supporting common component library",
55
"type": "module",
66
"main": "dist/index.js",

‎src/Assets/IconV2/ic-curved-arrow.svg‎

Lines changed: 3 additions & 0 deletions
Loading

‎src/Assets/IconV2/ic-nav-cursor.svg‎

Lines changed: 10 additions & 0 deletions
Loading

‎src/Assets/Illustration/cmd-bar-visual.webp‎

20.1 KB
Loading

‎src/Shared/Components/DTFocusTrap/DTFocusTrap.tsx‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -38,11 +38,24 @@ const DTFocusTrap = ({
3838
[onEscape, deactivateFocusOnEscape],
3939
)
4040

41+
// Focus escape key bind when focus trap is avoided
42+
const handleEscapeKeyBind = (e: KeyboardEvent) => {
43+
if (e.key === 'Escape') {
44+
onEscape(e)
45+
}
46+
}
47+
4148
useEffect(() => {
49+
if (avoidFocusTrap) {
50+
document.addEventListener('keydown', handleEscapeKeyBind)
51+
}
4252
preventBodyScroll(true)
4353

4454
return () => {
4555
preventBodyScroll(false)
56+
if (avoidFocusTrap) {
57+
document.removeEventListener('keydown', handleEscapeKeyBind)
58+
}
4659
}
4760
}, [])
4861

‎src/Shared/Components/GenericModal/GenericModal.component.tsx‎

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ import { noop, stopPropagation } from '@Common/Helper'
2121
import { Backdrop, Button, ButtonStyleType, ButtonVariantType, Icon } from '@Shared/Components'
2222
import { ComponentSizeType } from '@Shared/constants'
2323

24-
import { MODAL_WIDTH_TO_CLASS_NAME_MAP } from './constants'
24+
import { BORDER_VARIANT_TO_CLASS_NAME_MAP, MODAL_WIDTH_TO_CLASS_NAME_MAP } from './constants'
2525
import { GenericModalProvider, useGenericModalContext } from './GenericModal.context'
2626
import { GenericModalFooterProps, GenericModalHeaderProps, GenericModalProps } from './types'
2727

@@ -87,13 +87,20 @@ const GenericModal = ({
8787
onEscape = noop,
8888
closeOnBackdropClick = false,
8989
children,
90+
avoidFocusTrap = false,
91+
borderVariant = 'secondary',
92+
alignCenter = false,
9093
}: PropsWithChildren<GenericModalProps>) => (
9194
<AnimatePresence>
9295
{open && (
9396
<GenericModalProvider value={{ name, onClose }}>
94-
<Backdrop onEscape={onEscape} onClick={closeOnBackdropClick ? onClose : noop}>
97+
<Backdrop
98+
onEscape={onEscape}
99+
onClick={closeOnBackdropClick ? onClose : noop}
100+
avoidFocusTrap={avoidFocusTrap}
101+
>
95102
<motion.div
96-
className={`shadow__modal flexbox-col bg__primary border__secondary br-${borderRadius} dc__m-auto mt-40 dc__overflow-hidden ${MODAL_WIDTH_TO_CLASS_NAME_MAP[width]}`}
103+
className={`shadow__modal flexbox-col bg__primary ${BORDER_VARIANT_TO_CLASS_NAME_MAP[borderVariant]} br-${borderRadius} dc__m-auto ${alignCenter ? '' : 'mt-40'} dc__overflow-hidden ${MODAL_WIDTH_TO_CLASS_NAME_MAP[width]}`}
97104
exit={{ y: 100, opacity: 0, scale: 0.75, transition: { duration: 0.35 } }}
98105
initial={{ y: 100, opacity: 0, scale: 0.75 }}
99106
animate={{ y: 0, opacity: 1, scale: 1 }}

‎src/Shared/Components/GenericModal/constants.ts‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,11 +14,17 @@
1414
* limitations under the License.
1515
*/
1616

17-
import { GenericModalProps } from './types'
17+
import { BorderVariantType, GenericModalProps } from './types'
1818

1919
export const MODAL_WIDTH_TO_CLASS_NAME_MAP: Record<GenericModalProps['width'], string> = {
2020
450: 'w-450',
2121
500: 'w-500',
2222
600: 'w-600',
2323
800: 'w-800',
2424
}
25+
26+
export const BORDER_VARIANT_TO_CLASS_NAME_MAP: Record<BorderVariantType, string> = {
27+
secondary: 'border__secondary',
28+
none: '',
29+
'secondary-translucent': 'border__secondary-translucent',
30+
}

‎src/Shared/Components/GenericModal/types.ts‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,9 @@
1717
import { BackdropProps } from '../Backdrop'
1818
import { ButtonProps } from '../Button'
1919

20-
export interface GenericModalProps extends Partial<Pick<BackdropProps, 'onEscape'>> {
20+
export type BorderVariantType = 'secondary' | 'none' | 'secondary-translucent'
21+
22+
export interface GenericModalProps extends Partial<Pick<BackdropProps, 'onEscape' | 'avoidFocusTrap'>> {
2123
/** Unique identifier for the modal */
2224
name: string
2325
/** Controls whether the modal is visible or hidden */
@@ -35,6 +37,8 @@ export interface GenericModalProps extends Partial<Pick<BackdropProps, 'onEscape
3537
* @default false
3638
*/
3739
closeOnBackdropClick?: boolean
40+
borderVariant?: BorderVariantType
41+
alignCenter?: boolean
3842
}
3943

4044
export interface GenericModalContextType extends Pick<GenericModalProps, 'name' | 'onClose'> {}

‎src/Shared/Components/Icon/Icon.tsx‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -96,6 +96,7 @@ import { ReactComponent as ICCostVisibility } from '@IconsV2/ic-cost-visibility.
9696
import { ReactComponent as ICCpu } from '@IconsV2/ic-cpu.svg'
9797
import { ReactComponent as ICCrown } from '@IconsV2/ic-crown.svg'
9898
import { ReactComponent as ICCube } from '@IconsV2/ic-cube.svg'
99+
import { ReactComponent as ICCurvedArrow } from '@IconsV2/ic-curved-arrow.svg'
99100
import { ReactComponent as ICDatabaseBackup } from '@IconsV2/ic-database-backup.svg'
100101
import { ReactComponent as ICDelete } from '@IconsV2/ic-delete.svg'
101102
import { ReactComponent as ICDeleteDots } from '@IconsV2/ic-delete-dots.svg'
@@ -217,6 +218,7 @@ import { ReactComponent as ICMobile } from '@IconsV2/ic-mobile.svg'
217218
import { ReactComponent as ICMonitoring } from '@IconsV2/ic-monitoring.svg'
218219
import { ReactComponent as ICMoreVertical } from '@IconsV2/ic-more-vertical.svg'
219220
import { ReactComponent as ICNamespace } from '@IconsV2/ic-namespace.svg'
221+
import { ReactComponent as ICNavCursor } from '@IconsV2/ic-nav-cursor.svg'
220222
import { ReactComponent as ICNew } from '@IconsV2/ic-new.svg'
221223
import { ReactComponent as ICNodeScript } from '@IconsV2/ic-node-script.svg'
222224
import { ReactComponent as ICOidc } from '@IconsV2/ic-oidc.svg'
@@ -412,6 +414,7 @@ export const iconMap = {
412414
'ic-cpu': ICCpu,
413415
'ic-crown': ICCrown,
414416
'ic-cube': ICCube,
417+
'ic-curved-arrow': ICCurvedArrow,
415418
'ic-database-backup': ICDatabaseBackup,
416419
'ic-delete-dots': ICDeleteDots,
417420
'ic-delete-lightning': ICDeleteLightning,
@@ -533,6 +536,7 @@ export const iconMap = {
533536
'ic-monitoring': ICMonitoring,
534537
'ic-more-vertical': ICMoreVertical,
535538
'ic-namespace': ICNamespace,
539+
'ic-nav-cursor': ICNavCursor,
536540
'ic-new': ICNew,
537541
'ic-node-script': ICNodeScript,
538542
'ic-oidc': ICOidc,

0 commit comments

Comments
 (0)