swagger-ui
swagger-ui copied to clipboard
Required Path Parameters are missing the .star class given to required Schema properties
Q&A
- OS: win11
- Browser: firefox
- Version: 124.0.2
- Method of installation: dist assets via https://cdn.jsdelivr.net/npm/[email protected]/swagger-ui-bundle.min.js
- Swagger-UI version: 5.15.1
- Swagger/OpenAPI version: 3.0.3
Content & configuration
Required Path Parameter
Required Schema Property
Example Swagger/OpenAPI definition:
{
"components": {
"parameters": {
"PathID": {
"in": "path",
"name": "id",
"required": true,
"schema": {
"type": "string"
}
}
},
"schemas": {
"SomeObject": {
"example": {
"id": "502f6aacfcb8e5940e829306054dc20a"
},
"type": "object",
"required": ["id"],
"properties": {
"id": {
"type": "string"
}
}
}
}
},
"info": {
"title": "Title",
"version": "1.0"
},
"openapi": "3.0.3",
"paths": {
"/a/{id}": {
"get": {
"responses": {
"200": {
"description": "Response Description",
"content": {
"application/json": {}
}
}
}
},
"parameters": [
{
"$ref": "#/components/parameters/PathID"
}
]
}
}
}
Swagger-UI configuration options:
SwaggerUIBundle({
spec: data,
dom_id: '#api_container',
presets: [SwaggerUIBundle.presets.apis],
layout: 'BaseLayout',
showCommonExtensions: true
});
Describe the bug you're encountering
Required Schema Properties
have an appended red asterisk as a span element and include an additional .star
class on said span element
Required Path Parameters
have a red asterisk (and an ::after element with the content required) that indicates its importance but are missing the .star
class that required Schema properties possess
To reproduce...
Steps to reproduce the behavior:
- Use the provided OpenAPI definitions and load them as the spec value in the Swagger-UI configuration option (make sure to also provide a valid dom_id)
- Click on the GET
/a/{id}
path and navigate to the PARAMETERS list - Inspect the red asterisk on the id field
- Observe the missing
.star
class on the span element - Navigate to the Schemas List and open/click on the
SomeObject
schema definition - Inspect the red asterisk on the id field
- Observe the
.star
class on the span element
Expected behavior
The red asterisk after required path parameters should also include the .star
class for consistency
Screenshots
Required Path Parameter
Required Schema Property
Additional context or thoughts
As part of a customization of some of the design elements, i wanted to adjust the way required properties & fields look During that process i noticed that i would need to style their red asterisk the following way
div.table-container table.parameters tbody tr td.parameters-col_name div.parameter__name.required span:nth-child(1),
.star {
display: none;
}
Instead of being able to just address them via .star
This is extremely minor and easy to work around, but i still think that it should be resolved for the sake of consistency - albeit with a pretty low priority
I think that this is caused by this specific line https://github.com/swagger-api/swagger-ui/blob/8d94b55e7dddd7daeefb3dcefe4f3f8508a7afd3/src/core/components/parameter-row.jsx#L276 but i haven't familiarized myself with this codebase yet