appbaseio / appbaseio/playground

Playground UI/Ux Issues

Open
#32 2 comments 0 reactions 1 assignee Claimed by @divyanshu013 View on GitHub
Dominant language
JavaScript
Stars
46
Forks
17
PR merge metrics
No merged PRs in 30d

Description

Porting from https://github.com/appbaseio/reactivesearch/issues/148.

**I'm submitting a ...**

- [ ] bug report
- [ ] feature request
- [x] other

Related to UI/Ux of playground stories.

- [x] [RangeSlider and DynamicRangeSlider story](https://opensource.appbase.io/playground/?knob-title=Cars&knob-filterLabel=Cars%20filter&knob-defaultSelected%5B0%5D=Auckland&knob-rangeLabels=%7B%22start%22%3A%22Low%22%2C%22end%22%3A%22High%22%7D&knob-componentStyle=%7B%22paddingBottom%22%3A%2210px%22%7D&knob-URLParams%20%28not%20visible%20on%20storybook%29=false&knob-showFilter=true&knob-showIcon=false&knob-stepValue=1&knob-showHistogram=true&knob-dataLabel=%E2%98%85%20%20A%20customizable%20UI%20widget%20%E2%98%85&knob-showSlider=false&knob-size=100&knob-iconPosition=left&knob-visible=true&knob-showCount=true&knob-interval=1&knob-multiSelect=true&selectedKind=search%2FDynamicRangeSlider&selectedStory=Basic&full=0&down=1&left=1&panelRight=0&downPanel=storybooks%2Fstorybook-addon-knobs): Use a different dataset or different field where histogram has an interesting distribution of values.
- [x] ReactiveList uses a really bland UI.
- [x] [With customIcon story](https://opensource.appbase.io/playground/?knob-title=Cities&knob-filterLabel=Cars%20filter&knob-defaultSelected=Auckland&knob-rangeLabels=%7B%22start%22%3A%22Low%22%2C%22end%22%3A%22High%22%7D&knob-componentStyle=%7B%22paddingBottom%22%3A%2210px%22%7D&knob-URLParams%20%28not%20visible%20on%20storybook%29=false&knob-showFilter=true&knob-showIcon=false&knob-stepValue=1&knob-showHistogram=true&knob-dataLabel=%E2%98%85%20%20A%20customizable%20UI%20widget%20%E2%98%85&knob-showSlider=false&knob-size=100&knob-iconPosition=left&knob-visible=true&knob-showCount=false&knob-interval=1&knob-multiSelect=true&selectedKind=search%2FCategorySearch&selectedStory=with%20custom%20icon&full=0&down=1&left=1&panelRight=0&downPanel=storybooks%2Fstorybook-addon-knobs): Use a car icon here.
- [x] [autosuggest should have no camel cases](https://opensource.appbase.io/playground/?knob-title=Cities&knob-weights%5B0%5D=1&knob-weights%5B1%5D=3&knob-filterLabel=Cars%20filter&knob-defaultSelected=nissan&knob-rangeLabels=%7B%22start%22%3A%22Low%22%2C%22end%22%3A%22High%22%7D&knob-queryFormat=and&knob-componentStyle=%7B%22paddingBottom%22%3A%2210px%22%7D&knob-URLParams%20%28not%20visible%20on%20storybook%29=false&knob-showFilter=true&knob-showIcon=false&knob-stepValue=1&knob-showHistogram=true&knob-dataLabel=%E2%98%85%20%20A%20customizable%20UI%20widget%20%E2%98%85&knob-showSlider=false&knob-size=100&knob-iconPosition=left&knob-fuzziness=1&knob-visible=true&knob-showCount=false&knob-interval=1&knob-highlight=true&knob-autoSuggest=false&knob-multiSelect=true&selectedKind=search%2FCategorySearch&selectedStory=Without%20autoSuggest&full=0&down=1&left=1&panelRight=0&downPanel=storybooks%2Fstorybook-addon-knobs) ![](https://i.imgur.com/tOwiW9s.png)
- [x] [MultiDropdownRange: Filter shows on the right side panel](https://opensource.appbase.io/playground/?knob-title=SingleDropdownRange%3A%20Price%20Filter&knob-data=%7B%22label%22%3A%22Car%20Ratings%22%2C%22start%22%3A2%2C%22end%22%3A5%7D&knob-weights%5B0%5D=1&knob-weights%5B1%5D=3&knob-filterLabel=Price&knob-defaultSelected%5B0%5D=Cheap&knob-defaultSelected%5B1%5D=Moderate&knob-rangeLabels=%7B%22start%22%3A%22Low%22%2C%22end%22%3A%22High%22%7D&knob-labelPosition=right&knob-selectAllLabel=All%20Cities&knob-queryFormat=and&knob-componentStyle=%7B%22paddingBottom%22%3A%2210px%22%7D&knob-URLParams%20%28not%20visible%20on%20storybook%29=false&knob-showFilter=true&knob-sortBy=asc&knob-showIcon=false&knob-showResultStats=false&knob-stepValue=1&knob-showHistogram=true&knob-dataLabel=%E2%98%85%20%20A%20customizable%20UI%20widget%20%E2%98%85&knob-showSlider=false&knob-showCheckbox=true&knob-fieldWeights%5B0%5D=1&knob-fieldWeights%5B1%5D=3&knob-size=10&knob-iconPosition=right&knob-fuzziness=1&knob-visible=true&knob-showCount=false&knob-placeholder=Search%20prices&knob-interval=1&knob-showSearch=false&knob-highlightField=name&knob-highlight=false&knob-autoSuggest=true&knob-multiSelect=true&selectedKind=search%2FMultiDropdownRange&selectedStory=With%20filter&full=0&down=1&left=1&panelRight=0&downPanel=storybooks%2Fstorybook-addon-knobs): It should show above the filter component
- [x] [DataPicker](https://opensource.appbase.io/playground/?knob-focused=true&knob-title=Date%20Picker&knob-data=%7B%22label%22%3A%22Car%20Ratings%22%2C%22start%22%3A2%2C%22end%22%3A5%7D&knob-weights%5B0%5D=1&knob-weights%5B1%5D=3&knob-filterLabel=Date&knob-defaultSelected=2017-04-07&knob-rangeLabels=%7B%22start%22%3A%22Low%22%2C%22end%22%3A%22High%22%7D&knob-labelPosition=right&knob-selectAllLabel=All%20Cities&knob-queryFormat=epoch_millis&knob-numberOfMonths=2&knob-componentStyle=%7B%22paddingBottom%22%3A%2210px%22%7D&knob-URLParams%20%28not%20visible%20on%20storybook%29=false&knob-showFilter=true&knob-sortBy=asc&knob-showIcon=false&knob-showResultStats=false&knob-stepValue=1&knob-showHistogram=true&knob-dataLabel=%E2%98%85%20%20A%20customizable%20UI%20widget%20%E2%98%85&knob-showSlider=false&knob-showCheckbox=true&knob-fieldWeights%5B0%5D=1&knob-fieldWeights%5B1%5D=3&knob-size=10&knob-dayPickerInputProps=%7B%22clickUnselectsDay%22%3Atrue%7D&knob-iconPosition=right&knob-fuzziness=1&knob-visible=true&knob-showCount=false&knob-placeholder=Pick%20date&knob-interval=1&knob-showSearch=false&knob-highlightField=name&knob-highlight=false&knob-autoSuggest=true&knob-multiSelect=true&selectedKind=search%2FDatePicker&selectedStory=Playground&full=0&down=1&left=1&panelRight=0&downPanel=storybooks%2Fstorybook-addon-knobs) is missing a story for selecting an initial month.
- [x] Set maxWidth / outer container to make the story components look good.
- [ ] RangeSlider show native tooltip on slider handles (add in library)

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.