Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[UI Enhancement] CSS Cleanup/Refactor - Migration to SCSS and BEM-style convention #450

Merged
merged 40 commits into from
Mar 9, 2023
Merged

[UI Enhancement] CSS Cleanup/Refactor - Migration to SCSS and BEM-style convention #450

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
40 commits
Select commit Hold shift + click to select a range
2f5728a
Add docusaurus-plugin-sass
blindaa121 Feb 16, 2023
1bb46f3
Add BEM classes to ParamsItem component and create partial scss file
blindaa121 Feb 16, 2023
7499579
Add BEM classes to SchemaItem
blindaa121 Feb 16, 2023
501ddb7
Clean up dup styling for schema and param items
blindaa121 Feb 16, 2023
e4fad10
Introduce BEM classes to ApiTabs
blindaa121 Feb 22, 2023
071f6e1
Fix linting issues
blindaa121 Feb 22, 2023
8265e35
Introduce BEM styling to DiscriminatorTabs
blindaa121 Feb 24, 2023
4429f6e
Introduce BEM classes to CodeTabs
blindaa121 Feb 28, 2023
b3d79c0
Move CodeTabs styling from styles to partial file
blindaa121 Feb 28, 2023
86a5233
Cleanup codetab styling
blindaa121 Feb 28, 2023
dead7b8
Dedup base code item styling
blindaa121 Feb 28, 2023
340e2a8
Remove unused Curl styles
blindaa121 Feb 28, 2023
c0bb7bc
Introduce BEM classes to Curl component
blindaa121 Feb 28, 2023
b8316b6
Fix lint issues
blindaa121 Mar 1, 2023
f0ec602
Introduce BEM class to demo panel floating button
blindaa121 Mar 1, 2023
315e588
Implement BEM class to FormFileUpload
blindaa121 Mar 1, 2023
fc2e190
Introduce BEM class to demo panel inputs
blindaa121 Mar 2, 2023
711775a
Remove unused styles import
blindaa121 Mar 2, 2023
289f7bc
Introduce BEM class to MimeTabs
blindaa121 Mar 2, 2023
01e4858
Introduce BEM class to ResponseSamples
blindaa121 Mar 2, 2023
2285335
Introduce BEM class to SchemaTabs
blindaa121 Mar 2, 2023
865c012
Remove unused CodeTabs component
blindaa121 Mar 6, 2023
cf2b13e
Fix active mimetab styling
blindaa121 Mar 6, 2023
bda31c4
Fix required styling in form item
blindaa121 Mar 6, 2023
a64403f
Cleanup tab styling
blindaa121 Mar 7, 2023
e368173
Fix schematabs margin
blindaa121 Mar 7, 2023
8f8f194
Fix arrow class typo
blindaa121 Mar 7, 2023
81f8042
Use full width for SchemaTabs container
blindaa121 Mar 7, 2023
aea8264
Refactor CodeTabs to support setLanguage action
blindaa121 Mar 8, 2023
3289769
Fix CodeTabs styling
blindaa121 Mar 8, 2023
997df8d
Introduce BEM to LiveEditor
blindaa121 Mar 8, 2023
ad3983b
Introduce BEM to ParamOptions
blindaa121 Mar 8, 2023
c5b61dd
Introduce BEM classes to demo details
blindaa121 Mar 8, 2023
80c03c1
Move hover cursor into summary container
blindaa121 Mar 8, 2023
f6f298a
Introduce BEM class to markdown details
blindaa121 Mar 9, 2023
3ac7b99
Override docusaurus details styling
blindaa121 Mar 9, 2023
5358e05
Additional BEM/CSS cleanup (#481)
sserrata Mar 9, 2023
66ebcd6
Introduce BEM to Server
blindaa121 Mar 9, 2023
c50cdac
Cleanup styles.scss
blindaa121 Mar 9, 2023
9e71c99
Remove unused Curl styling
blindaa121 Mar 9, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions demo/docusaurus.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -199,6 +199,7 @@ const config = {
}),

plugins: [
"docusaurus-plugin-sass",
[
"docusaurus-plugin-openapi-docs",
{
Expand Down
1 change: 1 addition & 0 deletions packages/docusaurus-plugin-openapi-docs/src/markdown/createParamsDetails.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@ export function createParamsDetails({ parameters, type }: Props) {
}

return createDetails({
className: "openapi-markdown__details",
"data-collapsed": false,
open: true,
style: { marginBottom: "1rem" },
Expand Down
9 changes: 6 additions & 3 deletions packages/docusaurus-plugin-openapi-docs/src/markdown/createRequestSchema.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -391,7 +391,7 @@ function createItems(schema: SchemaObject) {
// }

// return create("div", {
// className: "discriminatorItem",
// className: "openapi-discriminator__item",
// children: create("div", {
// children: [
// create("strong", {
Expand Down Expand Up @@ -465,6 +465,7 @@ function createDetailsNode(
className: "schemaItem",
children: [
createDetails({
className: "openapi-markdown__details",
children: [
createDetailsSummary({
children: [
Expand Down Expand Up @@ -546,7 +547,7 @@ function createPropertyDiscriminator(
}

return create("div", {
className: "discriminatorItem",
className: "openapi-discriminator__item",
children: create("div", {
children: [
create("strong", { style: { paddingLeft: "1rem" }, children: name }),
Expand Down Expand Up @@ -586,7 +587,7 @@ function createPropertyDiscriminator(
children: Object.keys(discriminator?.mapping!).map((key, index) => {
const label = key;
return create("TabItem", {
className: "openapi-tabs__discriminator-item",
// className: "openapi-tabs__discriminator-item",
label: label,
value: `${index}-item-discriminator`,
children: [createNodes(discriminator?.mapping[key])],
Expand Down Expand Up @@ -875,6 +876,7 @@ export function createRequestSchema({ title, body, ...rest }: Props) {
value: `${mimeType}`,
children: [
createDetails({
className: "openapi-markdown__details",
"data-collapsed": false,
open: true,
...rest,
Expand Down Expand Up @@ -939,6 +941,7 @@ export function createRequestSchema({ title, body, ...rest }: Props) {
value: `${randomFirstKey}-schema`,
children: [
createDetails({
className: "openapi-markdown__details",
"data-collapsed": false,
open: true,
...rest,
Expand Down
8 changes: 5 additions & 3 deletions packages/docusaurus-plugin-openapi-docs/src/markdown/createResponseSchema.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -398,7 +398,7 @@ function createItems(schema: SchemaObject) {
// }

// return create("div", {
// className: "discriminatorItem",
// className: "openapi-discriminator__item",
// children: create("div", {
// children: [
// create("strong", {
Expand Down Expand Up @@ -472,6 +472,7 @@ function createDetailsNode(
className: "schemaItem",
children: [
createDetails({
className: "openapi-markdown__details",
children: [
createDetailsSummary({
children: [
Expand Down Expand Up @@ -553,7 +554,7 @@ function createPropertyDiscriminator(
}

return create("div", {
className: "discriminatorItem",
className: "openapi-discriminator__item",
children: create("div", {
children: [
create("strong", { style: { paddingLeft: "1rem" }, children: name }),
Expand Down Expand Up @@ -593,7 +594,7 @@ function createPropertyDiscriminator(
children: Object.keys(discriminator?.mapping!).map((key, index) => {
const label = key;
return create("TabItem", {
className: "openapi-tabs__discriminator-item",
// className: "openapi-tabs__discriminator-item",
label: label,
value: `${index}-item-discriminator`,
children: [createNodes(discriminator?.mapping[key])],
Expand Down Expand Up @@ -904,6 +905,7 @@ export function createResponseSchema({ title, body, ...rest }: Props) {
value: `${title}`,
children: [
createDetails({
className: "openapi-markdown__details",
"data-collapsed": false,
open: true,
...rest,
Expand Down
1 change: 1 addition & 0 deletions packages/docusaurus-plugin-openapi-docs/src/markdown/createStatusCodes.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -280,6 +280,7 @@ export function createStatusCodes({ responses }: Props) {
}),
responseHeaders &&
createDetails({
className: "openapi-markdown__details",
"data-collaposed": true,
open: false,
style: { textAlign: "left", marginBottom: "1rem" },
Expand Down
2 changes: 2 additions & 0 deletions packages/docusaurus-theme-openapi-docs/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,6 +52,7 @@
"clsx": "^1.1.1",
"crypto-js": "^4.1.1",
"docusaurus-plugin-openapi-docs": "^1.6.1",
"docusaurus-plugin-sass": "^0.2.3",
"file-saver": "^2.0.5",
"immer": "^9.0.7",
"lodash": "^4.17.20",
Expand All @@ -64,6 +65,7 @@
"react-redux": "^7.2.0",
"redux-devtools-extension": "^2.13.8",
"rehype-raw": "^6.1.1",
"sass": "^1.58.1",
"webpack": "^5.61.0",
"xml-formatter": "^2.6.1"
},
Expand Down
2 changes: 1 addition & 1 deletion packages/docusaurus-theme-openapi-docs/src/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ export default function docusaurusThemeOpenAPI(): Plugin<void> {
name: "docusaurus-theme-openapi",

getClientModules() {
const modules = [require.resolve("./theme/styles.css")];
const modules = [require.resolve("./theme/styles.scss")];
return modules;
},

Expand Down
216 changes: 216 additions & 0 deletions packages/docusaurus-theme-openapi-docs/src/theme/ApiDemoPanel/CodeTabs/_CodeTabs.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,216 @@
.openapi-tabs__code-list-container {
display: table-row-group;
}

.openapi-tabs__code-item {
margin-top: 0 !important;
margin-right: 0.5rem;
padding-left: 1.5rem;
padding-right: 1.5rem;
padding-top: 1rem !important;
padding-bottom: 1rem !important;

&.active {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
}

.openapi-tabs__code-item--python {
color: var(--ifm-color-success);

&::after {
content: "";
width: 28px;
height: 28px;
background: url("https://raw.githubusercontent.com/devicons/devicon/master/icons/python/python-original.svg");
margin-block: auto;
}

&.active {
border-bottom-color: var(--ifm-color-success);
background-color: var(--ifm-color-emphasis-100);
}
}

.language-python {
max-height: 500px;
overflow: auto;
}

.openapi-tabs__code-item--go {
color: var(--ifm-color-info);

&::after {
content: "";
width: 28px;
height: 28px;
background: url("https://raw.githubusercontent.com/devicons/devicon/master/icons/go/go-original-wordmark.svg");
margin-block: auto;
}

&.active {
border-bottom-color: var(--ifm-color-info);
background-color: var(--ifm-color-emphasis-100);
}
}

.language-go {
max-height: 500px;
overflow: auto;
}

.openapi-tabs__code-item--javascript {
color: var(--ifm-color-warning);

&::after {
content: "";
width: 28px;
height: 28px;
background: url("https://raw.githubusercontent.com/devicons/devicon/master/icons/javascript/javascript-original.svg");
margin-block: auto;
}

&.active {
border-bottom-color: var(--ifm-color-warning);
background-color: var(--ifm-color-emphasis-100);
}
}

.language-javascript {
max-height: 500px;
overflow: auto;
}

.openapi-tabs__code-item--bash {
color: var(--ifm-color-danger);

&::after {
content: "";
width: 28px;
height: 28px;
background: url("https://raw.githubusercontent.com/devicons/devicon/master/icons/linux/linux-original.svg");
margin-block: auto;
}

&.active {
border-bottom-color: var(--ifm-color-danger);
background-color: var(--ifm-color-emphasis-100);
}
}

.language-bash {
max-height: 500px;
overflow: auto;
}

.openapi-tabs__code-item--ruby {
color: var(--ifm-color-danger);

&::after {
content: "";
width: 28px;
height: 28px;
background: url("https://raw.githubusercontent.com/devicons/devicon/master/icons/ruby/ruby-plain.svg");
margin-block: auto;
}

&.active {
border-bottom-color: var(--ifm-color-danger);
background-color: var(--ifm-color-emphasis-100);
}
}

.language-ruby {
max-height: 500px;
overflow: auto;
}

.openapi-tabs__code-item--csharp {
color: var(--ifm-color-gray-500);

&::after {
content: "";
width: 28px;
height: 28px;
background: url("https://raw.githubusercontent.com/devicons/devicon/master/icons/csharp/csharp-original.svg");
margin-block: auto;
}

&.active {
border-bottom-color: var(--ifm-color-gray-500);
background-color: var(--ifm-color-emphasis-100);
}
}

.language-csharp {
max-height: 500px;
overflow: auto;
}

.openapi-tabs__code-item--nodejs {
color: var(--ifm-color-success);

&::after {
content: "";
width: 28px;
height: 28px;
background: url("https://raw.githubusercontent.com/devicons/devicon/master/icons/nodejs/nodejs-original.svg");
margin-block: auto;
}

&.active {
border-bottom-color: var(--ifm-color-success);
background-color: var(--ifm-color-emphasis-100);
}
}

.language-nodejs {
max-height: 500px;
overflow: auto;
}

.openapi-tabs__code-item--php {
color: var(--ifm-color-gray-500);

&::after {
content: "";
width: 28px;
height: 28px;
background: url("https://raw.githubusercontent.com/devicons/devicon/master/icons/php/php-original.svg");
margin-block: auto;
}

&.active {
border-bottom-color: var(--ifm-color-gray-500);
background-color: var(--ifm-color-emphasis-100);
}
}

.language-php {
max-height: 500px;
overflow: auto;
}

.openapi-tabs__code-item--java {
color: var(--ifm-color-warning);

&::after {
content: "";
width: 28px;
height: 28px;
background: url("https://raw.githubusercontent.com/devicons/devicon/master/icons/java/java-original.svg");
margin-block: auto;
}

&.active {
border-bottom-color: var(--ifm-color-warning);
background-color: var(--ifm-color-emphasis-100);
}
}

@media only screen and (min-width: 768px) and (max-width: 996px) {
.openapi-tabs__code-list {
justify-content: space-around;
}
}
Loading