gdotdesign/elm-ui

Chooser custom text for "No items to display!"

michie1 opened this issue · 4 comments

michie1 commented

As a programmer that's using the elm-ui chooser, I would like to set the text for when there are no items to display or to select.
no items
In above picture I would like to set the text to "No movies to select."

I would be nice if it was possible to change this text the same way as the placeholder text can be changed.

The value of the string is now hard coded in Styles/Chooser.elm on line 115.

Before trying to create a pull request for this I would like to known if someone is already busy with this feature, are there any tips how to implement this and if this feature is a good idea in general.

gdotdesign commented

Hey, thanks for bringing up this issue:

  • I think this feature it's a good idea, it's something I was meaning to do at some point
  • There is no indication for that anybody working on this, it would be great if you could do it 👍
  • I suggest changing the implementation from a :before pseudo element to an actual HTML tag
  • The field in the record could be emptyContent : Html.Html msg
michie1 commented

I've got a first commit, but I think it's too soon for a pull request.
michie1@3807426ab14b97e14953e6affe1547a4f53ab241`

  • Why do you want emptyContent to be Html.Html msg and not String?
  • I'm passing now the value from emptyContent to the style/theme, but I prefer to put the html of this part in the view and not in the style, somehow. Similar to placeholder, it's value is also not needed in the theme.
gdotdesign commented

Why do you want emptyContent to be Html.Html msg and not String?

  • There is the use case here that comes up often enough. If there are no items in the chooser or the user searches for something that is not there then it's good practice to display a button or some kind of call to action to add a new item or the one the user searched for, which requires some custom Html.
  • It would make it easier for people to style the message differently (use bold for some words or add a line break in some specific position)

I'm passing now the value from emptyContent to the style/theme, but I prefer to put the html of this part in the view and not in the style, somehow. Similar to placeholder, it's value is also not needed in the theme.

I agree with this and it's in sync with the first point above. The best place to do that would be here: https://github.com/gdotdesign/elm-ui/blob/development/source/Ui/Chooser.elm#L309 with a node "ui-chooser-empty-content"