Skip to content

Commit e0fa00f

Browse files
blindaa121sserrata
blindaa121
and
sserrata
authored
[UI Enhancement] CSS Cleanup/Refactor - Migration to SCSS and BEM-style convention (#450)
* Add docusaurus-plugin-sass * Add BEM classes to ParamsItem component and create partial scss file * Add BEM classes to SchemaItem * Clean up dup styling for schema and param items * Introduce BEM classes to ApiTabs * Fix linting issues * Introduce BEM styling to DiscriminatorTabs * Introduce BEM classes to CodeTabs * Move CodeTabs styling from styles to partial file * Cleanup codetab styling * Dedup base code item styling * Remove unused Curl styles * Introduce BEM classes to Curl component * Fix lint issues * Introduce BEM class to demo panel floating button * Implement BEM class to FormFileUpload * Introduce BEM class to demo panel inputs * Remove unused styles import * Introduce BEM class to MimeTabs * Introduce BEM class to ResponseSamples * Introduce BEM class to SchemaTabs * Remove unused CodeTabs component * Fix active mimetab styling * Fix required styling in form item * Cleanup tab styling * Fix schematabs margin * Fix arrow class typo * Use full width for SchemaTabs container * Refactor CodeTabs to support setLanguage action * Fix CodeTabs styling * Introduce BEM to LiveEditor * Introduce BEM to ParamOptions * Introduce BEM classes to demo details * Move hover cursor into summary container * Introduce BEM class to markdown details * Override docusaurus details styling * Additional BEM/CSS cleanup (#481) * Rename discriminator class * Avoid unnecessary outer div * Comment out deprecated/redundant styles and switch to toc border color for method-endpoint * Apply BEM convention to response status elements * Refactor response status styles * Introduce BEM to Server * Cleanup styles.scss * Remove unused Curl styling --------- Co-authored-by: Steven Serrata <9343811+sserrata@users.noreply.github.com>
1 parent 6e15f07 commit e0fa00f

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

63 files changed

+1266
-1592
lines changed

‎demo/docusaurus.config.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -199,6 +199,7 @@ const config = {
199199
}),
200200

201201
plugins: [
202+
"docusaurus-plugin-sass",
202203
[
203204
"docusaurus-plugin-openapi-docs",
204205
{

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@ export function createParamsDetails({ parameters, type }: Props) {
2525
}
2626

2727
return createDetails({
28+
className: "openapi-markdown__details",
2829
"data-collapsed": false,
2930
open: true,
3031
style: { marginBottom: "1rem" },

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

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -391,7 +391,7 @@ function createItems(schema: SchemaObject) {
391391
// }
392392

393393
// return create("div", {
394-
// className: "discriminatorItem",
394+
// className: "openapi-discriminator__item",
395395
// children: create("div", {
396396
// children: [
397397
// create("strong", {
@@ -465,6 +465,7 @@ function createDetailsNode(
465465
className: "schemaItem",
466466
children: [
467467
createDetails({
468+
className: "openapi-markdown__details",
468469
children: [
469470
createDetailsSummary({
470471
children: [
@@ -546,7 +547,7 @@ function createPropertyDiscriminator(
546547
}
547548

548549
return create("div", {
549-
className: "discriminatorItem",
550+
className: "openapi-discriminator__item",
550551
children: create("div", {
551552
children: [
552553
create("strong", { style: { paddingLeft: "1rem" }, children: name }),
@@ -586,7 +587,7 @@ function createPropertyDiscriminator(
586587
children: Object.keys(discriminator?.mapping!).map((key, index) => {
587588
const label = key;
588589
return create("TabItem", {
589-
className: "openapi-tabs__discriminator-item",
590+
// className: "openapi-tabs__discriminator-item",
590591
label: label,
591592
value: `${index}-item-discriminator`,
592593
children: [createNodes(discriminator?.mapping[key])],
@@ -875,6 +876,7 @@ export function createRequestSchema({ title, body, ...rest }: Props) {
875876
value: `${mimeType}`,
876877
children: [
877878
createDetails({
879+
className: "openapi-markdown__details",
878880
"data-collapsed": false,
879881
open: true,
880882
...rest,
@@ -939,6 +941,7 @@ export function createRequestSchema({ title, body, ...rest }: Props) {
939941
value: `${randomFirstKey}-schema`,
940942
children: [
941943
createDetails({
944+
className: "openapi-markdown__details",
942945
"data-collapsed": false,
943946
open: true,
944947
...rest,

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

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -398,7 +398,7 @@ function createItems(schema: SchemaObject) {
398398
// }
399399

400400
// return create("div", {
401-
// className: "discriminatorItem",
401+
// className: "openapi-discriminator__item",
402402
// children: create("div", {
403403
// children: [
404404
// create("strong", {
@@ -472,6 +472,7 @@ function createDetailsNode(
472472
className: "schemaItem",
473473
children: [
474474
createDetails({
475+
className: "openapi-markdown__details",
475476
children: [
476477
createDetailsSummary({
477478
children: [
@@ -553,7 +554,7 @@ function createPropertyDiscriminator(
553554
}
554555

555556
return create("div", {
556-
className: "discriminatorItem",
557+
className: "openapi-discriminator__item",
557558
children: create("div", {
558559
children: [
559560
create("strong", { style: { paddingLeft: "1rem" }, children: name }),
@@ -593,7 +594,7 @@ function createPropertyDiscriminator(
593594
children: Object.keys(discriminator?.mapping!).map((key, index) => {
594595
const label = key;
595596
return create("TabItem", {
596-
className: "openapi-tabs__discriminator-item",
597+
// className: "openapi-tabs__discriminator-item",
597598
label: label,
598599
value: `${index}-item-discriminator`,
599600
children: [createNodes(discriminator?.mapping[key])],
@@ -904,6 +905,7 @@ export function createResponseSchema({ title, body, ...rest }: Props) {
904905
value: `${title}`,
905906
children: [
906907
createDetails({
908+
className: "openapi-markdown__details",
907909
"data-collapsed": false,
908910
open: true,
909911
...rest,

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -280,6 +280,7 @@ export function createStatusCodes({ responses }: Props) {
280280
}),
281281
responseHeaders &&
282282
createDetails({
283+
className: "openapi-markdown__details",
283284
"data-collaposed": true,
284285
open: false,
285286
style: { textAlign: "left", marginBottom: "1rem" },

‎packages/docusaurus-theme-openapi-docs/package.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -52,6 +52,7 @@
5252
"clsx": "^1.1.1",
5353
"crypto-js": "^4.1.1",
5454
"docusaurus-plugin-openapi-docs": "^1.6.1",
55+
"docusaurus-plugin-sass": "^0.2.3",
5556
"file-saver": "^2.0.5",
5657
"immer": "^9.0.7",
5758
"lodash": "^4.17.20",
@@ -64,6 +65,7 @@
6465
"react-redux": "^7.2.0",
6566
"redux-devtools-extension": "^2.13.8",
6667
"rehype-raw": "^6.1.1",
68+
"sass": "^1.58.1",
6769
"webpack": "^5.61.0",
6870
"xml-formatter": "^2.6.1"
6971
},

‎packages/docusaurus-theme-openapi-docs/src/index.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ export default function docusaurusThemeOpenAPI(): Plugin<void> {
1616
name: "docusaurus-theme-openapi",
1717

1818
getClientModules() {
19-
const modules = [require.resolve("./theme/styles.css")];
19+
const modules = [require.resolve("./theme/styles.scss")];
2020
return modules;
2121
},
2222

‎packages/docusaurus-theme-openapi-docs/src/theme/ApiDemoPanel/CodeTabs/_CodeTabs.scss‎

Lines changed: 216 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,216 @@
1+
.openapi-tabs__code-list-container {
2+
display: table-row-group;
3+
}
4+
5+
.openapi-tabs__code-item {
6+
margin-top: 0 !important;
7+
margin-right: 0.5rem;
8+
padding-left: 1.5rem;
9+
padding-right: 1.5rem;
10+
padding-top: 1rem !important;
11+
padding-bottom: 1rem !important;
12+
13+
&.active {
14+
border-bottom-left-radius: 0;
15+
border-bottom-right-radius: 0;
16+
}
17+
}
18+
19+
.openapi-tabs__code-item--python {
20+
color: var(--ifm-color-success);
21+
22+
&::after {
23+
content: "";
24+
width: 28px;
25+
height: 28px;
26+
background: url("https://raw.githubusercontent.com/devicons/devicon/master/icons/python/python-original.svg");
27+
margin-block: auto;
28+
}
29+
30+
&.active {
31+
border-bottom-color: var(--ifm-color-success);
32+
background-color: var(--ifm-color-emphasis-100);
33+
}
34+
}
35+
36+
.language-python {
37+
max-height: 500px;
38+
overflow: auto;
39+
}
40+
41+
.openapi-tabs__code-item--go {
42+
color: var(--ifm-color-info);
43+
44+
&::after {
45+
content: "";
46+
width: 28px;
47+
height: 28px;
48+
background: url("https://raw.githubusercontent.com/devicons/devicon/master/icons/go/go-original-wordmark.svg");
49+
margin-block: auto;
50+
}
51+
52+
&.active {
53+
border-bottom-color: var(--ifm-color-info);
54+
background-color: var(--ifm-color-emphasis-100);
55+
}
56+
}
57+
58+
.language-go {
59+
max-height: 500px;
60+
overflow: auto;
61+
}
62+
63+
.openapi-tabs__code-item--javascript {
64+
color: var(--ifm-color-warning);
65+
66+
&::after {
67+
content: "";
68+
width: 28px;
69+
height: 28px;
70+
background: url("https://raw.githubusercontent.com/devicons/devicon/master/icons/javascript/javascript-original.svg");
71+
margin-block: auto;
72+
}
73+
74+
&.active {
75+
border-bottom-color: var(--ifm-color-warning);
76+
background-color: var(--ifm-color-emphasis-100);
77+
}
78+
}
79+
80+
.language-javascript {
81+
max-height: 500px;
82+
overflow: auto;
83+
}
84+
85+
.openapi-tabs__code-item--bash {
86+
color: var(--ifm-color-danger);
87+
88+
&::after {
89+
content: "";
90+
width: 28px;
91+
height: 28px;
92+
background: url("https://raw.githubusercontent.com/devicons/devicon/master/icons/linux/linux-original.svg");
93+
margin-block: auto;
94+
}
95+
96+
&.active {
97+
border-bottom-color: var(--ifm-color-danger);
98+
background-color: var(--ifm-color-emphasis-100);
99+
}
100+
}
101+
102+
.language-bash {
103+
max-height: 500px;
104+
overflow: auto;
105+
}
106+
107+
.openapi-tabs__code-item--ruby {
108+
color: var(--ifm-color-danger);
109+
110+
&::after {
111+
content: "";
112+
width: 28px;
113+
height: 28px;
114+
background: url("https://raw.githubusercontent.com/devicons/devicon/master/icons/ruby/ruby-plain.svg");
115+
margin-block: auto;
116+
}
117+
118+
&.active {
119+
border-bottom-color: var(--ifm-color-danger);
120+
background-color: var(--ifm-color-emphasis-100);
121+
}
122+
}
123+
124+
.language-ruby {
125+
max-height: 500px;
126+
overflow: auto;
127+
}
128+
129+
.openapi-tabs__code-item--csharp {
130+
color: var(--ifm-color-gray-500);
131+
132+
&::after {
133+
content: "";
134+
width: 28px;
135+
height: 28px;
136+
background: url("https://raw.githubusercontent.com/devicons/devicon/master/icons/csharp/csharp-original.svg");
137+
margin-block: auto;
138+
}
139+
140+
&.active {
141+
border-bottom-color: var(--ifm-color-gray-500);
142+
background-color: var(--ifm-color-emphasis-100);
143+
}
144+
}
145+
146+
.language-csharp {
147+
max-height: 500px;
148+
overflow: auto;
149+
}
150+
151+
.openapi-tabs__code-item--nodejs {
152+
color: var(--ifm-color-success);
153+
154+
&::after {
155+
content: "";
156+
width: 28px;
157+
height: 28px;
158+
background: url("https://raw.githubusercontent.com/devicons/devicon/master/icons/nodejs/nodejs-original.svg");
159+
margin-block: auto;
160+
}
161+
162+
&.active {
163+
border-bottom-color: var(--ifm-color-success);
164+
background-color: var(--ifm-color-emphasis-100);
165+
}
166+
}
167+
168+
.language-nodejs {
169+
max-height: 500px;
170+
overflow: auto;
171+
}
172+
173+
.openapi-tabs__code-item--php {
174+
color: var(--ifm-color-gray-500);
175+
176+
&::after {
177+
content: "";
178+
width: 28px;
179+
height: 28px;
180+
background: url("https://raw.githubusercontent.com/devicons/devicon/master/icons/php/php-original.svg");
181+
margin-block: auto;
182+
}
183+
184+
&.active {
185+
border-bottom-color: var(--ifm-color-gray-500);
186+
background-color: var(--ifm-color-emphasis-100);
187+
}
188+
}
189+
190+
.language-php {
191+
max-height: 500px;
192+
overflow: auto;
193+
}
194+
195+
.openapi-tabs__code-item--java {
196+
color: var(--ifm-color-warning);
197+
198+
&::after {
199+
content: "";
200+
width: 28px;
201+
height: 28px;
202+
background: url("https://raw.githubusercontent.com/devicons/devicon/master/icons/java/java-original.svg");
203+
margin-block: auto;
204+
}
205+
206+
&.active {
207+
border-bottom-color: var(--ifm-color-warning);
208+
background-color: var(--ifm-color-emphasis-100);
209+
}
210+
}
211+
212+
@media only screen and (min-width: 768px) and (max-width: 996px) {
213+
.openapi-tabs__code-list {
214+
justify-content: space-around;
215+
}
216+
}

0 commit comments

Comments
 (0)