swagger-ui icon indicating copy to clipboard operation
swagger-ui copied to clipboard

Required Path Parameters are missing the .star class given to required Schema properties

Open greyliances opened this issue 10 months ago • 0 comments

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 image

Required Schema Property image

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:

  1. 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)
  2. Click on the GET /a/{id} path and navigate to the PARAMETERS list
  3. Inspect the red asterisk on the id field
  4. Observe the missing .star class on the span element
  5. Navigate to the Schemas List and open/click on the SomeObject schema definition
  6. Inspect the red asterisk on the id field
  7. 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 image

Required Schema Property image

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

greyliances avatar Apr 13 '24 22:04 greyliances