Update Storybook documentation for RadioButtonGroup and RadioButtonList with usage guidance (#110291)

* Update the Storybook docs for RadioButtonList where it was incorrectly referencing RadioButtonGroup in code examples

* Update the Storybook docs for RadioButtonList and RadioButtonGroup with more useful guidance for usage

* Refine the Storybook docs for RadioButtonGroup

packages/grafana-ui/src/components/Forms/RadioButtonGroup/RadioButtonGroup.mdx

@@ -5,13 +5,20 @@ import { RadioButtonGroup } from './RadioButtonGroup';
 
 # RadioButtonGroup
 
-`RadioButtonGroup` is used to select a single value from multiple mutually exclusive options.
+`RadioButtonGroup` is used to select a single value from a set of mutually-exclusive options, arranged in a _horizontal_ control.
 
 ### When to use
 
-Use `RadioButtonGroup` for mutually exclusive selections if there are up to four options available. This is because the `RadioButtonGroup` cannot have more than one row and should still accommodate small resolutions. For a mutually exclusive selection of more than four options, use `Select` component.
+- When you have up to four _mutually-exclusive_ options; if you’re only displaying icons you may be able to safely display more options, but be mindful of space constraints and not overwhelm the end user with options.
+- When you are more constrained by vertical than horizontal space
 
-Radio buttons can only exist in this type of group. If you want one single option, it's better to use `Switch` instead. To offer multiple choices within the same group or context which are not mutually exclusive, use `Checkbox` instead.
+### When not to use
+
+- When you are constrained by horizontal space
+- When you want to toggle between the two states of a boolean; use [Switch](?path=/docs/inputs-switch--docs) instead
+- When you have more than four options; consider using a [RadioButtonList](?path=/docs/inputs-radiobuttonlist--docs) or [Combobox](?path=/docs/inputs-combobox--docs) instead
+- When you have _mutually-inclusive_ options; use [Checkboxes](https://developers.grafana.com/ui/latest/index.html?path=/story/inputs-checkbox--stacked-list) instead
+- When you need a navigation device for updating the UI based on the selected option; use [Tabs](?path=/docs/navigation-tabs--docs) instead
 
 ### Usage
 

packages/grafana-ui/src/components/Forms/RadioButtonList/RadioButtonList.mdx

@@ -5,23 +5,27 @@ import { RadioButtonList } from './RadioButtonList';
 
 # RadioButtonList
 
-`RadioButtonList` is used to select a single value from multiple mutually exclusive options usually in a vertical manner.
+`RadioButtonList` is used to select a single value from a set of mutually-exclusive options, arranged in a _vertical_ list.
 
 ## When to use
 
-Use `RadioButtonList` for mutually exclusive selections.
-Contrary to the [RadioButtonGroup](?path=/docs/forms-radiobuttongroup--radio-buttons) component, `RadioButtonList` can contain more than four options because by default it lays out the items vertically.
+- When you have four or more _mutually-exclusive_ options
+- When the user needs to see all the available options without first interacting to expand the list
+- When you have a smaller number of options, _but_ their individual label length is too long for a [RadioButtonGroup](?path=/docs/forms-radiobuttongroup--radio-buttons)
 
-This component should be used instead of [Select](?path=/docs/forms-select--basic) when there is a need for the user to see all of the options available without clicking and scrolling the dropdown.
+## When not to use
+
+- When you have too many options to show without causing excessive scrolling; consider using a [Combobox](?path=/docs/inputs-combobox--docs)
+- When you have _mutually-inclusive_ options; consider using a stacked list of [Checkboxes](https://developers.grafana.com/ui/latest/index.html?path=/story/inputs-checkbox--stacked-list)
 
 ## Usage
 
-### Basic radio group
+### Basic radio list
 
 ```jsx
 import { RadioButtonList } from '@grafana/ui';
 
-<RadioButtonGroup options={...} value={...} onChange={...} />
+<RadioButtonList options={...} value={...} onChange={...} />
 
 ```
 
@@ -43,7 +47,7 @@ const options = [
 const disabledOptions = ['prometheus', 'elastic'];
 
 
-<RadioButtonGroup
+<RadioButtonList
   options={options}
   disabledOptions={disabledOptions}
   value={...}
@@ -67,7 +71,7 @@ const options = [
 const disabledOptions = ['prometheus', 'elastic'];
 
 
-<RadioButtonGroup
+<RadioButtonList
   options={options}
   disabledOptions={disabledOptions}
   value={...}
@@ -82,7 +86,7 @@ The `RadioButtonList` layout uses CSS Grid, so it is effortless to split the lis
 ```jsx
 import { RadioButtonList } from '@grafana/ui';
 
-<RadioButtonGroup
+<RadioButtonList
   options={...}
   value={...}
   onChange={...}