Skip to content

neetoUI Audit

Praveen Murali edited this page Feb 23, 2022 · 5 revisions

neetoUI and a11y audit.

neetoUI and a11y audit

Overlays

1. Modals & Alerts

Group_1_(3)

Header bottom spacing

In the example shown above, we are using the same bottom spacing for both the Modals. But for the second Modal the spacing seems a bit odd.

Possible Solution

Screenshot_2022-02-22_at_11 38 25_AM

Benefits

  • Here the Modal Close icon is aligned with the Header text, so we can provide a compact look for Modals.
  • Modal Header bottom spacing works well for both cases (description and form components).
  • In Pane, we already have this alignment. In terms of consistency, it would be better if we could follow the same approach in Modal/Alert.

Modal Close Button

28x28px icon-only button

Modal Footer Buttons

Submit - primary - large Button

Cancel - text - large Button

Modal Footer Buttons spacing

8px

Loading state

Modal

Currently, we are providing a boolean loading prop, but we are using an empty UI state for this.

Alert

PageLoader

2. Pane

Pane Close Button

28x28px icon-only button

Pane Footer Buttons

Submit - primary - large Button

Cancel - text - large Button

Pane Footer Buttons spacing

8px

Loading state

Currently, we are providing a boolean loading prop, but we are using an empty UI state for this.

Clone this wiki locally