Docs: generated a 7.0 version of the packages reference docs. (#24708)

* fixes so we match the transformer based on name properly.

* changed the signature on the FieldMatcher.

* introduced a names option so you can filter in name specificly.

* changed so the matcher UI uses the new options format.

* moved the exported functions together.

* changing editors a bit.

* made the filter by name work with both regex and name filtering.

* fixed failing tests and make sure we always parse regex the same way.

* removed unused code.

* simplified to make the existing field overrides still working.

* fixed issue reported by hugo.

* added tests for the name matcher.

* added tests for filter by name.

* added more tests.

* generated new version of the packages docs.

* fixed spelling error.

* regenerated the docs.

docs/sources/packages_api/ui/_index.md

@@ -97,12 +97,13 @@ A library containing the different design components of the Grafana ecosystem.
 |  [stylesFactory(stylesCreator)](./stylesfactory/) | Creates memoized version of styles creator |
 |  [SuggestionsPlugin({ onTypeahead, cleanText, onWillApplySuggestion, portalOrigin, })](./suggestionsplugin/) |  |
 |  [useTheme()](./usetheme/) |  |
-|  [ValuePicker({ label, icon, options, onChange, variant, size, isFullWidth, })](./valuepicker/) |  |
+|  [ValuePicker({ label, icon, options, onChange, variant, size, isFullWidth, menuPlacement, })](./valuepicker/) |  |
 
 ## Interfaces
 
 |  Interface | Description |
 |  --- | --- |
+|  [BadgeProps](./badgeprops/) |  |
 |  [BigValueSparkline](./bigvaluesparkline/) |  |
 |  [CascaderOption](./cascaderoption/) |  |
 |  [CompletionItem](./completionitem/) |  |
@@ -142,6 +143,7 @@ A library containing the different design components of the Grafana ecosystem.
 |  [Alert](./alert/) |  |
 |  [ALERTING\_COLOR](./alerting_color/) |  |
 |  [AlphaNotice](./alphanotice/) |  |
+|  [Badge](./badge/) |  |
 |  [Button](./button/) |  |
 |  [ButtonCascader](./buttoncascader/) |  |
 |  [CallToActionCard](./calltoactioncard/) |  |
@@ -165,10 +167,11 @@ A library containing the different design components of the Grafana ecosystem.
 |  [Drawer](./drawer/) |  |
 |  [EmptySearchResult](./emptysearchresult/) |  |
 |  [ErrorWithStack](./errorwithstack/) |  |
+|  [FeatureInfoBox](./featureinfobox/) |  |
 |  [Field](./field/) |  |
 |  [FieldConfigItemHeaderTitle](./fieldconfigitemheadertitle/) |  |
 |  [fieldMatchersUI](./fieldmatchersui/) |  |
-|  [Forms](./forms/) |  |
+|  [FilterPill](./filterpill/) |  |
 |  [FullWidthButtonContainer](./fullwidthbuttoncontainer/) |  |
 |  [getAvailableIcons](./getavailableicons/) |  |
 |  [getButtonStyles](./getbuttonstyles/) |  |
@@ -176,12 +179,11 @@ A library containing the different design components of the Grafana ecosystem.
 |  [getLogRowStyles](./getlogrowstyles/) |  |
 |  [getStandardFieldConfigs](./getstandardfieldconfigs/) | Returns collection of common field config properties definitions |
 |  [getStandardOptionEditors](./getstandardoptioneditors/) | Returns collection of standard option editors definitions |
-|  [getStandardTransformers](./getstandardtransformers/) |  |
 |  [getTheme](./gettheme/) |  |
 |  [GraphContextMenu](./graphcontextmenu/) |  |
 |  [GraphLegend](./graphlegend/) |  |
+|  [graphTickFormatter](./graphtickformatter/) |  |
 |  [graphTimeFormat](./graphtimeformat/) |  |
-|  [graphTimeFormatter](./graphtimeformatter/) |  |
 |  [GraphWithLegend](./graphwithlegend/) |  |
 |  [hasValidationEvent](./hasvalidationevent/) |  |
 |  [HorizontalGroup](./horizontalgroup/) |  |
@@ -244,6 +246,7 @@ A library containing the different design components of the Grafana ecosystem.
 |  [TimeRangePicker](./timerangepicker/) |  |
 |  [ToggleButton](./togglebutton/) |  |
 |  [Tooltip](./tooltip/) |  |
+|  [useStyles](./usestyles/) | Hook for using memoized styles with access to the theme. |
 |  [validate](./validate/) |  |
 |  [VerticalGroup](./verticalgroup/) |  |
 |  [withTheme](./withtheme/) |  |
@@ -253,6 +256,7 @@ A library containing the different design components of the Grafana ecosystem.
 |  Type Alias | Description |
 |  --- | --- |
 |  [AlertVariant](./alertvariant/) |  |
+|  [BadgeColor](./badgecolor/) |  |
 |  [ButtonProps](./buttonprops/) |  |
 |  [ButtonVariant](./buttonvariant/) |  |
 |  [FormAPI](./formapi/) |  |

docs/sources/packages_api/ui/badge.md

@@ -2,22 +2,22 @@
 # -----------------------------------------------------------------------
 # Do not edit this file. It is automatically generated by API Documenter.
 # -----------------------------------------------------------------------
-title = "getStandardTransformers"
+title = "Badge"
 keywords = ["grafana","documentation","sdk","@grafana/ui"]
 type = "docs"
 +++
 
-## getStandardTransformers variable
+## Badge variable
 
-### getStandardTransformers variable
+### Badge variable
 
 <b>Signature</b>
 
 ```typescript
-getStandardTransformers: () => TransformerRegistyItem<any>[]
+Badge: React.NamedExoticComponent<BadgeProps>
 ```
 <b>Import</b>
 
 ```typescript
-import { getStandardTransformers } from '@grafana/ui';
+import { Badge } from '@grafana/ui';
 ```

docs/sources/packages_api/ui/badgecolor.md

@@ -2,22 +2,22 @@
 # -----------------------------------------------------------------------
 # Do not edit this file. It is automatically generated by API Documenter.
 # -----------------------------------------------------------------------
-title = "graphTimeFormatter"
+title = "BadgeColor"
 keywords = ["grafana","documentation","sdk","@grafana/ui"]
 type = "docs"
 +++
 
-## graphTimeFormatter variable
+## BadgeColor type
 
-### graphTimeFormatter variable
+### BadgeColor type
 
 <b>Signature</b>
 
 ```typescript
-graphTimeFormatter: (timeZone?: string | undefined) => (epoch: number, format: string) => string
+export declare type BadgeColor = 'blue' | 'red' | 'green' | 'orange' | 'purple';
 ```
 <b>Import</b>
 
 ```typescript
-import { graphTimeFormatter } from '@grafana/ui';
+import { BadgeColor } from '@grafana/ui';
 ```

docs/sources/packages_api/ui/badgeprops.md

@@ -0,0 +1,61 @@
++++
+# -----------------------------------------------------------------------
+# Do not edit this file. It is automatically generated by API Documenter.
+# -----------------------------------------------------------------------
+title = "BadgeProps"
+keywords = ["grafana","documentation","sdk","@grafana/ui"]
+type = "docs"
++++
+
+## BadgeProps interface
+
+<b>Signature</b>
+
+```typescript
+export interface BadgeProps 
+```
+<b>Import</b>
+
+```typescript
+import { BadgeProps } from '@grafana/ui';
+```
+<b>Properties</b>
+
+|  Property | Type | Description |
+|  --- | --- | --- |
+|  [color](#color-property) | <code>BadgeColor</code> |  |
+|  [icon](#icon-property) | <code>IconName</code> |  |
+|  [text](#text-property) | <code>string</code> |  |
+|  [tooltip](#tooltip-property) | <code>string</code> |  |
+
+### color property
+
+<b>Signature</b>
+
+```typescript
+color: BadgeColor;
+```
+
+### icon property
+
+<b>Signature</b>
+
+```typescript
+icon?: IconName;
+```
+
+### text property
+
+<b>Signature</b>
+
+```typescript
+text: string;
+```
+
+### tooltip property
+
+<b>Signature</b>
+
+```typescript
+tooltip?: string;
+```

docs/sources/packages_api/ui/colorpicker.md

@@ -16,7 +16,7 @@ type = "docs"
 ```typescript
 ColorPicker: React.FunctionComponent<Pick<import("./ColorPickerPopover").Props<import("./ColorPickerPopover").CustomPickersDescriptor> & {
     children?: ColorPickerTriggerRenderer | undefined;
-}, "onChange" | "color" | "children" | "customPickers" | "onColorChange" | "enableNamedColors" | "updatePopperPosition">>
+}, "onChange" | "color" | "children" | "onColorChange" | "enableNamedColors" | "customPickers" | "updatePopperPosition">>
 ```
 <b>Import</b>
 

docs/sources/packages_api/ui/featureinfobox.md

@@ -0,0 +1,23 @@
++++
+# -----------------------------------------------------------------------
+# Do not edit this file. It is automatically generated by API Documenter.
+# -----------------------------------------------------------------------
+title = "FeatureInfoBox"
+keywords = ["grafana","documentation","sdk","@grafana/ui"]
+type = "docs"
++++
+
+## FeatureInfoBox variable
+
+### FeatureInfoBox variable
+
+<b>Signature</b>
+
+```typescript
+FeatureInfoBox: React.MemoExoticComponent<React.ForwardRefExoticComponent<FeatureInfoBox & React.RefAttributes<HTMLDivElement>>>
+```
+<b>Import</b>
+
+```typescript
+import { FeatureInfoBox } from '@grafana/ui';
+```

docs/sources/packages_api/ui/filterpill.md

@@ -0,0 +1,23 @@
++++
+# -----------------------------------------------------------------------
+# Do not edit this file. It is automatically generated by API Documenter.
+# -----------------------------------------------------------------------
+title = "FilterPill"
+keywords = ["grafana","documentation","sdk","@grafana/ui"]
+type = "docs"
++++
+
+## FilterPill variable
+
+### FilterPill variable
+
+<b>Signature</b>
+
+```typescript
+FilterPill: React.FC<FilterPillProps>
+```
+<b>Import</b>
+
+```typescript
+import { FilterPill } from '@grafana/ui';
+```

docs/sources/packages_api/ui/gauge.md

@@ -35,7 +35,7 @@ import { Gauge } from '@grafana/ui';
 |  [componentDidUpdate()](#componentdidupdate-method) |  |  |
 |  [draw()](#draw-method) |  |  |
 |  [getFontScale(length)](#getfontscale-method) |  |  |
-|  [getFormattedThresholds()](#getformattedthresholds-method) |  |  |
+|  [getFormattedThresholds(decimals)](#getformattedthresholds-method) |  |  |
 |  [render()](#render-method) |  |  |
 
 ### canvasElement property
@@ -117,8 +117,14 @@ getFontScale(length: number): number;
 <b>Signature</b>
 
 ```typescript
-getFormattedThresholds(): Threshold[];
+getFormattedThresholds(decimals: number): Threshold[];
 ```
+<b>Parameters</b>
+
+|  Parameter | Type | Description |
+|  --- | --- | --- |
+|  decimals | <code>number</code> |  |
+
 <b>Returns:</b>
 
 `Threshold[]`

docs/sources/packages_api/ui/graphtickformatter.md

@@ -0,0 +1,23 @@
++++
+# -----------------------------------------------------------------------
+# Do not edit this file. It is automatically generated by API Documenter.
+# -----------------------------------------------------------------------
+title = "graphTickFormatter"
+keywords = ["grafana","documentation","sdk","@grafana/ui"]
+type = "docs"
++++
+
+## graphTickFormatter variable
+
+### graphTickFormatter variable
+
+<b>Signature</b>
+
+```typescript
+graphTickFormatter: (epoch: number, axis: any) => string
+```
+<b>Import</b>
+
+```typescript
+import { graphTickFormatter } from '@grafana/ui';
+```

docs/sources/packages_api/ui/iconname.md

@@ -14,7 +14,7 @@ type = "docs"
 <b>Signature</b>
 
 ```typescript
-export declare type IconName = 'fa fa-spinner' | 'grafana' | 'question-circle' | 'angle-up' | 'history' | 'angle-down' | 'filter' | 'angle-left' | 'angle-right' | 'pen' | 'envelope' | 'percentage' | 'rocket' | 'power' | 'trash-alt' | 'slack' | 'download-alt' | 'mobile-android' | 'plus-square' | 'folder-plus' | 'folder-open' | 'folder' | 'file-copy-alt' | 'file-alt' | 'exchange-alt' | 'import' | 'exclamation-triangle' | 'times' | 'signin' | 'cloud-upload' | 'step-backward' | 'square-shape' | 'share-alt' | 'tag-alt' | 'forward' | 'check' | 'check-circle' | 'copy' | 'lock' | 'unlock' | 'panel-add' | 'arrow-random' | 'arrow-down' | 'arrows-h' | 'comment-alt' | 'code-branch' | 'arrow-right' | 'circle' | 'arrow-up' | 'arrow-from-right' | 'keyboard' | 'search' | 'chart-line' | 'search-minus' | 'clock-nine' | 'sync' | 'sign-in-alt' | 'cloud-download' | 'cog' | 'bars' | 'save' | 'apps' | 'link' | 'upload' | 'columns' | 'home-alt' | 'channel-add' | 'calendar-alt' | 'play' | 'pause' | 'calculator-alt' | 'compass' | 'sliders-v-alt' | 'bell' | 'database' | 'user' | 'camera' | 'plug' | 'shield' | 'key-skeleton-alt' | 'users-alt' | 'graph-bar' | 'book' | 'bolt' | 'comments-alt' | 'document-info' | 'info-circle' | 'bug' | 'cube' | 'star' | 'list-ul' | 'edit' | 'eye' | 'eye-slash' | 'monitor' | 'plus-circle' | 'arrow-left' | 'repeat' | 'external-link-alt' | 'minus' | 'signal' | 'search-plus' | 'minus-circle' | 'table' | 'plus' | 'heart' | 'heart-break' | 'ellipsis-v' | 'favorite' | 'line-alt' | 'sort-amount-down';
+export declare type IconName = 'fa fa-spinner' | 'grafana' | 'question-circle' | 'angle-up' | 'history' | 'angle-down' | 'filter' | 'angle-left' | 'angle-right' | 'pen' | 'envelope' | 'percentage' | 'rocket' | 'power' | 'trash-alt' | 'slack' | 'download-alt' | 'mobile-android' | 'plus-square' | 'folder-plus' | 'folder-open' | 'folder' | 'file-copy-alt' | 'file-alt' | 'exchange-alt' | 'import' | 'exclamation-triangle' | 'times' | 'signin' | 'cloud-upload' | 'step-backward' | 'square-shape' | 'share-alt' | 'tag-alt' | 'forward' | 'check' | 'check-circle' | 'copy' | 'lock' | 'unlock' | 'panel-add' | 'arrow-random' | 'arrow-down' | 'arrows-h' | 'comment-alt' | 'code-branch' | 'arrow-right' | 'circle' | 'arrow-up' | 'arrow-from-right' | 'keyboard' | 'search' | 'chart-line' | 'search-minus' | 'clock-nine' | 'sync' | 'sign-in-alt' | 'cloud-download' | 'cog' | 'bars' | 'save' | 'apps' | 'link' | 'upload' | 'columns' | 'home-alt' | 'channel-add' | 'calendar-alt' | 'play' | 'pause' | 'calculator-alt' | 'compass' | 'sliders-v-alt' | 'bell' | 'database' | 'user' | 'camera' | 'plug' | 'shield' | 'key-skeleton-alt' | 'users-alt' | 'graph-bar' | 'book' | 'bolt' | 'comments-alt' | 'document-info' | 'info-circle' | 'bug' | 'cube' | 'star' | 'list-ul' | 'edit' | 'eye' | 'eye-slash' | 'monitor' | 'plus-circle' | 'arrow-left' | 'repeat' | 'external-link-alt' | 'minus' | 'signal' | 'search-plus' | 'minus-circle' | 'table' | 'plus' | 'heart' | 'heart-break' | 'ellipsis-v' | 'favorite' | 'line-alt' | 'sort-amount-down' | 'cloud';
 ```
 <b>Import</b>
 

docs/sources/packages_api/ui/unitpicker.md

@@ -23,7 +23,6 @@ import { UnitPicker } from '@grafana/ui';
 
 |  Property | Modifiers | Type | Description |
 |  --- | --- | --- | --- |
-|  [defaultProps](#defaultprops-property) | <code>static</code> | <code>{</code><br/><code>        width: number;</code><br/><code>    }</code> |  |
 |  [onChange](#onchange-property) |  | <code>(value: SelectableValue&lt;string&gt;) =&gt; void</code> |  |
 
 <b>Methods</b>
@@ -32,16 +31,6 @@ import { UnitPicker } from '@grafana/ui';
 |  --- | --- | --- |
 |  [render()](#render-method) |  |  |
 
-### defaultProps property
-
-<b>Signature</b>
-
-```typescript
-static defaultProps: {
-        width: number;
-    };
-```
-
 ### onChange property
 
 <b>Signature</b>

docs/sources/packages_api/ui/usestyles.md

@@ -0,0 +1,25 @@
++++
+# -----------------------------------------------------------------------
+# Do not edit this file. It is automatically generated by API Documenter.
+# -----------------------------------------------------------------------
+title = "useStyles"
+keywords = ["grafana","documentation","sdk","@grafana/ui"]
+type = "docs"
++++
+
+## useStyles variable
+
+### useStyles variable
+
+Hook for using memoized styles with access to the theme.
+
+<b>Signature</b>
+
+```typescript
+useStyles: (getStyles: (theme?: GrafanaTheme | undefined) => any) => any
+```
+<b>Import</b>
+
+```typescript
+import { useStyles } from '@grafana/ui';
+```

docs/sources/packages_api/ui/valuepicker.md

@@ -14,7 +14,7 @@ type = "docs"
 <b>Signature</b>
 
 ```typescript
-export declare function ValuePicker<T>({ label, icon, options, onChange, variant, size, isFullWidth, }: ValuePickerProps<T>): JSX.Element;
+export declare function ValuePicker<T>({ label, icon, options, onChange, variant, size, isFullWidth, menuPlacement, }: ValuePickerProps<T>): JSX.Element;
 ```
 <b>Import</b>
 
@@ -25,7 +25,7 @@ import { ValuePicker } from '@grafana/ui';
 
 |  Parameter | Type | Description |
 |  --- | --- | --- |
-|  { label, icon, options, onChange, variant, size, isFullWidth, } | <code>ValuePickerProps&lt;T&gt;</code> |  |
+|  { label, icon, options, onChange, variant, size, isFullWidth, menuPlacement, } | <code>ValuePickerProps&lt;T&gt;</code> |  |
 
 <b>Returns:</b>