feature: add unique className for components
What/Why/How?
Most components and other divs in the Redoc rendered API spec do not have unique classNames. Users who want/need to override default Redoc CSS are required to use relative css because of this (e.g below). This leads to some object's CSS not being able to be changed without affecting other components on the page that also happen to be nested in the same way. This PR aims to give certain components unique class names to allow for more direct referencing, to solve the problem of clashing CSS, and improve code structure.
Current CSS override in our code base for polymorphism buttons:
.RedocStandalone
div[id^='operation']
> div
> div
> div
> div
> div
> div
> button[class^='sc'] {
background-color: var(--ifm-background-color);
}
Testing
There are currently 3 tests in place that monitor component rendering, each of these tests has had their snapshots updated to include the new class names. All unit and e2e tests are passing.
There is also a new Markdown file created in the docs directory that lists the classNames that have been added.
Check yourself
- [x] Code is linted
- [x] Tested
- [x] All new/updated code is covered with tests