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.

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

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

Merged
merged 40 commits into from
Mar 9, 2023

Conversation

blindaa121
Copy link
Collaborator

@blindaa121 blindaa121 commented Feb 22, 2023

Description

This PR consists of the migration from CSS Modules to SCSS throughout our theme components, renaming classnames to follow BEM style convention, as well as introducing a manifest stylesheet and partial stylesheet per component for better organization. The end-goal of this approach is to provide our users with better customizability throughout our theme components and allow elements to be easily selected/targeted.

The following components that have migrated or pending migration:

  • ApiDemoPanel
    • CodeTabs
    • Curl
    • FloatingButton
    • FormFileUpload
    • FormItem
    • FormMultiSelect
    • FormSelect
    • FormTextInput
    • LiveEditor
    • ParamOptions
    • Request
    • Server
  • ApiTabs
  • DiscriminatorTabs
  • MimeTabs
  • ParamsItem
  • ResponseSamples
  • SchemaItem
  • SchemaTabs
  • Markdown Details

Motivation and Context

How Has This Been Tested?

Screenshots (if appropriate)

Types of changes

  • Bug fix (non-breaking change which fixes an issue)
  • New feature (non-breaking change which adds functionality)
  • Breaking change (fix or feature that would cause existing functionality to change)

Checklist

  • I have updated the documentation accordingly.
  • I have read the CONTRIBUTING document.
  • I have added tests to cover my changes if appropriate.
  • All new and existing tests passed.

@blindaa121 blindaa121 added this to the v2.0 UI/UX Refresh milestone Feb 22, 2023
@blindaa121 blindaa121 self-assigned this Feb 22, 2023
@github-actions
Copy link

github-actions bot commented Feb 22, 2023

Visit the preview URL for this PR (updated for commit 9e71c99):

https://docusaurus-openapi-36b86--pr450-lpmkkpzv.web.app

(expires Sat, 08 Apr 2023 22:56:18 GMT)

🔥 via Firebase Hosting GitHub Action 🌎

@blindaa121 blindaa121 mentioned this pull request Feb 22, 2023
12 tasks
@blindaa121 blindaa121 force-pushed the css-bem-classes branch 2 times, most recently from a371883 to 769c356 Compare March 6, 2023 17:30
blindaa121 and others added 9 commits March 7, 2023 19:30
* 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
Copy link
Member

@sserrata sserrata left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🚀 Awesome job! I think it's GTG for our first beta release

@blindaa121 blindaa121 merged commit e0fa00f into v2.0.0 Mar 9, 2023
@blindaa121 blindaa121 deleted the css-bem-classes branch March 9, 2023 23:06
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants