@primer/react 38.34.0-rc.8fa435aeb → 38.34.0-rc.ac0faffd6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +0 -2
- package/dist/Link/Link.js +33 -33
- package/generated/components.json +5 -5
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -8,8 +8,6 @@
|
|
|
8
8
|
|
|
9
9
|
### Patch Changes
|
|
10
10
|
|
|
11
|
-
- [#8211](https://github.com/primer/react/pull/8211) [`a3e669f`](https://github.com/primer/react/commit/a3e669fa551a7d07841ce20224199d172905860f) Thanks [@francinelucca](https://github.com/francinelucca)! - Link: Remove unnecessary `data-hover-color` attribute from rendered DOM element
|
|
12
|
-
|
|
13
11
|
- [#8169](https://github.com/primer/react/pull/8169) [`1d6f559`](https://github.com/primer/react/commit/1d6f5593f5e482d1d03027522bc882560c7b1f06) Thanks [@liuliu-dev](https://github.com/liuliu-dev)! - Timeline: `Timeline.Actions` now wraps onto a new row below `Timeline.Body`, left-aligned with the body content, when `Timeline.Item` is narrower than 480px.
|
|
14
12
|
|
|
15
13
|
## 38.33.0
|
package/dist/Link/Link.js
CHANGED
|
@@ -8,74 +8,74 @@ import { jsx } from "react/jsx-runtime";
|
|
|
8
8
|
import React from "react";
|
|
9
9
|
//#region src/Link/Link.tsx
|
|
10
10
|
const UnwrappedLink = (props, ref) => {
|
|
11
|
-
const $ = c(
|
|
11
|
+
const $ = c(19);
|
|
12
12
|
let className;
|
|
13
|
+
let hoverColor;
|
|
13
14
|
let inline;
|
|
14
15
|
let muted;
|
|
15
16
|
let restProps;
|
|
16
17
|
let t0;
|
|
17
18
|
if ($[0] !== props) {
|
|
18
|
-
|
|
19
|
-
t0 = t1;
|
|
20
|
-
className = t2;
|
|
21
|
-
inline = t3;
|
|
22
|
-
muted = t4;
|
|
23
|
-
restProps = t5;
|
|
19
|
+
({as: t0, className, inline, muted, hoverColor, ...restProps} = props);
|
|
24
20
|
$[0] = props;
|
|
25
21
|
$[1] = className;
|
|
26
|
-
$[2] =
|
|
27
|
-
$[3] =
|
|
28
|
-
$[4] =
|
|
29
|
-
$[5] =
|
|
22
|
+
$[2] = hoverColor;
|
|
23
|
+
$[3] = inline;
|
|
24
|
+
$[4] = muted;
|
|
25
|
+
$[5] = restProps;
|
|
26
|
+
$[6] = t0;
|
|
30
27
|
} else {
|
|
31
28
|
className = $[1];
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
29
|
+
hoverColor = $[2];
|
|
30
|
+
inline = $[3];
|
|
31
|
+
muted = $[4];
|
|
32
|
+
restProps = $[5];
|
|
33
|
+
t0 = $[6];
|
|
36
34
|
}
|
|
37
35
|
const Component = t0 === void 0 ? "a" : t0;
|
|
38
36
|
const innerRef = React.useRef(null);
|
|
39
37
|
const mergedRef = useMergedRefs(ref, innerRef);
|
|
40
38
|
let t1;
|
|
41
39
|
let t2;
|
|
42
|
-
if ($[
|
|
40
|
+
if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
|
|
43
41
|
t1 = () => {
|
|
44
42
|
if (innerRef.current && !(innerRef.current instanceof HTMLButtonElement) && !(innerRef.current instanceof HTMLAnchorElement)) console.error("Error: Found `Link` component that renders an inaccessible element", innerRef.current, "Please ensure `Link` always renders as <a> or <button>");
|
|
45
43
|
};
|
|
46
44
|
t2 = [innerRef];
|
|
47
|
-
$[
|
|
48
|
-
$[
|
|
45
|
+
$[7] = t1;
|
|
46
|
+
$[8] = t2;
|
|
49
47
|
} else {
|
|
50
|
-
t1 = $[
|
|
51
|
-
t2 = $[
|
|
48
|
+
t1 = $[7];
|
|
49
|
+
t2 = $[8];
|
|
52
50
|
}
|
|
53
51
|
useDevOnlyEffect(t1, t2);
|
|
54
52
|
let t3;
|
|
55
|
-
if ($[
|
|
53
|
+
if ($[9] !== className) {
|
|
56
54
|
t3 = clsx(className, Link_module_css_default.Link);
|
|
57
|
-
$[
|
|
58
|
-
$[
|
|
59
|
-
} else t3 = $[
|
|
55
|
+
$[9] = className;
|
|
56
|
+
$[10] = t3;
|
|
57
|
+
} else t3 = $[10];
|
|
60
58
|
const t4 = mergedRef;
|
|
61
59
|
let t5;
|
|
62
|
-
if ($[
|
|
60
|
+
if ($[11] !== Component || $[12] !== hoverColor || $[13] !== inline || $[14] !== muted || $[15] !== restProps || $[16] !== t3 || $[17] !== t4) {
|
|
63
61
|
t5 = /*#__PURE__*/ jsx(Component, {
|
|
64
62
|
className: t3,
|
|
65
63
|
"data-component": "Link",
|
|
66
64
|
"data-muted": muted,
|
|
67
65
|
"data-inline": inline,
|
|
66
|
+
"data-hover-color": hoverColor,
|
|
68
67
|
...restProps,
|
|
69
68
|
ref: t4
|
|
70
69
|
});
|
|
71
|
-
$[
|
|
72
|
-
$[
|
|
73
|
-
$[
|
|
74
|
-
$[
|
|
75
|
-
$[
|
|
76
|
-
$[
|
|
77
|
-
$[
|
|
78
|
-
|
|
70
|
+
$[11] = Component;
|
|
71
|
+
$[12] = hoverColor;
|
|
72
|
+
$[13] = inline;
|
|
73
|
+
$[14] = muted;
|
|
74
|
+
$[15] = restProps;
|
|
75
|
+
$[16] = t3;
|
|
76
|
+
$[17] = t4;
|
|
77
|
+
$[18] = t5;
|
|
78
|
+
} else t5 = $[18];
|
|
79
79
|
return t5;
|
|
80
80
|
};
|
|
81
81
|
const LinkComponent = fixedForwardRef(UnwrappedLink);
|
|
@@ -5060,7 +5060,7 @@
|
|
|
5060
5060
|
},
|
|
5061
5061
|
{
|
|
5062
5062
|
"id": "components-pagelayout-features--pull-request-page",
|
|
5063
|
-
"code": "() => (\n <PageLayout>\n <PageLayout.Header>\n <div className={classes.HeaderStack}>\n <div>\n <Heading as=\"h1\" className={classes.TitleHeading}>\n Input validation styles{' '}\n <Text className={classes.TitleSubdued}>#1831</Text>\n </Heading>\n <div className={classes.StatusRow}>\n <StateLabel status=\"pullOpened\">Open</StateLabel>\n <Text className={classes.StatusMeta}>\n <Link href=\"#\" muted className={classes.BoldMetaLink}>\n mperrotti\n </Link>{' '}\n wants to merge 3 commits into{' '}\n <BranchName href=\"#\">main</BranchName> from{' '}\n <BranchName href=\"#\">mp/validation-styles</BranchName>\n </Text>\n </div>\n </div>\n <TabNav>\n <TabNav.Link href=\"#\" selected>\n Conversation\n </TabNav.Link>\n <TabNav.Link href=\"#\">Commits</TabNav.Link>\n <TabNav.Link href=\"#\">Checks</TabNav.Link>\n <TabNav.Link href=\"#\">Files changed</TabNav.Link>\n </TabNav>\n </div>\n </PageLayout.Header>\n <PageLayout.Content>\n <div className={classes.ContentBox}></div>\n
|
|
5063
|
+
"code": "() => (\n <PageLayout>\n <PageLayout.Header>\n <div className={classes.HeaderStack}>\n <div>\n <Heading as=\"h1\" className={classes.TitleHeading}>\n Input validation styles{' '}\n <Text className={classes.TitleSubdued}>#1831</Text>\n </Heading>\n <div className={classes.StatusRow}>\n <StateLabel status=\"pullOpened\">Open</StateLabel>\n <Text className={classes.StatusMeta}>\n <Link href=\"#\" muted className={classes.BoldMetaLink}>\n mperrotti\n </Link>{' '}\n wants to merge 3 commits into{' '}\n <BranchName href=\"#\">main</BranchName> from{' '}\n <BranchName href=\"#\">mp/validation-styles</BranchName>\n </Text>\n </div>\n </div>\n <TabNav>\n <TabNav.Link href=\"#\" selected>\n Conversation\n </TabNav.Link>\n <TabNav.Link href=\"#\">Commits</TabNav.Link>\n <TabNav.Link href=\"#\">Checks</TabNav.Link>\n <TabNav.Link href=\"#\">Files changed</TabNav.Link>\n </TabNav>\n </div>\n </PageLayout.Header>\n <PageLayout.Content>\n <div className={classes.ContentBox}></div>\n <div className={classes.ScrollBox} tabIndex={0}>\n This box has really long content. If it is too long, it will cause x\n overflow and should show a scrollbar. When this overflows, it should not\n break to overall page layout!\n </div>\n </PageLayout.Content>\n <PageLayout.Pane aria-label=\"Side pane\">\n <div className={classes.PaneStack}>\n <div>\n <Text className={classes.PaneSectionHeading}>Assignees</Text>\n <Text className={classes.PaneMetaText}>\n No one –{' '}\n <Link href=\"#\" muted>\n assign yourself\n </Link>\n </Text>\n </div>\n <div role=\"separator\" className={classes.PaneSeparator}></div>\n <div>\n <Text className={classes.PaneSectionHeading}>Labels</Text>\n <Text className={classes.PaneMetaText}>None yet</Text>\n </div>\n </div>\n </PageLayout.Pane>\n </PageLayout>\n)"
|
|
5064
5064
|
},
|
|
5065
5065
|
{
|
|
5066
5066
|
"id": "components-pagelayout-features--sticky-pane",
|
|
@@ -5068,7 +5068,7 @@
|
|
|
5068
5068
|
},
|
|
5069
5069
|
{
|
|
5070
5070
|
"id": "components-pagelayout-features--nested-scroll-container",
|
|
5071
|
-
"code": "(args) => (\n <div className={classes.NestedScrollContainer}>\n <Placeholder label=\"Above scroll container\" height={120} />\n <div className={classes.OverflowAuto}>\n <PageLayout\n rowGap=\"none\"\n columnGap=\"none\"\n padding=\"none\"\n containerWidth=\"full\"\n >\n <PageLayout.Header padding=\"normal\" divider=\"line\">\n <Placeholder label=\"Header\" height={64} />\n </PageLayout.Header>\n <PageLayout.Content padding=\"normal\" width=\"large\">\n
|
|
5071
|
+
"code": "(args) => (\n <div className={classes.NestedScrollContainer}>\n <Placeholder label=\"Above scroll container\" height={120} />\n <div className={classes.OverflowAuto}>\n <PageLayout\n rowGap=\"none\"\n columnGap=\"none\"\n padding=\"none\"\n containerWidth=\"full\"\n >\n <PageLayout.Header padding=\"normal\" divider=\"line\">\n <Placeholder label=\"Header\" height={64} />\n </PageLayout.Header>\n <PageLayout.Content padding=\"normal\" width=\"large\">\n <div\n className={classes.ContentGrid}\n tabIndex={0}\n role=\"region\"\n aria-label=\"Page content\"\n >\n {Array.from({\n length: args.numParagraphsInContent,\n }).map((_, i) => (\n <p key={i} className={classes.Paragraph}>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam at\n enim id lorem tempus egestas a non ipsum. Maecenas imperdiet\n ante quam, at varius lorem molestie vel. Sed at eros consequat,\n varius tellus et, auctor felis. Donec pulvinar lacinia urna nec\n commodo. Phasellus at imperdiet risus. Donec sit amet massa\n purus. Nunc sem lectus, bibendum a sapien nec, tristique tempus\n felis. Ut porttitor auctor tellus in imperdiet. Ut blandit\n tincidunt augue, quis fringilla nunc tincidunt sed. Vestibulum\n auctor euismod nisi. Nullam tincidunt est in mi tincidunt\n dictum. Sed consectetur aliquet velit ut ornare.\n </p>\n ))}\n </div>\n </PageLayout.Content>\n <PageLayout.Pane\n position=\"start\"\n padding=\"normal\"\n divider=\"line\"\n sticky\n aria-label=\"Side pane\"\n >\n <div className={classes.ContentGrid}>\n {Array.from({\n length: args.numParagraphsInPane,\n }).map((_, i) => (\n <p key={i} className={classes.Paragraph}>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam at\n enim id lorem tempus egestas a non ipsum. Maecenas imperdiet\n ante quam, at varius lorem molestie vel. Sed at eros consequat,\n varius tellus et, auctor felis. Donec pulvinar lacinia urna nec\n commodo. Phasellus at imperdiet risus. Donec sit amet massa\n purus.\n </p>\n ))}\n </div>\n </PageLayout.Pane>\n <PageLayout.Footer padding=\"normal\" divider=\"line\">\n <Placeholder label=\"Footer\" height={64} />\n </PageLayout.Footer>\n </PageLayout>\n </div>\n <Placeholder label=\"Below scroll container\" height={120} />\n </div>\n)"
|
|
5072
5072
|
},
|
|
5073
5073
|
{
|
|
5074
5074
|
"id": "components-pagelayout-features--custom-sticky-header",
|
|
@@ -5080,7 +5080,7 @@
|
|
|
5080
5080
|
},
|
|
5081
5081
|
{
|
|
5082
5082
|
"id": "components-pagelayout-features--scroll-container-within-page-layout-pane",
|
|
5083
|
-
"code": "() => (\n <div className={classes.NestedScrollContainer}>\n <div className={classes.OverflowAuto}>\n <Placeholder label=\"Above inner scroll container\" height={120} />\n <PageLayout\n rowGap=\"none\"\n columnGap=\"none\"\n padding=\"none\"\n containerWidth=\"full\"\n >\n <PageLayout.Pane\n position=\"start\"\n padding=\"normal\"\n divider=\"line\"\n sticky\n aria-label=\"Sticky pane\"\n >\n <div className={classes.OverflowAuto}>\n <PageLayout.Pane padding=\"normal\" aria-label=\"Side pane\">\n <Placeholder label=\"Inner scroll container\" height={800} />\n </PageLayout.Pane>\n </div>\n </PageLayout.Pane>\n <PageLayout.Content padding=\"normal\" width=\"large\">\n
|
|
5083
|
+
"code": "() => (\n <div className={classes.NestedScrollContainer}>\n <div className={classes.OverflowAuto}>\n <Placeholder label=\"Above inner scroll container\" height={120} />\n <PageLayout\n rowGap=\"none\"\n columnGap=\"none\"\n padding=\"none\"\n containerWidth=\"full\"\n >\n <PageLayout.Pane\n position=\"start\"\n padding=\"normal\"\n divider=\"line\"\n sticky\n aria-label=\"Sticky pane\"\n >\n <div className={classes.OverflowAuto}>\n <PageLayout.Pane padding=\"normal\" aria-label=\"Side pane\">\n <Placeholder label=\"Inner scroll container\" height={800} />\n </PageLayout.Pane>\n </div>\n </PageLayout.Pane>\n <PageLayout.Content padding=\"normal\" width=\"large\">\n <div\n className={classes.ContentGrid}\n tabIndex={0}\n role=\"region\"\n aria-label=\"Page content\"\n >\n <Placeholder label=\"Page content\" height={1600} />\n </div>\n </PageLayout.Content>\n </PageLayout>\n <Placeholder label=\"Beneath inner scroll container\" height={120} />\n </div>\n </div>\n)"
|
|
5084
5084
|
},
|
|
5085
5085
|
{
|
|
5086
5086
|
"id": "components-pagelayout-features--custom-pane-widths",
|
|
@@ -8185,11 +8185,11 @@
|
|
|
8185
8185
|
},
|
|
8186
8186
|
{
|
|
8187
8187
|
"id": "components-timeline-features--with-actions",
|
|
8188
|
-
"code": "() => (\n
|
|
8188
|
+
"code": "() => (\n <div\n className={classes.RealisticTimeline}\n onClick={(e) => {\n if ((e.target as HTMLElement).closest('a')) e.preventDefault()\n }}\n >\n <Timeline>\n <Timeline.Item>\n <Timeline.Badge variant=\"done\">\n <Octicon icon={GitMergeIcon} aria-label=\"Merged\" />\n </Timeline.Badge>\n <Timeline.Body>\n <Link href=\"#\" className={classes.LinkWithBoldStyle} muted>\n Monalisa\n </Link>\n merged via the queue into <BranchName href=\"#\">main</BranchName> with\n commit{' '}\n <Link href=\"#\" className={classes.CommitSha}>\n 01e49tb\n </Link>{' '}\n <Link href=\"#\" className={classes.Timestamp} muted>\n just now\n </Link>\n <div className={classes.ChecksSubline}>28 checks passed</div>\n </Timeline.Body>\n <Timeline.Actions>\n <Button size=\"small\">View details</Button>\n <Button size=\"small\">Revert</Button>\n </Timeline.Actions>\n </Timeline.Item>\n <Timeline.Item>\n <Timeline.Badge>\n <Octicon icon={RepoPushIcon} aria-label=\"Force-push\" />\n </Timeline.Badge>\n <Timeline.Body>\n <Link href=\"#\" className={classes.LinkWithBoldStyle} muted>\n Monalisa\n </Link>\n force-pushed the <BranchName href=\"#\">main</BranchName> branch from{' '}\n <Link href=\"#\" className={classes.CommitSha}>\n 01e49tb\n </Link>{' '}\n to{' '}\n <Link href=\"#\" className={classes.CommitSha}>\n 02f50uc\n </Link>{' '}\n <Link href=\"#\" className={classes.Timestamp} muted>\n 2 hours ago\n </Link>\n </Timeline.Body>\n <Timeline.Actions>\n <Button size=\"small\">Compare</Button>\n </Timeline.Actions>\n </Timeline.Item>\n <Timeline.Item condensed>\n <Timeline.Badge>\n <Octicon icon={GitCommitIcon} aria-label=\"Commit\" />\n </Timeline.Badge>\n <Timeline.Body>\n <Link href=\"#\" muted>\n Update README.md\n </Link>\n </Timeline.Body>\n <Timeline.Actions>\n <Label\n className={`${classes.SignatureLabelVerified} ${classes.HideAtNarrow}`}\n >\n Verified\n </Label>\n <Octicon\n icon={CheckIcon}\n className={classes.IconSuccess}\n aria-label=\"All checks passed\"\n />\n <Link href=\"#\" className={classes.ShaLink} muted>\n 3fbdc0\n </Link>\n </Timeline.Actions>\n </Timeline.Item>\n <Timeline.Item condensed>\n <Timeline.Badge>\n <Octicon icon={GitCommitIcon} aria-label=\"Commit\" />\n </Timeline.Badge>\n <Timeline.Body>\n <Link href=\"#\" muted>\n Initial commit\n </Link>\n </Timeline.Body>\n <Timeline.Actions>\n <Label className={classes.HideAtNarrow}>Unverified</Label>\n <Octicon\n icon={XIcon}\n className={classes.IconDanger}\n aria-label=\"Some checks failed\"\n />\n <Link href=\"#\" className={classes.ShaLink} muted>\n 3fbdc0\n </Link>\n </Timeline.Actions>\n </Timeline.Item>\n <Timeline.Item>\n <Timeline.Badge>\n <Octicon icon={CrossReferenceIcon} aria-label=\"Cross-reference\" />\n </Timeline.Badge>\n <Timeline.Body>\n <Avatar\n src=\"https://avatars.githubusercontent.com/u/92997159?v=4\"\n size={20}\n className={classes.InlineAvatar}\n />\n <Link href=\"#\" className={classes.LinkWithBoldStyle} muted>\n Monalisa\n </Link>\n mentioned this pull request{' '}\n <Link href=\"#\" className={classes.Timestamp} muted>\n just now\n </Link>\n <div className={classes.CrossReferenceRow}>\n <div className={classes.CrossReferenceTitle}>\n <Link href=\"#\" className={classes.CrossReferenceLink}>\n <span className={classes.CrossReferenceName}>\n Fix positioning of Autocomplete overlay menu\n </span>{' '}\n <span className={classes.CrossReferenceNumber}>\n primer/react#7431\n </span>\n </Link>\n </div>\n <Octicon\n icon={LockIcon}\n size={16}\n className={classes.CrossReferenceMeta}\n aria-label=\"Private\"\n />\n <StateLabel status=\"pullOpened\" size=\"small\">\n Open\n </StateLabel>\n </div>\n <div className={classes.CrossReferenceTaskline}>\n <Octicon icon={TasklistIcon} size={16} />\n 17 tasks\n </div>\n </Timeline.Body>\n </Timeline.Item>\n </Timeline>\n </div>\n)"
|
|
8189
8189
|
},
|
|
8190
8190
|
{
|
|
8191
8191
|
"id": "components-timeline-features--with-avatar",
|
|
8192
|
-
"code": "() => (\n
|
|
8192
|
+
"code": "() => (\n <div\n className={`${classes.RealisticTimeline} ${classes.AvatarGutter}`}\n onClick={(e) => {\n if ((e.target as HTMLElement).closest('a')) e.preventDefault()\n }}\n >\n <Timeline>\n <Timeline.Item>\n <Timeline.Avatar>\n <Avatar\n size={40}\n src=\"https://avatars.githubusercontent.com/u/92997159?v=4\"\n alt=\"\"\n />\n </Timeline.Avatar>\n <Timeline.Badge variant=\"done\">\n <Octicon icon={CheckIcon} aria-label=\"Approved\" />\n </Timeline.Badge>\n <Timeline.Body>\n <Link href=\"#\" className={classes.LinkWithBoldStyle} muted>\n monalisa\n </Link>\n {'approved these changes '}\n <RelativeTime date={new Date()} format=\"relative\" />\n </Timeline.Body>\n <Timeline.Actions>\n <Button size=\"small\">View reviewed changes</Button>\n </Timeline.Actions>\n </Timeline.Item>\n </Timeline>\n </div>\n)"
|
|
8193
8193
|
}
|
|
8194
8194
|
],
|
|
8195
8195
|
"importPath": "@primer/react",
|
package/package.json
CHANGED