From 0b6ea4c0ef818d7cce2cffd71442e393f0c9baaf Mon Sep 17 00:00:00 2001 From: Jess <53754871+jessover9000@users.noreply.github.com> Date: Thu, 3 Sep 2020 09:08:09 +0200 Subject: [PATCH] Storybook: Add docs to Cascader (#27336) * Storybook: Add docs to Cascader Added description for cascader component * Update packages/grafana-ui/src/components/Cascader/Cascader.mdx Co-authored-by: Alex Khomenko Co-authored-by: Alex Khomenko --- .../grafana-ui/src/components/Cascader/Cascader.mdx | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/packages/grafana-ui/src/components/Cascader/Cascader.mdx b/packages/grafana-ui/src/components/Cascader/Cascader.mdx index 3410735ebbf..de980a3da5d 100644 --- a/packages/grafana-ui/src/components/Cascader/Cascader.mdx +++ b/packages/grafana-ui/src/components/Cascader/Cascader.mdx @@ -1,8 +1,12 @@ import { Meta, Story, Preview, Props } from '@storybook/addon-docs/blocks'; import { Cascader } from './Cascader'; -# Cascader with search - - \ No newline at end of file +# Cascader + +The cascader component is a `Select` with a cascading flyout menu. When you have lots of options in your select, they can be hard to navigate from a regular dropdown list. In that case you can use the cascader to organize your options into groups hierarchically. Just like in the `Select` component, the cascader input doubles as a search field to quickly jump to a selection without navigating the list. + +You can either use the `Simple` cascader component for an empty input as default state or use the `initialValue` or `allowCustomValue` fields to pre-fill your cascader. Initial value means that one of the options from your cascaded list is pre-selected. Custom value means that apart from existing options from the list, your users can add custom values to the list by typing them in the `Select` input. + +