Skip to content
This repository was archived by the owner on Nov 6, 2020. It is now read-only.

feat: extract and expose MenuList from Menu component - #297

Merged
varl merged 2 commits into
masterfrom
MenuList
Jun 21, 2019
Merged

feat: extract and expose MenuList from Menu component#297
varl merged 2 commits into
masterfrom
MenuList

Conversation

@Mohammer5

Copy link
Copy Markdown
Contributor

No description provided.

@varl varl changed the title refactor: extract MenuList from Menu component feat: extract MenuList from Menu component Jun 19, 2019
@varl varl changed the title feat: extract MenuList from Menu component feat: extract and expose MenuList from Menu component Jun 19, 2019
Comment thread src/Menu/index.js Outdated
position: relative;
width: 100%;
margin: 0;
<div>

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Should the className be added to the div or the MenuList? 🤔

@HendrikThePendric

Copy link
Copy Markdown
Contributor

I feel like atm we have one too many layer here, for example:
DropMenu>Menu>MenuList>MenuItems

I guess the reasoning can be summarised like this:

  1. DropMenu renders the menu in a Pop
  2. Menu wraps the MenuList in a Card
  3. MenuList ensures the correct list layout is guaranteed
  4. MenuItem speaks for itself

Personally I would prefer it if:

  1. The DropMenu wraps the Menu in a Card & renders everything in a Pop
  2. Menu is removed, or MenuList is removed and its logic is moved to Menu

I think this many layers will just cause confusion.

Also, in the current implementation what menu does is just render a Card with padding. So the component-name doesn't match what the component does.

@varl

varl commented Jun 19, 2019

Copy link
Copy Markdown
Contributor

It's not a given that the DropMenu should include a Card though, and the design-system has a card-like wrapper around the Menu.

@Mohammer5

Copy link
Copy Markdown
Contributor Author

@HendrikThePendric

So the component-name doesn't match what the component does.

It matches the name of the design system (https://github.com/dhis2/design-system/blob/master/atoms/menu.md)

Which should probably answer all the other questions as well

@HendrikThePendric

HendrikThePendric commented Jun 19, 2019

Copy link
Copy Markdown
Contributor

I'm still under the impression we are adding layers of fluff here, and that this implementation of Menu does not match the design system:

... A menu provides user access to options that are available when clicking the menu toggle. ...

... Menu items are options or actions contained inside a menu. ...

So according to the design system the Menu is the List

@HendrikThePendric

Copy link
Copy Markdown
Contributor

Anyway, if you both feel strongly about going this, way: go for it. I will disagree and commit.

@varl

varl commented Jun 19, 2019

Copy link
Copy Markdown
Contributor

Anyway, if you both feel strongly about going this, way: go for it. I will disagree and commit.

The strongest feeling I have to this is backwards compatibility. I don't think changing the Menu is important enough to warrant a breaking change version bump.

Other than that, what is driving this change is that the Menu currently does too much, so what we are doing is pulling out the list into its own component so it can be re-used instead of duplicated.

Any user that is using the Menu today can keep doing what they were doing with just Menu>MenuItem.

This just allows us to use the MenuList so that in certain scenarios we can do MenuList>MenuItem as well. Since the MenuList is an ul I think this is OK for now.

It would be nice to avoid two extra divs in this PR though. Not sure if i prefer extra divs or a resolved class name passed to MenuList. 🤔

@HendrikThePendric

Copy link
Copy Markdown
Contributor

Fair enough. OK. 👍

I would also like to see some prop validation here, so that the MenuList children should always be a single, or an array of MenuItem component instances.

Comment thread src/MenuList/index.js

MenuList.propTypes = {
className: propTypes.string,
children: propTypes.any.isRequired,

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

only accept instance(s) of MenuItem?

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

That would be a breaking change.

@varl
varl merged commit 4d576af into master Jun 21, 2019
@varl
varl deleted the MenuList branch June 21, 2019 07:46
dhis2-bot pushed a commit that referenced this pull request Jun 21, 2019
# [3.4.0](dhis2/ui@v3.3.0...v3.4.0) (2019-06-21)

### Features

* extract and expose MenuList from Menu component ([#297](dhis2/ui#297)) ([4d576af](dhis2/ui@4d576af))
@dhis2-bot

Copy link
Copy Markdown
Contributor

🎉 This PR is included in version 3.4.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants