Skip to content

Commit 8f889a6

Browse files
blindaa121sserrata
blindaa121
and
sserrata
authored
[UI Enhancement] Updated left doc panel styling (#557)
* Create and adjust request/response header * Apply schema property styling changes * Move response divider above response section * Change styling for top level detail summary * Cleanup method endpoint styling * Add right border to left doc panel * Required badge cleanup * Fix linter error * Use Heading component to include anchor * Fix linter errors * Add anchor link to first level param summary headings * Add anchor link to response body * Update nullable and deprecated styling * Add margin-top to mime tabs container * Apply required styles to demo panel * Mime tabs styling cleanup * Remove anchors from params and request body * Disciminator tabs style cleanup * SchemaTabs styling cleanup * Remove unused handleAnchorClick * Add color hover state to schema property names * SchemaTabs styling cleanup * ApiTabs styling cleanup * Highlight individual property names --------- Co-authored-by: Steven Serrata <[email protected]>
1 parent ae3a1c5 commit 8f889a6

File tree

22 files changed

+314
-219
lines changed

22 files changed

+314
-219
lines changed

‎packages/docusaurus-plugin-openapi-docs/src/markdown/createParamsDetails.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,8 @@ export function createParamsDetails({ parameters, type }: Props) {
3232
children: [
3333
createDetailsSummary({
3434
children: [
35-
create("strong", {
35+
create("h3", {
36+
className: "openapi-markdown__details-summary-header-params",
3637
children: `${
3738
type.charAt(0).toUpperCase() + type.slice(1)
3839
} Parameters`,

‎packages/docusaurus-plugin-openapi-docs/src/markdown/createRequestHeader.ts

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
/* ============================================================================
2+
* Copyright (c) Palo Alto Networks
3+
*
4+
* This source code is licensed under the MIT license found in the
5+
* LICENSE file in the root directory of this source tree.
6+
* ========================================================================== */
7+
8+
export function createRequestHeader(header: string) {
9+
return `## ${header}\n\n`;
10+
}

‎packages/docusaurus-plugin-openapi-docs/src/markdown/createRequestSchema.ts

Lines changed: 25 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,8 @@
55
* LICENSE file in the root directory of this source tree.
66
* ========================================================================== */
77

8+
import clsx from "clsx";
9+
810
import { MediaTypeObject, SchemaObject } from "../openapi/types";
911
import {
1012
createClosingArrayBracket,
@@ -467,8 +469,8 @@ function createDetailsNode(
467469
className: "openapi-schema__container",
468470
children: [
469471
create("strong", {
470-
...(schema.deprecated && {
471-
className: "openapi-schema__strikethrough",
472+
className: clsx("openapi-schema__property", {
473+
"openapi-schema__strikethrough": schema.deprecated,
472474
}),
473475
children: name,
474476
}),
@@ -490,7 +492,7 @@ function createDetailsNode(
490492
),
491493
guard(nullable, () => [
492494
create("span", {
493-
className: "badge badge--info openapi-schema__nullable",
495+
className: "openapi-schema__nullable",
494496
children: "nullable",
495497
}),
496498
]),
@@ -500,16 +502,14 @@ function createDetailsNode(
500502
: required === true,
501503
() => [
502504
create("span", {
503-
className:
504-
"badge badge--danger openapi-schema__required",
505+
className: "openapi-schema__required",
505506
children: "required",
506507
}),
507508
]
508509
),
509510
guard(schema.deprecated, () => [
510511
create("span", {
511-
className:
512-
"badge badge--warning openapi-schema__deprecated",
512+
className: "openapi-schema__deprecated",
513513
children: "deprecated",
514514
}),
515515
]),
@@ -561,14 +561,14 @@ function createPropertyDiscriminator(
561561
}
562562

563563
return create("div", {
564-
className: "openapi-discriminator__item",
564+
className: "openapi-discriminator__item openapi-schema__list-item",
565565
children: create("div", {
566566
children: [
567567
create("span", {
568568
className: "openapi-schema__container",
569569
children: [
570570
create("strong", {
571-
className: "openapi-discriminator__name",
571+
className: "openapi-discriminator__name openapi-schema__property",
572572
children: name,
573573
}),
574574
guard(schemaName, (name) =>
@@ -579,7 +579,7 @@ function createPropertyDiscriminator(
579579
),
580580
guard(required, () => [
581581
create("span", {
582-
className: "badge badge--danger openapi-schema__required",
582+
className: "openapi-schema__required",
583583
children: "required",
584584
}),
585585
]),
@@ -895,19 +895,22 @@ export function createRequestSchema({ title, body, ...rest }: Props) {
895895
value: `${mimeType}`,
896896
children: [
897897
createDetails({
898-
className: "openapi-markdown__details",
898+
className: "openapi-markdown__details mime",
899899
"data-collapsed": false,
900900
open: true,
901901
...rest,
902902
children: [
903903
createDetailsSummary({
904-
style: { textAlign: "left" },
904+
className: "openapi-markdown__details-summary-mime",
905905
children: [
906-
create("strong", { children: `${title}` }),
906+
create("h3", {
907+
className:
908+
"openapi-markdown__details-summary-header-body",
909+
children: `${title}`,
910+
}),
907911
guard(body.required && body.required === true, () => [
908912
create("span", {
909-
className:
910-
"badge badge--danger openapi-schema__required",
913+
className: "openapi-schema__required",
911914
children: "required",
912915
}),
913916
]),
@@ -958,15 +961,18 @@ export function createRequestSchema({ title, body, ...rest }: Props) {
958961
value: `${randomFirstKey}-schema`,
959962
children: [
960963
createDetails({
961-
className: "openapi-markdown__details",
964+
className: "openapi-markdown__details mime",
962965
"data-collapsed": false,
963966
open: true,
964967
...rest,
965968
children: [
966969
createDetailsSummary({
967-
style: { textAlign: "left" },
970+
className: "openapi-markdown__details-summary-mime",
968971
children: [
969-
create("strong", { children: `${title}` }),
972+
create("h3", {
973+
className: "openapi-markdown__details-summary-header-body",
974+
children: `${title}`,
975+
}),
970976
guard(firstBody.type === "array", (format) =>
971977
create("span", {
972978
style: { opacity: "0.6" },
@@ -975,7 +981,7 @@ export function createRequestSchema({ title, body, ...rest }: Props) {
975981
),
976982
guard(body.required, () => [
977983
create("strong", {
978-
className: "badge badge--danger openapi-schema__required",
984+
className: "openapi-schema__required",
979985
children: "required",
980986
}),
981987
]),

‎packages/docusaurus-plugin-openapi-docs/src/markdown/createResponseSchema.ts

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,8 @@
55
* LICENSE file in the root directory of this source tree.
66
* ========================================================================== */
77

8+
import clsx from "clsx";
9+
810
import { MediaTypeObject, SchemaObject } from "../openapi/types";
911
import {
1012
createClosingArrayBracket,
@@ -472,8 +474,8 @@ function createDetailsNode(
472474
className: "openapi-schema__container",
473475
children: [
474476
create("strong", {
475-
...(schema.deprecated && {
476-
className: "openapi-schema__strikethrough",
477+
className: clsx("openapi-schema__property", {
478+
"openapi-schema__strikethrough": schema.deprecated,
477479
}),
478480
children: name,
479481
}),
@@ -495,7 +497,7 @@ function createDetailsNode(
495497
),
496498
guard(nullable, () => [
497499
create("span", {
498-
className: "badge badge--info openapi-schema__nullable",
500+
className: "openapi-schema__nullable",
499501
children: "nullable",
500502
}),
501503
]),
@@ -505,16 +507,14 @@ function createDetailsNode(
505507
: required === true,
506508
() => [
507509
create("span", {
508-
className:
509-
"badge badge--danger openapi-schema__required",
510+
className: "openapi-schema__required",
510511
children: "required",
511512
}),
512513
]
513514
),
514515
guard(schema.deprecated, () => [
515516
create("span", {
516-
className:
517-
"badge badge--warning openapi-schema__deprecated",
517+
className: "openapi-schema__deprecated",
518518
children: "deprecated",
519519
}),
520520
]),
@@ -566,14 +566,14 @@ function createPropertyDiscriminator(
566566
}
567567

568568
return create("div", {
569-
className: "openapi-discriminator__item",
569+
className: "openapi-discriminator__item openapi-schema__list-item",
570570
children: create("div", {
571571
children: [
572572
create("span", {
573573
className: "openapi-schema__container",
574574
children: [
575575
create("strong", {
576-
className: "openapi-discriminator__name",
576+
className: "openapi-discriminator__name openapi-schema__property",
577577
children: name,
578578
}),
579579
guard(schemaName, (name) =>
@@ -584,7 +584,7 @@ function createPropertyDiscriminator(
584584
),
585585
guard(required, () => [
586586
create("span", {
587-
className: "badge badge--danger openapi-schema__required",
587+
className: "openapi-schema__required",
588588
children: "required",
589589
}),
590590
]),
@@ -922,21 +922,21 @@ export function createResponseSchema({ title, body, ...rest }: Props) {
922922
value: `${title}`,
923923
children: [
924924
createDetails({
925-
className: "openapi-markdown__details",
925+
className: "openapi-markdown__details response",
926926
"data-collapsed": false,
927927
open: true,
928928
...rest,
929929
children: [
930930
createDetailsSummary({
931-
style: { textAlign: "left" },
931+
className:
932+
"openapi-markdown__details-summary-response",
932933
children: [
933934
create("strong", { children: `${title}` }),
934935
guard(
935936
body.required && body.required === true,
936937
() => [
937938
create("span", {
938-
className:
939-
"badge badge--danger openapi-schema__required",
939+
className: "openapi-schema__required",
940940
children: "required",
941941
}),
942942
]

‎packages/docusaurus-plugin-openapi-docs/src/markdown/index.ts

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ import { createLogo } from "./createLogo";
2424
import { createMethodEndpoint } from "./createMethodEndpoint";
2525
import { createParamsDetails } from "./createParamsDetails";
2626
import { createRequestBodyDetails } from "./createRequestBodyDetails";
27+
import { createRequestHeader } from "./createRequestHeader";
2728
import { createStatusCodes } from "./createStatusCodes";
2829
import { createTermsOfService } from "./createTermsOfService";
2930
import { createVendorExtensions } from "./createVendorExtensions";
@@ -70,17 +71,17 @@ export function createApiPageMD({
7071
`import TabItem from "@theme/TabItem";\n\n`,
7172
createHeading(title.replace(lessThan, "&lt;").replace(greaterThan, "&gt;")),
7273
createMethodEndpoint(method, path),
73-
`## ${title.replace(lessThan, "&lt;").replace(greaterThan, "&gt;")}\n\n`,
7474
infoPath && createAuthorization(infoPath),
7575
frontMatter.show_extensions && createVendorExtensions(extensions),
7676
createDeprecationNotice({ deprecated, description: deprecatedDescription }),
7777
createDescription(description),
78+
createRequestHeader("Request"),
7879
createParamsDetails({ parameters, type: "path" }),
7980
createParamsDetails({ parameters, type: "query" }),
8081
createParamsDetails({ parameters, type: "header" }),
8182
createParamsDetails({ parameters, type: "cookie" }),
8283
createRequestBodyDetails({
83-
title: "Request Body",
84+
title: "Body",
8485
body: requestBody,
8586
} as Props),
8687
createStatusCodes({ responses }),

‎packages/docusaurus-theme-openapi-docs/src/theme/ApiDemoPanel/FormItem/index.tsx

Lines changed: 1 addition & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -24,14 +24,7 @@ function FormItem({ label, type, required, children, className }: Props) {
2424
<label className="openapi-demo__form-item-label">{label}</label>
2525
)}
2626
{type && <span style={{ opacity: 0.6 }}> — {type}</span>}
27-
{required && (
28-
<span>
29-
{" "}
30-
<small>
31-
<strong className="required"> required</strong>
32-
</small>
33-
</span>
34-
)}
27+
{required && <span className="openapi-schema__required">required</span>}
3528
<div>{children}</div>
3629
</div>
3730
);

‎packages/docusaurus-theme-openapi-docs/src/theme/ApiDemoPanel/MethodEndpoint/_MethodEndpoint.scss

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,22 @@
11
.openapi__method-endpoint {
2+
display: flex;
3+
align-items: center;
24
max-width: 100%;
35
width: fit-content;
46
padding: 0.65rem;
57
border: 1px solid var(--ifm-toc-border-color);
68
}
9+
10+
.openapi__method-endpoint-path {
11+
margin-bottom: 0;
12+
margin-left: 0.5rem;
13+
font-size: 12px;
14+
font-weight: normal;
15+
font-family: var(--ifm-font-family-monospace);
16+
}
17+
18+
.openapi__divider {
19+
width: 100%;
20+
margin: 1.5rem 0;
21+
border-bottom: 1px solid var(--ifm-toc-border-color);
22+
}

‎packages/docusaurus-theme-openapi-docs/src/theme/ApiDemoPanel/MethodEndpoint/index.tsx

Lines changed: 12 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -67,15 +67,18 @@ function MethodEndpoint({ method, path }: Props) {
6767
};
6868

6969
return (
70-
<pre className="openapi__method-endpoint">
71-
<span className={"badge badge--" + colorForMethod(method)}>
72-
{method.toUpperCase()}
73-
</span>{" "}
74-
<span>
75-
{renderServerUrl()}
76-
{`${path.replace(/{([a-z0-9-_]+)}/gi, ":$1")}`}
77-
</span>
78-
</pre>
70+
<>
71+
<pre className="openapi__method-endpoint">
72+
<span className={"badge badge--" + colorForMethod(method)}>
73+
{method.toUpperCase()}
74+
</span>{" "}
75+
<h2 className="openapi__method-endpoint-path">
76+
{renderServerUrl()}
77+
{`${path.replace(/{([a-z0-9-_]+)}/gi, ":$1")}`}
78+
</h2>
79+
</pre>
80+
<div className="openapi__divider" />
81+
</>
7982
);
8083
}
8184

‎packages/docusaurus-theme-openapi-docs/src/theme/ApiDemoPanel/Request/index.tsx

Lines changed: 3 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -238,15 +238,10 @@ function Request({ item }: { item: NonNullable<ApiItem> }) {
238238
setExpandBody(!expandBody);
239239
}}
240240
>
241-
Body{" "}
241+
Body
242242
{requestBodyRequired && (
243-
<span>
244-
<small>
245-
<strong className="request-body required">
246-
{" "}
247-
required
248-
</strong>
249-
</small>
243+
<span className="openapi-schema__required">
244+
&nbsp;required
250245
</span>
251246
)}
252247
</summary>

‎packages/docusaurus-theme-openapi-docs/src/theme/ApiItem/index.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -134,10 +134,10 @@ export default function ApiItem(props: Props): JSX.Element {
134134
<DocItemLayout>
135135
<Provider store={store2}>
136136
<div className={clsx("row", "theme-api-markdown")}>
137-
<div className="col col--7">
137+
<div className="col col--7 openapi-left-panel__container">
138138
<MDXComponent />
139139
</div>
140-
<div className="col col--5">
140+
<div className="col col--5 openapi-right-panel__container">
141141
<BrowserOnly fallback={<div>Loading...</div>}>
142142
{() => {
143143
return <ApiDemoPanel item={api} infoPath={infoPath} />;

0 commit comments

Comments
 (0)