Open question: How much have you used the DHIS2 UI library? How about other React UI libraries?

Hi DHIS2 Developers. We’re working on some improvements for our UI library and we want to understand developer pain points. Our latest discussion is around how to pass references to underlying HTML elements in UI components (basically what support we should provide to developers). So it’s better to start with an open question to DHIS2 developers which you can see in the title. If you have used the DHIS2 UI library or other React UI libraries please reply to thread and we can continue the conversation to see how we can help you with upcoming improvements for developers.
Thanks!

7 Likes

Hi German,

I have used the UI library on almost all web app projects I have worked on for the last year or so. One thing I often wonder is why only some components support the className prop and others don’t?
Also why are selected checkboxes and radio buttons green instead of blue? Other than the DHIS2 UI I use Antd or Mui.

Thanks,
Pete

4 Likes

Hey Pete!

Thanks for your response :slight_smile: sounds like you have a good amount of experience with the UI library! These are the follow-up questions we have for you that German alluded to:

Have you encountered a a scenario where you needed to access a DOM element underlying a UI component? If so,

  1. What did you need to do and why?
  2. Was there a workaround?

Thanks for helping us figure out the needs of the UI library :blush::pray:

As for your questions:

  1. My guess is that the components missing the className prop are an oversight, but a few might be such minor components they weren’t supported. I’ve made a list of them, and I’ll bring it up to the other UI maintainers! :slight_smile:
  2. The color choice for checkboxes may be best answered by designer @joecooper, but my hypothesis is that the green indicates an “affirmative” or “valid” selection whereas blue would be more neutral. Here are some comments on colors from the DHIS2 design system documentation

Happy New Year! :partying_face:

4 Likes

Generally I am extending the functionality of an existing UI component, for example using adding an actions menu to the data table, or creating a menu with submenu navigation sidebar



Or tweaking the styles slightly on existing components based on the design files I have been given.

2 Likes

Great, thanks for the response! Those are good-looking UI elements.

Did you accomplish those things by creating custom MenuItem and DataTableCell components? Did you have to make any of them from scratch, maybe copying in code from the UI codebase, or were you able to compose some existing UI components?

1 Like

Glad you think so thanks! For the menu with sub menus I just used the Menu and MenuItem components, but added a class for the submenu menu items so they appear differently.

For the table with actions I used the existing DataTable component and the Layer, Popper and FlyoutMenu to implement the action menu. In this case I needed the custom styles to change the row appearance based on the status of the action and for adapting the existing Menu component to make it smaller to fit the designs I was given.

2 Likes

Hello

I use the @dhis2/ui library for all DHIS2 related projects, along with the app-platform and app-runtime. Thank you for the amazing libraries! :pray:t5:

As for accessing underlying DOM elements, It normally depends on the intention. To create custom styles I normally use the recommended way to pass a className to the component. The major issue with this is that sometimes the intended element is deeply nested within the component (an example is the DataTableColumnHeader component). I normally use the > CSS selector to get to the element as a workaround to this issue.

I have also had times I need to access the component’s ref for various purposes. I was successful with the DataTable component. I have not tried other components.

Thanks,
Nnko, Gift

2 Likes