Semantic-ui-react: Dropdown multiple selection enhancement: allow customisation of selected items

[shokkobon]

I'm using the Dropdown component with multiple selection enabled.
I can customise the items shown in the dropdown list by adding
the style property to the options items.
{ text: 'Name', value: 55, style: { color: 'red' }}

Once this item is selected the style will not be reflected in the
selected item.

There should be a way we could customise the selected item.

[levithomason]

The items and active items are different components (DropdownItem vs Label). This is why the style is not transferred from one to the other.

This sounds like it belongs to theming. Where you can specify some custom CSS for Labels in a multiple Dropdown. This is preferred so that your CSS is inline with the theme's variables.

We do have a renderLabels function that renders all active items as Label components. If there are more requests for this feature, I'll consider extending that to allow customizing the Label component and passing props props.

If you don't want to setup a theme, you can still do this with regular css overrides:

.ui.multiple.dropdown .ui.label {
  color: red;
}

[shokkobon]

@levithomason
I believe the use case could be a bit different. A user would probably
want to style _some_ items differently like so:

[
  { 
     text: 'AnOptionThatsQuiteSafe', 
     value: 7, 
     style: { color: 'green' }
   },
  { 
     text: 'CouldEndInUnforeseenConsequences', 
     value: 6, 
     style: { color: 'red' }
  },
]

These items would render differently in the dropdown, but once selected they would all be rendered with the same gray label.
These items would 'lose' some of the information connected to them.
By using theming we would of course style all labels red.

[levithomason]

Since the items and labels (active items) are different components, I don't think it makes sense to pass any of the item props to the labels.

Though, we could add something like an activeItemRenderer prop callback. It would be called with each active item object and expect you to return a Label. This would allow customizing each label differently.

If we get more requests for this I'll accept a PR to implement it. Currently, I get the impression it is an edge case.

[shokkobon]

Somewhat related to this issue, rendering additional components is not possible with our items
in dropdowns?
The SUI example http://semantic-ui.com/modules/dropdown.html heading Multiple Search Selection example with Countries (not States) has items with flags of countries rendered with each item. These flags also render inside the labels (active items).

[jeffcarbs]

Looking at the semantic-ui CSS, it appears results can have sub-components:

/*--------------
   Sub Elements
---------------*/

/* Icons / Flags / Labels / Image */
.ui.dropdown > .text > .icon,
.ui.dropdown > .text > .label,
.ui.dropdown > .text > .flag,
.ui.dropdown > .text > img,
.ui.dropdown > .text > .image {
  margin-top: @textLineHeightOffset;
}

Also:

/*-----------------
  Item Description
-------------------*/

.ui.dropdown > .text > .description,
.ui.dropdown .menu > .item > .description {
  float: @itemDescriptionFloat;
  margin: @itemDescriptionMargin;
  color: @itemDescriptionColor;
}

I'll open a new issue to capture this enhancement. At least in the flag example, those sub-elements also show up in the label within multi-select, but I could see just rendering them as-is right now (just text).

@shokkobon - For now, you can specify a custom component via the as prop as pass custom data to it. Here's an example:

import React from 'react'
import { Dropdown, Flag } from 'stardust'

const CustomComponent = ({ customData, ...props }) => (
  <div {...props}>
    <Flag name={customData.flag} />
    {customData.name}
  </div>
)

const options = [
  { text: 'English', value: 'English', as: CustomComponent,
    customData: {
      name: 'English',
      flag: 'united states',
    },
  },
  { text: 'French', value: 'French', as: CustomComponent,
    customData: {
      name: 'French',
      flag: 'france',
    },
  },
  { text: 'Spanish', value: 'Spanish', as: CustomComponent,
    customData: {
      name: 'Spanish',
      flag: 'spain',
    },
  },
  { text: 'German', value: 'German', as: CustomComponent,
    customData: {
      name: 'German',
      flag: 'germany',
    },
  },
  { text: 'Chinese', value: 'Chinese', as: CustomComponent,
    customData: {
      name: 'Chinese',
      flag: 'china',
    },
  },
]

const DropdownAugmentedComponentExample = () => (
  <Dropdown placeholder='Language' options={options} header='Select a language' />
)

export default DropdownAugmentedComponentExample

Produces:

@levithomason - might be worth adding some documentation on how to use "augmented components". This could be an example.

[levithomason]

Yes, I was just thinking this last night. The Dropdown docs are lacking. We should add all examples from the SUI docs that we support.