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

[web] Improve Section component (former Category) #332

Merged
merged 8 commits into from
Nov 25, 2022

Conversation

dgdavid
Copy link
Contributor

@dgdavid dgdavid commented Nov 23, 2022

Problem

The Category component needs some improvements now that we have pages too, not only the overview.

Solution

To change a bit the component for fulfilling current needs.

Starting with a rename, the Section component now allows

  • To be used without icon (maybe useful for a settings pages with a lot of sections)
  • To specify a description for helping the user to understand what is the section about
  • To include a visual separation between its title and the rest of its content
  • To put an action right after the title, usually for opening a settings popup or similar.
  • To change the icon for mentioned action (a cog by default)
  • To include a tooltip to be shown when user hovering the section action

Screenshots

Below, see a few examples by using just fake sections

Not displaying the tooltip Displaying the tooltip
Screenshot from 2022-11-25 01-19-41 Screenshot from 2022-11-25 01-19-38

Related to #321

@dgdavid dgdavid changed the title WIP [web] Improve Section component (former Category) Nov 24, 2022
@coveralls
Copy link

coveralls commented Nov 24, 2022

Coverage Status

Coverage increased (+0.1%) to 74.696% when pulling 6012248 on improve-section-component into 49e6a2a on master.

Because it does not play well with all kind of icons :(
Which helped out to improve how icons are handled and rendered.
@dgdavid dgdavid marked this pull request as ready for review November 25, 2022 13:38
Copy link
Contributor

@joseivanlopez joseivanlopez left a comment

Choose a reason for hiding this comment

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

LGTM

As discussed offline, it would be better to use composition instead of passing props, for example:

<Section>
  <SectionAction />
</section>

And the same for the Fieldset created in #333:

<Fieldset>
  <Legend />
</Fieldset>

Agreed to change it in a refact PR.

@dgdavid dgdavid merged commit 549f914 into master Nov 25, 2022
@dgdavid dgdavid deleted the improve-section-component branch November 25, 2022 14:34
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.

4 participants