From 6c6ce49677e7cf2ea76e44f703b274328f267ecf Mon Sep 17 00:00:00 2001 From: Luv Kapur Date: Tue, 31 Jan 2023 11:20:55 -0500 Subject: [PATCH 1/5] add full datetimestamp tooltip to timeAgo --- scopes/design/ui/time-ago/time-ago.module.scss | 9 +++++++++ scopes/design/ui/time-ago/time-ago.tsx | 14 +++++++++++--- 2 files changed, 20 insertions(+), 3 deletions(-) create mode 100644 scopes/design/ui/time-ago/time-ago.module.scss diff --git a/scopes/design/ui/time-ago/time-ago.module.scss b/scopes/design/ui/time-ago/time-ago.module.scss new file mode 100644 index 000000000000..079c1d22cc7f --- /dev/null +++ b/scopes/design/ui/time-ago/time-ago.module.scss @@ -0,0 +1,9 @@ +.dateTooltip, +.dateTooltipContent { + display: flex; +} + +.dateTooltip { + max-width: unset !important; // Override inline css from Tippyjs + width: max-content; +} diff --git a/scopes/design/ui/time-ago/time-ago.tsx b/scopes/design/ui/time-ago/time-ago.tsx index 20b1042a7221..cc78a37e1523 100644 --- a/scopes/design/ui/time-ago/time-ago.tsx +++ b/scopes/design/ui/time-ago/time-ago.tsx @@ -1,6 +1,8 @@ import timeAgo from '@teambit/base-ui.utils.time-ago'; import classNames from 'classnames'; import React, { useEffect, useMemo, useReducer } from 'react'; +import { Tooltip } from '@teambit/design.ui.tooltip'; +import styles from './time-ago.module.scss'; type TimeAgoProps = { date: string | number; @@ -21,8 +23,14 @@ export function TimeAgo(props: TimeAgoProps) { }, [date, refreshIdx]); return ( - - {formatted} - + {date}} + > + + {formatted} + + ); } From 75b0a4e5a18a99dde9a8cbfcf98155f99b0812f0 Mon Sep 17 00:00:00 2001 From: Luv Kapur Date: Tue, 31 Jan 2023 12:49:51 -0500 Subject: [PATCH 2/5] fix tests --- scopes/design/ui/time-ago/time-ago.spec.tsx | 15 +++++++-------- 1 file changed, 7 insertions(+), 8 deletions(-) diff --git a/scopes/design/ui/time-ago/time-ago.spec.tsx b/scopes/design/ui/time-ago/time-ago.spec.tsx index de460764ae1b..88da6b366e40 100644 --- a/scopes/design/ui/time-ago/time-ago.spec.tsx +++ b/scopes/design/ui/time-ago/time-ago.spec.tsx @@ -1,5 +1,4 @@ import React from 'react'; -import testRenderer from 'react-test-renderer'; import { render } from '@testing-library/react'; import { YearsAgoWithTimestamp, @@ -13,7 +12,7 @@ import { describe('Time Ago Component', () => { it('renders correctly - years ago', () => { - testRenderer.create(); + render(); }); it('should render - years ago', () => { const { getByText } = render(); @@ -22,7 +21,7 @@ describe('Time Ago Component', () => { expect(text).toBeInTheDocument(); }); it('renders correctly - month ago', () => { - testRenderer.create(); + render(); }); it('should render - month ago', () => { const { getByText } = render(); @@ -31,7 +30,7 @@ describe('Time Ago Component', () => { expect(text).toBeInTheDocument(); }); it('renders correctly - months ago', () => { - testRenderer.create(); + render(); }); it('should render - months ago', () => { const { getByText } = render(); @@ -40,7 +39,7 @@ describe('Time Ago Component', () => { expect(text).toBeInTheDocument(); }); it('renders correctly - hour ago', () => { - testRenderer.create(); + render(); }); it('should render - hour ago', () => { const { getByText } = render(); @@ -49,7 +48,7 @@ describe('Time Ago Component', () => { expect(text).toBeInTheDocument(); }); it('renders correctly - hours ago', () => { - testRenderer.create(); + render(); }); it('should render - hours ago', () => { const { getByText } = render(); @@ -58,7 +57,7 @@ describe('Time Ago Component', () => { expect(text).toBeInTheDocument(); }); it('renders correctly - just now', () => { - testRenderer.create(); + render(); }); it('should render - just now', () => { const { getByText } = render(); @@ -67,7 +66,7 @@ describe('Time Ago Component', () => { expect(text).toBeInTheDocument(); }); it('renders correctly - just now with ISO date', () => { - testRenderer.create(); + render(); }); it('should render - just now', () => { const { getByText } = render(); From 75798fe3f701b6397d076bf58b1b6b135ccda2b7 Mon Sep 17 00:00:00 2001 From: Luv Kapur Date: Tue, 31 Jan 2023 15:59:09 -0500 Subject: [PATCH 3/5] fix useLane Menu --- scopes/lanes/lanes/lanes.ui.runtime.tsx | 10 ++- .../use-lanes-menu/use-lanes-menu.module.scss | 10 +++ .../menus/use-lanes-menu/use-lanes-menu.tsx | 65 +++++++++++-------- 3 files changed, 56 insertions(+), 29 deletions(-) diff --git a/scopes/lanes/lanes/lanes.ui.runtime.tsx b/scopes/lanes/lanes/lanes.ui.runtime.tsx index ef5812cf10b0..7acee01e7339 100644 --- a/scopes/lanes/lanes/lanes.ui.runtime.tsx +++ b/scopes/lanes/lanes/lanes.ui.runtime.tsx @@ -353,7 +353,15 @@ export class LanesUI { const { lanesModel } = useLanes(); if (!lanesModel?.viewedLane) return null; const { viewedLane, currentLane } = lanesModel; - return ; + return ( + + ); }); lanesUi.registerLanesDropdown(); return lanesUi; diff --git a/scopes/lanes/ui/menus/use-lanes-menu/use-lanes-menu.module.scss b/scopes/lanes/ui/menus/use-lanes-menu/use-lanes-menu.module.scss index 198061ac0eec..e9790e3b340f 100644 --- a/scopes/lanes/ui/menus/use-lanes-menu/use-lanes-menu.module.scss +++ b/scopes/lanes/ui/menus/use-lanes-menu/use-lanes-menu.module.scss @@ -1,6 +1,7 @@ .top { padding: 16px 24px; color: var(--bit-text-color, #414141); + padding-left: 0px; } .title { @@ -35,4 +36,13 @@ .lanesMenu { background-color: var(--bit-bg-color, #ffffff); border-bottom: 1px solid var(--bit-border-color-lightest, #ededed); + padding: 16px; +} + +.moreInfo { + padding-left: 0px; + + > a { + padding-left: 0px; + } } diff --git a/scopes/lanes/ui/menus/use-lanes-menu/use-lanes-menu.tsx b/scopes/lanes/ui/menus/use-lanes-menu/use-lanes-menu.tsx index 4b9c94ba27b7..2580d7fc856b 100644 --- a/scopes/lanes/ui/menus/use-lanes-menu/use-lanes-menu.tsx +++ b/scopes/lanes/ui/menus/use-lanes-menu/use-lanes-menu.tsx @@ -1,7 +1,7 @@ import React from 'react'; import { Icon } from '@teambit/evangelist.elements.icon'; import { CopyBox } from '@teambit/documenter.ui.copy-box'; -import { ExpandableTabContent, TabContent } from '@teambit/ui-foundation.ui.use-box.tab-content'; +import { ExpandableTabContent } from '@teambit/ui-foundation.ui.use-box.tab-content'; import { Ellipsis } from '@teambit/design.ui.styles.ellipsis'; import { linkStyles } from '@teambit/ui-foundation.ui.use-box.bottom-link'; import { LanesHost } from '@teambit/lanes.ui.models.lanes-model'; @@ -20,10 +20,14 @@ export function UseLaneMenu({ host, viewedLaneId, currentLaneId, + actionName, + actionIcon, }: { host: LanesHost; viewedLaneId: LaneId; currentLaneId?: LaneId; + actionName?: string; + actionIcon?: string; }) { const switchedOutToCurrentLane = !!currentLaneId?.isEqual(currentLaneId); const Menu = ( @@ -34,25 +38,30 @@ export function UseLaneMenu({ {`Bulk import from ${viewedLaneId.name}`} - - } - drawerTitle={
Learn more about Lanes
} - drawerContent={} - /> + +
+ + +
Learn more about Lanes
+ +
); - return ; + return ( + + ); } function LaneImportContent({ host, currentLaneId, switchedOutToCurrentLane }: LaneImportContentProps) { const laneId = host === 'workspace' ? currentLaneId.name : currentLaneId.toString(); + if (switchedOutToCurrentLane) { return (
@@ -69,19 +78,19 @@ function LaneImportContent({ host, currentLaneId, switchedOutToCurrentLane }: La ); } -type LaneInfoProps = {} & React.HTMLAttributes; +// type LaneInfoProps = {} & React.HTMLAttributes; -function LaneInfo({ ...rest }: LaneInfoProps) { - return ( - - - Getting Started with Lanes - - } - > - ); -} +// function LaneInfo({ ...rest }: LaneInfoProps) { +// return ( +// +// +// Getting Started with Lanes +// +// } +// > +// ); +// } From 9ff91640ef65dc9761ee78218281693f58cf5886 Mon Sep 17 00:00:00 2001 From: Luv Kapur Date: Tue, 31 Jan 2023 16:01:57 -0500 Subject: [PATCH 4/5] clean up --- .../ui/menus/use-lanes-menu/use-lanes-menu.tsx | 17 ----------------- 1 file changed, 17 deletions(-) diff --git a/scopes/lanes/ui/menus/use-lanes-menu/use-lanes-menu.tsx b/scopes/lanes/ui/menus/use-lanes-menu/use-lanes-menu.tsx index 2580d7fc856b..7bebc019bdca 100644 --- a/scopes/lanes/ui/menus/use-lanes-menu/use-lanes-menu.tsx +++ b/scopes/lanes/ui/menus/use-lanes-menu/use-lanes-menu.tsx @@ -77,20 +77,3 @@ function LaneImportContent({ host, currentLaneId, switchedOutToCurrentLane }: La
); } - -// type LaneInfoProps = {} & React.HTMLAttributes; - -// function LaneInfo({ ...rest }: LaneInfoProps) { -// return ( -// -// -// Getting Started with Lanes -// -// } -// > -// ); -// } From 794adfed0a58441e1b523313b37676f0cdc8df5b Mon Sep 17 00:00:00 2001 From: Luv Kapur Date: Tue, 31 Jan 2023 16:02:51 -0500 Subject: [PATCH 5/5] clean up --- scopes/lanes/ui/menus/use-lanes-menu/use-lanes-menu.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/scopes/lanes/ui/menus/use-lanes-menu/use-lanes-menu.tsx b/scopes/lanes/ui/menus/use-lanes-menu/use-lanes-menu.tsx index 7bebc019bdca..1fbc78109bf8 100644 --- a/scopes/lanes/ui/menus/use-lanes-menu/use-lanes-menu.tsx +++ b/scopes/lanes/ui/menus/use-lanes-menu/use-lanes-menu.tsx @@ -1,7 +1,6 @@ import React from 'react'; import { Icon } from '@teambit/evangelist.elements.icon'; import { CopyBox } from '@teambit/documenter.ui.copy-box'; -import { ExpandableTabContent } from '@teambit/ui-foundation.ui.use-box.tab-content'; import { Ellipsis } from '@teambit/design.ui.styles.ellipsis'; import { linkStyles } from '@teambit/ui-foundation.ui.use-box.bottom-link'; import { LanesHost } from '@teambit/lanes.ui.models.lanes-model';