Skip to content

Commit 8cf10eb

Browse files
HarkunwarAugustinMauroycanerakdas
authored
feat(ui-components): add ChangeHistory (#7869)
* feat(ui-components): add change history component * feat(ui-components): address copilot * feat(ui-components): address other copilot stuff * feat(ui-components): address other copilot stuff * feat(ui-components): add handling for className * feat(ui-components): address feedback on pr * feat(ui-components): address feedback on pr v2 * Update index.tsx Co-authored-by: Augustin Mauroy <97875033+AugustinMauroy@users.noreply.github.com> Signed-off-by: Harkunwar Kochar <10580591+Harkunwar@users.noreply.github.com> * Update index.tsx Co-authored-by: Augustin Mauroy <97875033+AugustinMauroy@users.noreply.github.com> Signed-off-by: Harkunwar Kochar <10580591+Harkunwar@users.noreply.github.com> * Update index.tsx Co-authored-by: Caner Akdas <canerakdas@gmail.com> Signed-off-by: Harkunwar Kochar <10580591+Harkunwar@users.noreply.github.com> * Update index.tsx Co-authored-by: Caner Akdas <canerakdas@gmail.com> Signed-off-by: Harkunwar Kochar <10580591+Harkunwar@users.noreply.github.com> --------- Signed-off-by: Harkunwar Kochar <10580591+Harkunwar@users.noreply.github.com> Co-authored-by: Augustin Mauroy <97875033+AugustinMauroy@users.noreply.github.com> Co-authored-by: Caner Akdas <canerakdas@gmail.com>
1 parent 616d437 commit 8cf10eb

File tree

3 files changed

+280
-0
lines changed

3 files changed

+280
-0
lines changed

‎packages/ui-components/Common/ChangeHistory/index.module.css

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
@reference "../../styles/index.css";
2+
3+
.summary {
4+
@apply outline-hidden
5+
flex
6+
h-9
7+
cursor-pointer
8+
select-none
9+
items-center
10+
gap-2
11+
rounded-md
12+
border
13+
border-neutral-200
14+
p-2
15+
text-sm
16+
text-neutral-700
17+
motion-safe:transition-colors
18+
dark:border-neutral-900
19+
dark:text-neutral-300;
20+
21+
&:hover,
22+
&:focus-visible {
23+
@apply bg-neutral-100
24+
dark:bg-neutral-900;
25+
}
26+
}
27+
28+
.dropdownContentWrapper {
29+
@apply absolute
30+
right-0
31+
top-full
32+
z-50
33+
mt-1
34+
max-h-80
35+
w-52
36+
overflow-hidden
37+
rounded-sm
38+
border
39+
border-neutral-200
40+
bg-white
41+
shadow-lg
42+
dark:border-neutral-900
43+
dark:bg-neutral-950;
44+
}
45+
46+
.dropdownContentInner {
47+
@apply max-h-80
48+
w-52
49+
overflow-y-auto;
50+
}
51+
52+
.dropdownItem {
53+
@apply outline-hidden
54+
block
55+
px-2.5
56+
py-1.5
57+
text-sm
58+
font-medium
59+
text-neutral-800
60+
no-underline
61+
motion-safe:transition-colors
62+
dark:text-white;
63+
64+
&:hover,
65+
&:focus-visible {
66+
@apply bg-green-600
67+
text-white;
68+
}
69+
}
70+
71+
.dropdownLabel {
72+
@apply block
73+
text-sm
74+
font-medium
75+
leading-tight;
76+
}
77+
78+
.dropdownVersions {
79+
@apply block
80+
text-xs
81+
leading-tight
82+
opacity-75;
83+
}

‎packages/ui-components/Common/ChangeHistory/index.stories.tsx

Lines changed: 130 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,130 @@
1+
import type { Meta as MetaObj, StoryObj } from '@storybook/react';
2+
3+
import ChangeHistory from '#ui/Common/ChangeHistory';
4+
5+
type Story = StoryObj<typeof ChangeHistory>;
6+
type Meta = MetaObj<typeof ChangeHistory>;
7+
8+
const SAMPLE_CHANGES = [
9+
{
10+
versions: ['v15.4.0'],
11+
label: 'No longer experimental',
12+
url: 'https://github.com/nodejs/node/pull/12345',
13+
},
14+
{
15+
versions: ['v15.0.0', 'v14.17.0'],
16+
label: 'Added in v15.0.0, v14.17.0',
17+
url: 'https://github.com/nodejs/node/pull/67890',
18+
},
19+
{
20+
versions: ['v16.0.0'],
21+
label: 'Deprecated in 16',
22+
},
23+
];
24+
25+
const LARGE_SAMPLE_CHANGES = [
26+
{
27+
versions: ['v20.0.0'],
28+
label: 'Breaking change in v20',
29+
url: 'https://github.com/nodejs/node/pull/50001',
30+
},
31+
{
32+
versions: ['v19.8.0'],
33+
label: 'Performance improvement',
34+
url: 'https://github.com/nodejs/node/pull/49999',
35+
},
36+
{
37+
versions: ['v19.0.0'],
38+
label: 'API redesign',
39+
url: 'https://github.com/nodejs/node/pull/49000',
40+
},
41+
{
42+
versions: ['v18.17.0', 'v18.16.1'],
43+
label: 'Security fix backported',
44+
url: 'https://github.com/nodejs/node/pull/48500',
45+
},
46+
{
47+
versions: ['v18.0.0'],
48+
label: 'Major version release',
49+
url: 'https://github.com/nodejs/node/pull/47000',
50+
},
51+
{
52+
versions: ['v17.9.0'],
53+
label: 'Experimental feature added',
54+
url: 'https://github.com/nodejs/node/pull/46500',
55+
},
56+
{
57+
versions: ['v17.0.0'],
58+
label: 'Node.js 17 release',
59+
url: 'https://github.com/nodejs/node/pull/45000',
60+
},
61+
{
62+
versions: ['v16.15.0', 'v16.14.2'],
63+
label: 'Bug fix release',
64+
url: 'https://github.com/nodejs/node/pull/44000',
65+
},
66+
{
67+
versions: ['v16.0.0'],
68+
label: 'Deprecated in v16',
69+
url: 'https://github.com/nodejs/node/pull/43000',
70+
},
71+
{
72+
versions: ['v15.14.0'],
73+
label: 'Feature enhancement',
74+
url: 'https://github.com/nodejs/node/pull/42000',
75+
},
76+
{
77+
versions: ['v15.0.0', 'v14.17.0'],
78+
label: 'Initial implementation',
79+
url: 'https://github.com/nodejs/node/pull/41000',
80+
},
81+
{
82+
versions: ['v14.18.0'],
83+
label: 'Documentation update',
84+
url: 'https://github.com/nodejs/node/pull/40000',
85+
},
86+
{
87+
versions: ['v14.0.0'],
88+
label: 'Added to stable API',
89+
url: 'https://github.com/nodejs/node/pull/39000',
90+
},
91+
{
92+
versions: ['v13.14.0'],
93+
label: 'Experimental flag removed',
94+
url: 'https://github.com/nodejs/node/pull/38000',
95+
},
96+
{
97+
versions: ['v12.22.0', 'v12.21.0'],
98+
label: 'Backported to LTS',
99+
url: 'https://github.com/nodejs/node/pull/37000',
100+
},
101+
{
102+
versions: ['v12.0.0'],
103+
label: 'First experimental version',
104+
url: 'https://github.com/nodejs/node/pull/36000',
105+
},
106+
];
107+
108+
export const Default: Story = {
109+
render: args => (
110+
<div className="right-0 flex justify-end">
111+
<ChangeHistory {...args} />
112+
</div>
113+
),
114+
args: {
115+
changes: SAMPLE_CHANGES,
116+
},
117+
};
118+
119+
export const LargeHistory: Story = {
120+
render: args => (
121+
<div className="right-0 flex justify-end">
122+
<ChangeHistory {...args} />
123+
</div>
124+
),
125+
args: {
126+
changes: LARGE_SAMPLE_CHANGES,
127+
},
128+
};
129+
130+
export default { component: ChangeHistory } as Meta;

‎packages/ui-components/Common/ChangeHistory/index.tsx

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
import { ChevronDownIcon, ClockIcon } from '@heroicons/react/24/outline';
2+
import classNames from 'classnames';
3+
import type { FC, ComponentProps } from 'react';
4+
5+
import type { LinkLike } from '#ui/types.js';
6+
7+
import styles from './index.module.css';
8+
9+
export type HistoryChange = {
10+
versions: Array<string>;
11+
label: string;
12+
url?: string;
13+
};
14+
15+
type ChangeHistoryProps = ComponentProps<'div'> & {
16+
label: string;
17+
changes: Array<HistoryChange>;
18+
as?: LinkLike;
19+
};
20+
21+
const ChangeHistory: FC<ChangeHistoryProps> = ({
22+
label = 'History',
23+
changes = [],
24+
className,
25+
as: As = 'a',
26+
'aria-label': ariaLabel = label,
27+
...props
28+
}) => (
29+
<div className={classNames('relative', 'inline-block', className)} {...props}>
30+
<details className="group">
31+
<summary className={styles.summary} role="button" aria-haspopup="menu">
32+
<ClockIcon className="size-4" />
33+
<span>{label}</span>
34+
<ChevronDownIcon className="size-3 group-open:rotate-180 motion-safe:transition-transform" />
35+
</summary>
36+
<div
37+
className={styles.dropdownContentWrapper}
38+
role="menu"
39+
aria-label={ariaLabel}
40+
>
41+
<div className={styles.dropdownContentInner}>
42+
{changes.map((change, index) => {
43+
const MenuItem = change.url ? As : 'div';
44+
45+
return (
46+
<MenuItem
47+
key={index}
48+
className={styles.dropdownItem}
49+
role="menuitem"
50+
tabIndex={0}
51+
aria-label={`${change.label}: ${change.versions.join(', ')}`}
52+
href={change.url}
53+
>
54+
<div className={styles.dropdownLabel}>{change.label}</div>
55+
<div className={styles.dropdownVersions}>
56+
{change.versions.join(', ')}
57+
</div>
58+
</MenuItem>
59+
);
60+
})}
61+
</div>
62+
</div>
63+
</details>
64+
</div>
65+
);
66+
67+
export default ChangeHistory;

0 commit comments

Comments
 (0)