-
Notifications
You must be signed in to change notification settings - Fork 1.2k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #17137 from newrelic/nb-sdk-component-NR-261819
feat(Migration developer): Added account picker and button from SDK s…
- Loading branch information
Showing
4 changed files
with
746 additions
and
0 deletions.
There are no files selected for viewing
239 changes: 239 additions & 0 deletions
239
.../docs/new-relic-solutions/build-nr-ui/sdk-component/controls/account-picker.mdx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,239 @@ | ||
| --- | ||
| title: 'AccountPicker' | ||
| tags: | ||
| - SDK components | ||
| - New Relic apps | ||
| - UI components | ||
| - chart components | ||
| - query and storage components | ||
| - Platform APIs | ||
| - AccountPicker | ||
| metaDescription: 'Learn how to work the AccountPicker component' | ||
| freshnessValidatedDate: 2024-05-13 | ||
| --- | ||
|
|
||
| ## Usage [#usage] | ||
|
|
||
| ```js | ||
| import { AccountPicker } from 'nr1' | ||
| ``` | ||
|
|
||
| ## Examples [#examples] | ||
|
|
||
| ### Basic [#basic] | ||
|
|
||
| ```jsx | ||
| class Example extends React.Component { | ||
| constructor() { | ||
| super(...arguments); | ||
|
|
||
| this.state = { accountId: null }; | ||
|
|
||
| this.onChangeAccount = this.onChangeAccount.bind(this); | ||
| } | ||
|
|
||
| onChangeAccount(_, value) { | ||
| alert(`Selected account: ${value}`); | ||
|
|
||
| this.setState({ accountId: value }); | ||
| } | ||
|
|
||
| render() { | ||
| return ( | ||
| <AccountPicker | ||
| value={this.state.accountId} | ||
| onChange={this.onChangeAccount} | ||
| /> | ||
| ); | ||
| } | ||
| } | ||
| ``` | ||
|
|
||
| ### With inline label [#inline-label] | ||
|
|
||
| ```js | ||
| class Example extends React.Component { | ||
| constructor() { | ||
| super(...arguments); | ||
|
|
||
| this.state = { accountId: null }; | ||
|
|
||
| this.onChangeAccount = this.onChangeAccount.bind(this); | ||
| } | ||
|
|
||
| onChangeAccount(_, value) { | ||
| alert(`Selected account: ${value}`); | ||
|
|
||
| this.setState({ accountId: value }); | ||
| } | ||
|
|
||
| render() { | ||
| return ( | ||
| <AccountPicker | ||
| label="Account" | ||
| labelInline | ||
| value={this.state.accountId} | ||
| onChange={this.onChangeAccount} | ||
| /> | ||
| ); | ||
| } | ||
| } | ||
| ``` | ||
|
|
||
| ## Props [#props] | ||
|
|
||
|
|
||
| <table> | ||
|
|
||
| <tbody> | ||
| <tr> | ||
| <td> | ||
| `ariaLabel` | ||
| </td> | ||
| <td> | ||
| string | ||
| </td> | ||
| <td> | ||
| Provide a descriptive label for this control, for example **Accounts**. | ||
| </td> | ||
| </tr> | ||
| <tr> | ||
| <td> | ||
| `className` | ||
| </td> | ||
| <td> | ||
| string | ||
| </td> | ||
| <td> | ||
| Appends class names to the component. Use it just for positioning and spacing purposes. | ||
| </td> | ||
| </tr> | ||
| <tr> | ||
| <td> | ||
| `crossAccount` | ||
| </td> | ||
| <td> | ||
| boolean | ||
| </td> | ||
| <td> | ||
| By default, its value is `false`. Shows an option at the top named **All accounts**. When selected, the value provided by the `onChange` callback is `AccountPicker.CROSS_ACCOUNT`. This is useful when you have functionality that can operate on multiple accounts. | ||
| </td> | ||
| </tr> | ||
| <tr> | ||
| <td> | ||
| `disabled` | ||
| </td> | ||
| <td> | ||
| boolean | ||
| </td> | ||
| <td> | ||
| If `true`, the dropdown is not available for interaction. | ||
| </td> | ||
| </tr> | ||
| <tr> | ||
| <td> | ||
| `label` | ||
| </td> | ||
| <td> | ||
| string | ||
| </td> | ||
| <td> | ||
| Text to display as label. | ||
| </td> | ||
| </tr> | ||
| <tr> | ||
| <td> | ||
| `labelInline` | ||
| </td> | ||
| <td> | ||
| boolean | ||
| </td> | ||
| <td> | ||
| Display the label inline the form control. Use only when the component is not inside a `Form`. In that case set `layoutType` to `Form.LAYOUT_TYPE.SPLIT` in the `Form` component. | ||
| </td> | ||
| </tr> | ||
| <tr> | ||
| <td> | ||
| `onChange` | ||
| </td> | ||
| <td> | ||
| function | ||
| </td> | ||
| <td> | ||
| Callback fired every time the user clicks an account from the list. | ||
|
|
||
| ``` | ||
| function ( | ||
| event: React.MouseEvent, | ||
| value: number | ||
| Id of the account selected. | ||
| ) | ||
| ``` | ||
| </td> | ||
| </tr> | ||
| <tr> | ||
| <td> | ||
| `spacingType` | ||
| </td> | ||
| <td> | ||
| enum[] | ||
| </td> | ||
| <td> | ||
| Spacing property. Spacing is defined as a tuple of zero to four values, which follow the same conventions as CSS properties like `margin` or `padding`. To omit a value, use `SPACING_TYPE.OMIT`. | ||
|
|
||
| ```js | ||
| <Array of | ||
| <One of | ||
| AccountPicker.SPACING_TYPE.EXTRA_LARGE, | ||
| AccountPicker.SPACING_TYPE.LARGE, | ||
| AccountPicker.SPACING_TYPE.MEDIUM, | ||
| AccountPicker.SPACING_TYPE.NONE, | ||
| AccountPicker.SPACING_TYPE.OMIT, | ||
| AccountPicker.SPACING_TYPE.SMALL, | ||
| > | ||
| > | ||
| ``` | ||
|
|
||
| </td> | ||
| </tr> | ||
| <tr> | ||
| <td> | ||
| `style` | ||
| </td> | ||
| <td> | ||
| object | ||
| </td> | ||
| <td> | ||
| Inline style for custom styling. Should be used only for positioning and spacing purposes. | ||
| </td> | ||
| </tr> | ||
| <tr> | ||
| <td> | ||
| `testId` | ||
| </td> | ||
| <td> | ||
| string | ||
| </td> | ||
| <td> | ||
| Adds a `data-test-id` attribute. Use it to target the component in unit and E2E tests. | ||
|
|
||
| For a test id to be valid, prefix it with your nerdpack id, followed up by a dot. For example, `my-nerdpack.some-element`. | ||
|
|
||
| **Note**: You might not see `data-test-id` attributes as they are removed from the DOM, to debug them pass an `e2e-test` query parameter to the URL. | ||
| </td> | ||
| </tr> | ||
| <tr> | ||
| <td> | ||
| `value` | ||
| </td> | ||
| <td> | ||
| number|enum | ||
| </td> | ||
| <td> | ||
| Id of the selected account. | ||
| </td> | ||
| </tr> | ||
| </tbody> | ||
| </table> | ||
|
|
Oops, something went wrong.