Semantic-Org/Semantic-UI-React

feat(Dropdown): support MenuItem and Button types

Open

#642 opened on Oct 6, 2016

View on GitHub
 (14 comments) (0 reactions) (0 assignees)JavaScript (13,136 stars) (4,065 forks)batch import
enhancementgood first issuehelp wanted

Description

Steps

I'm using a Dropdown as Menu.Item and noticed that the width of the menu item seems off. I checked the Semantic-UI docs (3rd example) and they are using an additional icon class for the menu item if the Dropdown only contains an Icon.

Expected

class="ui dropdown icon item"

Result

class="ui dropdown item"

Workaround

adding className='icon'as additional Dropdownprop

Testcase

http://codepen.io/Chlris-R3/pen/PGQbqZ

  • left: without icon class
  • right: using className='icon' as additional Dropdownprop

Is this a bug / missing feature / working as intended?

Contributor guide

Tech stack
reactjavascriptcss
Domain
frontend
Issue type
feature
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
2
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
under 1 hour
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
stale
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
ReactSemantic UI React componentsJSX
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
70
Research direction
The issue requests that when a Dropdown is used as a Menu.Item, the component should automatically add the 'icon' class. Inspect the Dropdown component (likely in src/modules/Dropdown/Dropdown.js) and the Menu.Item component (src/collections/Menu/MenuItem.js) to understand how className is constructed. The fix likely involves checking if the Dropdown contains only an Icon and adding the 'icon' className accordingly, similar to Semantic UI's behavior.