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

fix: added consistent styling for buttons and tags #1099

Open
wants to merge 4 commits into
base: master
Choose a base branch
from

Conversation

hargunkaur286
Copy link

Description

This PR is related to the issue with inconsistent styling. According to the issue, "WCAG 2.0 guideline 3.2.4 Consistent Identification states "Components that have the same functionality within a set of Web pages are identified consistently".

For example:
If we move to async-react website,
Screenshot 2024-10-20 at 3 12 13 AM
We will notice that there are multiple elements with a solid color background, but only some of them are a button.

Changes proposed in this pull request:

To resolve this, the ask in the issue was:

  1. Buttons to be styled with rectangular outline.
  2. Tags to be styled with solid background.

In this PR, changes have been made in 4 files:

  1. In "library/src/components/Schema.tsx" file:
    Addresses the tags "Default values", "const", "Allowed values", "Example values".
    BEFORE:
    Screenshot 2024-10-20 at 3 30 26 AM

    AFTER:
    Screenshot 2024-10-20 at 3 30 08 AM

  2. In "library/src/containers/Messages/Message.tsx" file
    Addresses tags of "Correlation Id" and "Message Id"
    BEFORE:
    Screenshot 2024-10-20 at 3 32 54 AM
    AFTER:

Screenshot 2024-10-20 at 3 33 28 AM
  1. In "library/src/containers/Messages/MessageExample.tsx" file
    Addresses the example labels
    BEFORE:
    Screenshot 2024-10-20 at 3 35 03 AM

    AFTER:

    Screenshot 2024-10-20 at 3 35 32 AM
  2. In "library/src/containers/Operations/Operation.tsx" file
    BEFORE:
    Screenshot 2024-10-20 at 3 36 44 AM

    AFTER:

    Screenshot 2024-10-20 at 3 37 20 AM Screenshot 2024-10-20 at 3 37 44 AM

Related issue(s)

Resolves #960

Copy link

@github-actions github-actions bot left a comment

Choose a reason for hiding this comment

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

Welcome to AsyncAPI. Thanks a lot for creating your first pull request. Please check out our contributors guide useful for opening a pull request.
Keep in mind there are also other channels you can use to interact with AsyncAPI community. For more details check out this issue.

@hargunkaur286 hargunkaur286 changed the title added consistent styling for buttons and tags fix: added consistent styling for buttons and tags Oct 19, 2024
@catosaurusrex2003
Copy link
Contributor

To resolve this, the ask in the issue

  1. Buttons to be styled with rectangular outline.
  2. Tags to be styled with solid background.

I support this, also the changes are looking good.

However, I feel like there should be a py-1 added to some of the tags which are being converted to solid.
image
in the above 👆 example you can see that lightMeasured Message ID tags which you have made solid appear to be thinner than format: date-time

This is my opinion, Please let me know what you think about this.

Copy link
Member

@AceTheCreator AceTheCreator left a comment

Choose a reason for hiding this comment

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

@hargunkaur286 i don't think you should apply the changes to the messageExample.tsx file 🤔

Signed-off-by: Hargun Kaur <[email protected]>
Signed-off-by: Hargun Kaur <[email protected]>
Copy link

sonarcloud bot commented Oct 23, 2024

@hargunkaur286
Copy link
Author

@hargunkaur286 i don't think you should apply the changes to the messageExample.tsx file 🤔

@AceTheCreator @catosaurusrex2003 Thank you for the feedback. I have removed the changes from messageExample.tsx file

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

508 Accessibility: Inconsistent styling leads to confusion on the purpose of a component
3 participants