IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Grafana-UI: Add story/docs for FilterPill (#30252)

Browse Source 
* Grafana-UI: Add story/docs for FilterPill

* Grafana-UI: Update args
This commit is contained in:
Alex Khomenko 2021-01-14 09:55:49 +02:00 committed by GitHub
parent b8d84092bb
commit b48ac0dc53
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 49 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
packages/grafana-ui/src/components/FilterPill/FilterPill.mdx Normal file
View File

@ -0,0 +1,17 @@
import { Props } from '@storybook/addon-docs/blocks';
import { FilterPill } from './FilterPill';
# FilterPill
A component used for quick toggling on/off filters. Mostly used in inline form components and transformation/query editors.
### Usage
```jsx
import { FilterPill } from '@grafana/ui';
<FilterPill label={'Test'} onClick={() => console.log('toggle')}/>
```
### Props
<Props of={FilterPill} />

31
packages/grafana-ui/src/components/FilterPill/FilterPill.story.tsx Normal file
View File

@ -0,0 +1,31 @@
import React from 'react';
import { Story } from '@storybook/react';
import { FilterPill, FilterPillProps } from './FilterPill';
import { withCenteredStory } from '@grafana/ui/src/utils/storybook/withCenteredStory';
import mdx from './FilterPill.mdx';
import { getAvailableIcons } from '../../types';
export default {
title: 'General/FilterPill',
component: FilterPill,
decorators: [withCenteredStory],
argTypes: {
icon: { control: { type: 'select', options: getAvailableIcons() } },
onClick: { action: 'Pill Clicked' },
},
parameters: {
docs: {
page: mdx,
},
},
};
export const Basic: Story<FilterPillProps> = args => {
return <FilterPill {...args} />;
};
Basic.args = {
selected: false,
label: 'Test',
icon: undefined,
};

3
packages/grafana-ui/src/components/FilterPill/FilterPill.tsx
View File

@ -5,7 +5,7 @@ import { css } from 'emotion';
import { IconButton } from '../IconButton/IconButton';
import { IconName } from '../../types';
interface FilterPillProps {
export interface FilterPillProps {
selected: boolean;
label: string;
onClick: React.MouseEventHandler<HTMLElement>;
@ -39,7 +39,6 @@ const getFilterPillStyles = stylesFactory((theme: GrafanaTheme, isSelected: bool
padding: ${theme.spacing.xxs} ${theme.spacing.sm};
background: ${theme.colors.bg2};
border-radius: ${theme.border.radius.sm};
display: inline-block;
padding: 0 ${theme.spacing.md} 0 ${theme.spacing.xs};
font-weight: ${theme.typography.weight.semibold};
font-size: ${theme.typography.size.sm};