mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
chore: Bump storybook to 6.2 (#32638)
* chore(grafanaui): bump storybook to 6.2, remove nohoist babel conflict hack * chore(grafanaui): update storybook react doc gen defaults * feat(grafanaui): map public/img as storybook static path for images/icons * refactor(grafanaui): remove storybook noopControl in favour of parameters.controls.exclude * feat(grafanaui): add component for storybook docs theming * chore(grafanaui): silence button docs react warnings * chore(grafanaui): bump storybook to v6.2.3 * revert(grafanaui): remove test description param from legacy switch story
This commit is contained in:
Jack Westbrook
GitHub
parent
317909f0c9
commit
7374f380bd
@ -317,10 +317,7 @@
|
||||
],
|
||||
"nohoist": [
|
||||
"**/@types/*",
|
||||
"**/@types/*/**",
|
||||
"@storybook",
|
||||
"**/@storybook",
|
||||
"**/@storybook/**"
|
||||
"**/@types/*/**"
|
||||
]
|
||||
},
|
||||
"_moduleAliases": {
|
||||
|
||||
@ -12,12 +12,15 @@ if (process.env.NODE_ENV !== 'production') {
|
||||
module.exports = {
|
||||
stories: stories,
|
||||
addons: [
|
||||
'@storybook/addon-docs',
|
||||
'@storybook/addon-controls',
|
||||
{
|
||||
name: '@storybook/addon-essentials',
|
||||
options: {
|
||||
backgrounds: false,
|
||||
},
|
||||
},
|
||||
'@storybook/addon-knobs',
|
||||
'@storybook/addon-actions',
|
||||
'storybook-dark-mode/register',
|
||||
'@storybook/addon-storysource',
|
||||
'storybook-dark-mode',
|
||||
],
|
||||
reactOptions: {
|
||||
fastRefresh: true,
|
||||
@ -30,6 +33,7 @@ module.exports = {
|
||||
shouldExtractLiteralValuesFromEnum: true,
|
||||
shouldRemoveUndefinedFromOptional: true,
|
||||
propFilter: (prop: any) => (prop.parent ? !/node_modules/.test(prop.parent.fileName) : true),
|
||||
savePropValueAsString: true,
|
||||
},
|
||||
},
|
||||
webpackFinal: async (config: any, { configType }: any) => {
|
||||
|
||||
@ -1 +1 @@
|
||||
<link rel="icon" href="./fav32.png" />
|
||||
<link rel="icon" href="public/img/fav32.png" />
|
||||
|
||||
@ -16,6 +16,7 @@ import lightTheme from '../../../public/sass/grafana.light.scss';
|
||||
import darkTheme from '../../../public/sass/grafana.dark.scss';
|
||||
import { GrafanaLight, GrafanaDark } from './storybookTheme';
|
||||
import addons from '@storybook/addons';
|
||||
import { ThemedDocsContainer } from '../src/utils/storybook/ThemedDocsContainer';
|
||||
|
||||
const handleThemeChange = (theme: any) => {
|
||||
if (theme !== 'light') {
|
||||
@ -35,14 +36,14 @@ addons.setConfig({
|
||||
export const decorators = [withTheme(handleThemeChange), withPaddedStory];
|
||||
|
||||
export const parameters = {
|
||||
info: {},
|
||||
docs: {
|
||||
theme: GrafanaDark,
|
||||
container: ThemedDocsContainer,
|
||||
},
|
||||
darkMode: {
|
||||
dark: GrafanaDark,
|
||||
light: GrafanaLight,
|
||||
},
|
||||
actions: { argTypesRegex: '^on[A-Z].*' },
|
||||
options: {
|
||||
showPanel: true,
|
||||
panelPosition: 'right',
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 3.5 KiB |
@ -1,57 +0,0 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 20.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
width="351px" height="365px" viewBox="0 0 351 365" style="enable-background:new 0 0 351 365;" xml:space="preserve">
|
||||
<style type="text/css">
|
||||
.st0{fill:url(#SVGID_1_);}
|
||||
</style>
|
||||
<g id="Layer_1_1_">
|
||||
</g>
|
||||
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="175.5" y1="30%" x2="175.5" y2="99%">
|
||||
<stop offset="0" style="stop-color:#F05A28"/>
|
||||
<stop offset="1" style="stop-color:#FBCA0A"/>
|
||||
</linearGradient>
|
||||
<path class="st0" d="M342,161.2c-0.6-6.1-1.6-13.1-3.6-20.9c-2-7.7-5-16.2-9.4-25c-4.4-8.8-10.1-17.9-17.5-26.8
|
||||
c-2.9-3.5-6.1-6.9-9.5-10.2c5.1-20.3-6.2-37.9-6.2-37.9c-19.5-1.2-31.9,6.1-36.5,9.4c-0.8-0.3-1.5-0.7-2.3-1
|
||||
c-3.3-1.3-6.7-2.6-10.3-3.7c-3.5-1.1-7.1-2.1-10.8-3c-3.7-0.9-7.4-1.6-11.2-2.2c-0.7-0.1-1.3-0.2-2-0.3
|
||||
c-8.5-27.2-32.9-38.6-32.9-38.6c-27.3,17.3-32.4,41.5-32.4,41.5s-0.1,0.5-0.3,1.4c-1.5,0.4-3,0.9-4.5,1.3c-2.1,0.6-4.2,1.4-6.2,2.2
|
||||
c-2.1,0.8-4.1,1.6-6.2,2.5c-4.1,1.8-8.2,3.8-12.2,6c-3.9,2.2-7.7,4.6-11.4,7.1c-0.5-0.2-1-0.4-1-0.4c-37.8-14.4-71.3,2.9-71.3,2.9
|
||||
c-3.1,40.2,15.1,65.5,18.7,70.1c-0.9,2.5-1.7,5-2.5,7.5c-2.8,9.1-4.9,18.4-6.2,28.1c-0.2,1.4-0.4,2.8-0.5,4.2
|
||||
C18.8,192.7,8.5,228,8.5,228c29.1,33.5,63.1,35.6,63.1,35.6c0,0,0.1-0.1,0.1-0.1c4.3,7.7,9.3,15,14.9,21.9c2.4,2.9,4.8,5.6,7.4,8.3
|
||||
c-10.6,30.4,1.5,55.6,1.5,55.6c32.4,1.2,53.7-14.2,58.2-17.7c3.2,1.1,6.5,2.1,9.8,2.9c10,2.6,20.2,4.1,30.4,4.5
|
||||
c2.5,0.1,5.1,0.2,7.6,0.1l1.2,0l0.8,0l1.6,0l1.6-0.1l0,0.1c15.3,21.8,42.1,24.9,42.1,24.9c19.1-20.1,20.2-40.1,20.2-44.4l0,0
|
||||
c0,0,0-0.1,0-0.3c0-0.4,0-0.6,0-0.6l0,0c0-0.3,0-0.6,0-0.9c4-2.8,7.8-5.8,11.4-9.1c7.6-6.9,14.3-14.8,19.9-23.3
|
||||
c0.5-0.8,1-1.6,1.5-2.4c21.6,1.2,36.9-13.4,36.9-13.4c-3.6-22.5-16.4-33.5-19.1-35.6l0,0c0,0-0.1-0.1-0.3-0.2
|
||||
c-0.2-0.1-0.2-0.2-0.2-0.2c0,0,0,0,0,0c-0.1-0.1-0.3-0.2-0.5-0.3c0.1-1.4,0.2-2.7,0.3-4.1c0.2-2.4,0.2-4.9,0.2-7.3l0-1.8l0-0.9
|
||||
l0-0.5c0-0.6,0-0.4,0-0.6l-0.1-1.5l-0.1-2c0-0.7-0.1-1.3-0.2-1.9c-0.1-0.6-0.1-1.3-0.2-1.9l-0.2-1.9l-0.3-1.9
|
||||
c-0.4-2.5-0.8-4.9-1.4-7.4c-2.3-9.7-6.1-18.9-11-27.2c-5-8.3-11.2-15.6-18.3-21.8c-7-6.2-14.9-11.2-23.1-14.9
|
||||
c-8.3-3.7-16.9-6.1-25.5-7.2c-4.3-0.6-8.6-0.8-12.9-0.7l-1.6,0l-0.4,0c-0.1,0-0.6,0-0.5,0l-0.7,0l-1.6,0.1c-0.6,0-1.2,0.1-1.7,0.1
|
||||
c-2.2,0.2-4.4,0.5-6.5,0.9c-8.6,1.6-16.7,4.7-23.8,9c-7.1,4.3-13.3,9.6-18.3,15.6c-5,6-8.9,12.7-11.6,19.6c-2.7,6.9-4.2,14.1-4.6,21
|
||||
c-0.1,1.7-0.1,3.5-0.1,5.2c0,0.4,0,0.9,0,1.3l0.1,1.4c0.1,0.8,0.1,1.7,0.2,2.5c0.3,3.5,1,6.9,1.9,10.1c1.9,6.5,4.9,12.4,8.6,17.4
|
||||
c3.7,5,8.2,9.1,12.9,12.4c4.7,3.2,9.8,5.5,14.8,7c5,1.5,10,2.1,14.7,2.1c0.6,0,1.2,0,1.7,0c0.3,0,0.6,0,0.9,0c0.3,0,0.6,0,0.9-0.1
|
||||
c0.5,0,1-0.1,1.5-0.1c0.1,0,0.3,0,0.4-0.1l0.5-0.1c0.3,0,0.6-0.1,0.9-0.1c0.6-0.1,1.1-0.2,1.7-0.3c0.6-0.1,1.1-0.2,1.6-0.4
|
||||
c1.1-0.2,2.1-0.6,3.1-0.9c2-0.7,4-1.5,5.7-2.4c1.8-0.9,3.4-2,5-3c0.4-0.3,0.9-0.6,1.3-1c1.6-1.3,1.9-3.7,0.6-5.3
|
||||
c-1.1-1.4-3.1-1.8-4.7-0.9c-0.4,0.2-0.8,0.4-1.2,0.6c-1.4,0.7-2.8,1.3-4.3,1.8c-1.5,0.5-3.1,0.9-4.7,1.2c-0.8,0.1-1.6,0.2-2.5,0.3
|
||||
c-0.4,0-0.8,0.1-1.3,0.1c-0.4,0-0.9,0-1.2,0c-0.4,0-0.8,0-1.2,0c-0.5,0-1,0-1.5-0.1c0,0-0.3,0-0.1,0l-0.2,0l-0.3,0
|
||||
c-0.2,0-0.5,0-0.7-0.1c-0.5-0.1-0.9-0.1-1.4-0.2c-3.7-0.5-7.4-1.6-10.9-3.2c-3.6-1.6-7-3.8-10.1-6.6c-3.1-2.8-5.8-6.1-7.9-9.9
|
||||
c-2.1-3.8-3.6-8-4.3-12.4c-0.3-2.2-0.5-4.5-0.4-6.7c0-0.6,0.1-1.2,0.1-1.8c0,0.2,0-0.1,0-0.1l0-0.2l0-0.5c0-0.3,0.1-0.6,0.1-0.9
|
||||
c0.1-1.2,0.3-2.4,0.5-3.6c1.7-9.6,6.5-19,13.9-26.1c1.9-1.8,3.9-3.4,6-4.9c2.1-1.5,4.4-2.8,6.8-3.9c2.4-1.1,4.8-2,7.4-2.7
|
||||
c2.5-0.7,5.1-1.1,7.8-1.4c1.3-0.1,2.6-0.2,4-0.2c0.4,0,0.6,0,0.9,0l1.1,0l0.7,0c0.3,0,0,0,0.1,0l0.3,0l1.1,0.1
|
||||
c2.9,0.2,5.7,0.6,8.5,1.3c5.6,1.2,11.1,3.3,16.2,6.1c10.2,5.7,18.9,14.5,24.2,25.1c2.7,5.3,4.6,11,5.5,16.9c0.2,1.5,0.4,3,0.5,4.5
|
||||
l0.1,1.1l0.1,1.1c0,0.4,0,0.8,0,1.1c0,0.4,0,0.8,0,1.1l0,1l0,1.1c0,0.7-0.1,1.9-0.1,2.6c-0.1,1.6-0.3,3.3-0.5,4.9
|
||||
c-0.2,1.6-0.5,3.2-0.8,4.8c-0.3,1.6-0.7,3.2-1.1,4.7c-0.8,3.1-1.8,6.2-3,9.3c-2.4,6-5.6,11.8-9.4,17.1
|
||||
c-7.7,10.6-18.2,19.2-30.2,24.7c-6,2.7-12.3,4.7-18.8,5.7c-3.2,0.6-6.5,0.9-9.8,1l-0.6,0l-0.5,0l-1.1,0l-1.6,0l-0.8,0
|
||||
c0.4,0-0.1,0-0.1,0l-0.3,0c-1.8,0-3.5-0.1-5.3-0.3c-7-0.5-13.9-1.8-20.7-3.7c-6.7-1.9-13.2-4.6-19.4-7.8
|
||||
c-12.3-6.6-23.4-15.6-32-26.5c-4.3-5.4-8.1-11.3-11.2-17.4c-3.1-6.1-5.6-12.6-7.4-19.1c-1.8-6.6-2.9-13.3-3.4-20.1l-0.1-1.3l0-0.3
|
||||
l0-0.3l0-0.6l0-1.1l0-0.3l0-0.4l0-0.8l0-1.6l0-0.3c0,0,0,0.1,0-0.1l0-0.6c0-0.8,0-1.7,0-2.5c0.1-3.3,0.4-6.8,0.8-10.2
|
||||
c0.4-3.4,1-6.9,1.7-10.3c0.7-3.4,1.5-6.8,2.5-10.2c1.9-6.7,4.3-13.2,7.1-19.3c5.7-12.2,13.1-23.1,22-31.8c2.2-2.2,4.5-4.2,6.9-6.2
|
||||
c2.4-1.9,4.9-3.7,7.5-5.4c2.5-1.7,5.2-3.2,7.9-4.6c1.3-0.7,2.7-1.4,4.1-2c0.7-0.3,1.4-0.6,2.1-0.9c0.7-0.3,1.4-0.6,2.1-0.9
|
||||
c2.8-1.2,5.7-2.2,8.7-3.1c0.7-0.2,1.5-0.4,2.2-0.7c0.7-0.2,1.5-0.4,2.2-0.6c1.5-0.4,3-0.8,4.5-1.1c0.7-0.2,1.5-0.3,2.3-0.5
|
||||
c0.8-0.2,1.5-0.3,2.3-0.5c0.8-0.1,1.5-0.3,2.3-0.4l1.1-0.2l1.2-0.2c0.8-0.1,1.5-0.2,2.3-0.3c0.9-0.1,1.7-0.2,2.6-0.3
|
||||
c0.7-0.1,1.9-0.2,2.6-0.3c0.5-0.1,1.1-0.1,1.6-0.2l1.1-0.1l0.5-0.1l0.6,0c0.9-0.1,1.7-0.1,2.6-0.2l1.3-0.1c0,0,0.5,0,0.1,0l0.3,0
|
||||
l0.6,0c0.7,0,1.5-0.1,2.2-0.1c2.9-0.1,5.9-0.1,8.8,0c5.8,0.2,11.5,0.9,17,1.9c11.1,2.1,21.5,5.6,31,10.3
|
||||
c9.5,4.6,17.9,10.3,25.3,16.5c0.5,0.4,0.9,0.8,1.4,1.2c0.4,0.4,0.9,0.8,1.3,1.2c0.9,0.8,1.7,1.6,2.6,2.4c0.9,0.8,1.7,1.6,2.5,2.4
|
||||
c0.8,0.8,1.6,1.6,2.4,2.5c3.1,3.3,6,6.6,8.6,10c5.2,6.7,9.4,13.5,12.7,19.9c0.2,0.4,0.4,0.8,0.6,1.2c0.2,0.4,0.4,0.8,0.6,1.2
|
||||
c0.4,0.8,0.8,1.6,1.1,2.4c0.4,0.8,0.7,1.5,1.1,2.3c0.3,0.8,0.7,1.5,1,2.3c1.2,3,2.4,5.9,3.3,8.6c1.5,4.4,2.6,8.3,3.5,11.7
|
||||
c0.3,1.4,1.6,2.3,3,2.1c1.5-0.1,2.6-1.3,2.6-2.8C342.6,170.4,342.5,166.1,342,161.2z"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 5.6 KiB |
@ -39,7 +39,7 @@ const createTheme = (theme: GrafanaTheme) => {
|
||||
|
||||
brandTitle: 'Grafana UI',
|
||||
brandUrl: './',
|
||||
brandImage: './grafana_icon.svg',
|
||||
brandImage: 'public/img/grafana_icon.svg',
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
@ -21,8 +21,8 @@
|
||||
"bundle": "rollup -c rollup.config.ts",
|
||||
"clean": "rimraf ./dist ./compiled",
|
||||
"docsExtract": "mkdir -p ../../reports/docs && api-extractor run 2>&1 | tee ../../reports/docs/$(basename $(pwd)).log",
|
||||
"storybook": "start-storybook -p 9001 -c .storybook -s .storybook/static",
|
||||
"storybook:build": "build-storybook -o ./dist/storybook -c .storybook -s .storybook/static",
|
||||
"storybook": "start-storybook -p 9001 -c .storybook -s ../../public/img:public/img",
|
||||
"storybook:build": "build-storybook -o ./dist/storybook -c .storybook -s ../../public/img:public/img",
|
||||
"typecheck": "tsc --noEmit"
|
||||
},
|
||||
"dependencies": {
|
||||
@ -84,12 +84,11 @@
|
||||
"@rollup/plugin-commonjs": "16.0.0",
|
||||
"@rollup/plugin-image": "2.0.5",
|
||||
"@rollup/plugin-node-resolve": "10.0.0",
|
||||
"@storybook/addon-controls": "6.1.15",
|
||||
"@storybook/addon-essentials": "6.1.15",
|
||||
"@storybook/addon-knobs": "6.1.15",
|
||||
"@storybook/addon-storysource": "6.1.15",
|
||||
"@storybook/react": "6.1.15",
|
||||
"@storybook/theming": "6.1.15",
|
||||
"@storybook/addon-essentials": "6.2.3",
|
||||
"@storybook/addon-knobs": "6.2.3",
|
||||
"@storybook/addon-storysource": "6.2.3",
|
||||
"@storybook/react": "6.2.3",
|
||||
"@storybook/theming": "6.2.3",
|
||||
"@types/react-router-dom": "^5.1.7",
|
||||
"@types/classnames": "2.2.7",
|
||||
"@types/common-tags": "^1.8.0",
|
||||
@ -117,7 +116,7 @@
|
||||
"rollup-plugin-terser": "7.0.2",
|
||||
"rollup-plugin-typescript2": "0.29.0",
|
||||
"rollup-plugin-visualizer": "4.2.0",
|
||||
"storybook-dark-mode": "1.0.4",
|
||||
"storybook-dark-mode": "1.0.7",
|
||||
"ts-loader": "8.0.11",
|
||||
"typescript": "4.1.2",
|
||||
"webpack-filter-warnings-plugin": "1.2.1"
|
||||
|
||||
@ -1,7 +1,6 @@
|
||||
import React from 'react';
|
||||
import { Story } from '@storybook/react';
|
||||
import { Story, Meta } from '@storybook/react';
|
||||
import { BarGauge, BarGaugeDisplayMode } from '@grafana/ui';
|
||||
import { NOOP_CONTROL } from '../../utils/storybook/noopControl';
|
||||
import { VizOrientation, ThresholdsMode, Field, FieldType, getDisplayProcessor } from '@grafana/data';
|
||||
import { Props } from './BarGauge';
|
||||
import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
|
||||
@ -19,6 +18,19 @@ export default {
|
||||
knobs: {
|
||||
disable: true,
|
||||
},
|
||||
controls: {
|
||||
exclude: [
|
||||
'theme',
|
||||
'field',
|
||||
'value',
|
||||
'display',
|
||||
'orientation',
|
||||
'text',
|
||||
'onClick',
|
||||
'className',
|
||||
'alignmentFactors',
|
||||
],
|
||||
},
|
||||
},
|
||||
args: {
|
||||
numeric: 70,
|
||||
@ -45,17 +57,8 @@ export default {
|
||||
height: { control: { type: 'range', min: 200, max: 800 } },
|
||||
threshold1Color: { control: 'color' },
|
||||
threshold2Color: { control: 'color' },
|
||||
theme: NOOP_CONTROL,
|
||||
field: NOOP_CONTROL,
|
||||
value: NOOP_CONTROL,
|
||||
display: NOOP_CONTROL,
|
||||
orientation: NOOP_CONTROL,
|
||||
text: NOOP_CONTROL,
|
||||
onClick: NOOP_CONTROL,
|
||||
className: NOOP_CONTROL,
|
||||
alignmentFactors: NOOP_CONTROL,
|
||||
},
|
||||
};
|
||||
} as Meta;
|
||||
|
||||
interface StoryProps extends Partial<Props> {
|
||||
numeric: number;
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import React from 'react';
|
||||
import { Story } from '@storybook/react';
|
||||
import { Story, Meta } from '@storybook/react';
|
||||
import {
|
||||
BigValue,
|
||||
BigValueColorMode,
|
||||
@ -11,7 +11,6 @@ import {
|
||||
import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
|
||||
import mdx from './BigValue.mdx';
|
||||
import { useTheme } from '../../themes';
|
||||
import { NOOP_CONTROL } from '../../utils/storybook/noopControl';
|
||||
import { ArrayVector, FieldSparkline, FieldType } from '@grafana/data';
|
||||
|
||||
export default {
|
||||
@ -25,6 +24,9 @@ export default {
|
||||
knobs: {
|
||||
disable: true,
|
||||
},
|
||||
controls: {
|
||||
exclude: ['value', 'sparkline', 'onClick', 'className', 'alignmentFactors', 'text', 'count', 'theme'],
|
||||
},
|
||||
},
|
||||
argTypes: {
|
||||
width: { control: { type: 'range', min: 200, max: 800 } },
|
||||
@ -45,16 +47,8 @@ export default {
|
||||
},
|
||||
},
|
||||
color: { control: 'color' },
|
||||
value: NOOP_CONTROL,
|
||||
sparkline: NOOP_CONTROL,
|
||||
onClick: NOOP_CONTROL,
|
||||
className: NOOP_CONTROL,
|
||||
alignmentFactors: NOOP_CONTROL,
|
||||
text: NOOP_CONTROL,
|
||||
count: NOOP_CONTROL,
|
||||
theme: NOOP_CONTROL,
|
||||
},
|
||||
};
|
||||
} as Meta;
|
||||
|
||||
interface StoryProps extends Partial<Props> {
|
||||
numeric: number;
|
||||
|
||||
@ -13,13 +13,13 @@ If there is no primary action, all `Button` components should be secondary.
|
||||
|
||||
<Preview>
|
||||
<div>
|
||||
<Button variant="primary" size="sm" renderAs="button" style={{ margin: '5px' }}>
|
||||
<Button variant="primary" size="sm" style={{ margin: '5px' }}>
|
||||
Small
|
||||
</Button>
|
||||
<Button variant="primary" size="md" renderAs="button" style={{ margin: '5px' }}>
|
||||
<Button variant="primary" size="md" style={{ margin: '5px' }}>
|
||||
Medium
|
||||
</Button>
|
||||
<Button variant="primary" size="lg" renderAs="button" style={{ margin: '5px' }}>
|
||||
<Button variant="primary" size="lg" style={{ margin: '5px' }}>
|
||||
Large
|
||||
</Button>
|
||||
</div>
|
||||
@ -29,18 +29,18 @@ If there is no primary action, all `Button` components should be secondary.
|
||||
|
||||
The secondary `Button` is the default button style and can trigger various actions. How it is used depends on its surroundings:
|
||||
|
||||
1. When next to the primary `Button`, the Secondary style can for example be used for "Cancel" or "Abort" actions.
|
||||
1. When next to the primary `Button`, the Secondary style can for example be used for "Cancel" or "Abort" actions.
|
||||
2. When there is no main important action on a given page, all `Button` components should use the secondary style.
|
||||
|
||||
<Preview>
|
||||
<div>
|
||||
<Button variant="secondary" size="sm" renderAs="button" style={{ margin: '5px' }}>
|
||||
<Button variant="secondary" size="sm" style={{ margin: '5px' }}>
|
||||
Small
|
||||
</Button>
|
||||
<Button variant="secondary" size="md" renderAs="button" style={{ margin: '5px' }}>
|
||||
<Button variant="secondary" size="md" style={{ margin: '5px' }}>
|
||||
Medium
|
||||
</Button>
|
||||
<Button variant="secondary" size="lg" renderAs="button" style={{ margin: '5px' }}>
|
||||
<Button variant="secondary" size="lg" style={{ margin: '5px' }}>
|
||||
Large
|
||||
</Button>
|
||||
</div>
|
||||
@ -52,13 +52,13 @@ Used for triggering a removing or deleting action. Because of its dominant color
|
||||
|
||||
<Preview>
|
||||
<div>
|
||||
<Button variant="destructive" size="sm" renderAs="button" style={{ margin: '5px' }}>
|
||||
<Button variant="destructive" size="sm" style={{ margin: '5px' }}>
|
||||
Small
|
||||
</Button>
|
||||
<Button variant="destructive" size="md" renderAs="button" style={{ margin: '5px' }}>
|
||||
<Button variant="destructive" size="md" style={{ margin: '5px' }}>
|
||||
Medium
|
||||
</Button>
|
||||
<Button variant="destructive" size="lg" renderAs="button" style={{ margin: '5px' }}>
|
||||
<Button variant="destructive" size="lg" style={{ margin: '5px' }}>
|
||||
Large
|
||||
</Button>
|
||||
</div>
|
||||
@ -70,13 +70,13 @@ Used for hyperlinks.
|
||||
|
||||
<Preview>
|
||||
<div>
|
||||
<Button href="/" variant="link" size="sm" renderAs="button" style={{ margin: '5px' }}>
|
||||
<Button href="/" variant="link" size="sm" style={{ margin: '5px' }}>
|
||||
Small
|
||||
</Button>
|
||||
<Button href="/" variant="link" size="md" renderAs="button" style={{ margin: '5px' }}>
|
||||
<Button href="/" variant="link" size="md" style={{ margin: '5px' }}>
|
||||
Medium
|
||||
</Button>
|
||||
<Button href="/" variant="link" size="lg" renderAs="button" style={{ margin: '5px' }}>
|
||||
<Button href="/" variant="link" size="lg" style={{ margin: '5px' }}>
|
||||
Large
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
@ -1,8 +1,7 @@
|
||||
import React from 'react';
|
||||
import { Story } from '@storybook/react';
|
||||
import { Story, Meta } from '@storybook/react';
|
||||
import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
|
||||
import { ButtonCascader } from '@grafana/ui';
|
||||
import { NOOP_CONTROL } from '../../utils/storybook/noopControl';
|
||||
import { ButtonCascaderProps } from './ButtonCascader';
|
||||
|
||||
export default {
|
||||
@ -13,6 +12,9 @@ export default {
|
||||
knobs: {
|
||||
disable: true,
|
||||
},
|
||||
controls: {
|
||||
exclude: ['className', 'value', 'fieldNames'],
|
||||
},
|
||||
},
|
||||
args: {
|
||||
disabled: false,
|
||||
@ -32,11 +34,8 @@ export default {
|
||||
argTypes: {
|
||||
icon: { control: { type: 'select', options: ['plus', 'minus', 'table'] } },
|
||||
options: { control: 'object' },
|
||||
className: NOOP_CONTROL,
|
||||
value: NOOP_CONTROL,
|
||||
fieldNames: NOOP_CONTROL,
|
||||
},
|
||||
};
|
||||
} as Meta;
|
||||
|
||||
const Template: Story<ButtonCascaderProps> = ({ children, ...args }) => {
|
||||
return <ButtonCascader {...args}>{children}</ButtonCascader>;
|
||||
|
||||
@ -1,8 +1,7 @@
|
||||
import React from 'react';
|
||||
import { renderComponentWithTheme } from '../../utils/storybook/withTheme';
|
||||
import { CallToActionCard, CallToActionCardProps } from './CallToActionCard';
|
||||
import { NOOP_CONTROL } from '../../utils/storybook/noopControl';
|
||||
import { Story } from '@storybook/react';
|
||||
import { Story, Meta } from '@storybook/react';
|
||||
import { Button } from '../Button/Button';
|
||||
import { action } from '@storybook/addon-actions';
|
||||
|
||||
@ -13,14 +12,14 @@ export default {
|
||||
knobs: {
|
||||
disable: true,
|
||||
},
|
||||
controls: {
|
||||
exclude: ['className', 'callToActionElement', 'theme'],
|
||||
},
|
||||
},
|
||||
argTypes: {
|
||||
Element: { control: { type: 'select', options: ['button', 'custom'] } },
|
||||
className: NOOP_CONTROL,
|
||||
callToActionElement: NOOP_CONTROL,
|
||||
theme: NOOP_CONTROL,
|
||||
},
|
||||
};
|
||||
} as Meta;
|
||||
|
||||
interface StoryProps extends Partial<CallToActionCardProps> {
|
||||
Element: string;
|
||||
|
||||
@ -1,6 +1,5 @@
|
||||
import { Story } from '@storybook/react';
|
||||
import { Story, Meta } from '@storybook/react';
|
||||
import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
|
||||
import { NOOP_CONTROL } from '../../utils/storybook/noopControl';
|
||||
import { Cascader } from '@grafana/ui';
|
||||
import { CascaderOption, CascaderProps } from './Cascader';
|
||||
import mdx from './Cascader.mdx';
|
||||
@ -43,6 +42,9 @@ export default {
|
||||
knobs: {
|
||||
disable: true,
|
||||
},
|
||||
controls: {
|
||||
exclude: ['placeholder', 'initialValue', 'changeOnSelect'],
|
||||
},
|
||||
},
|
||||
args: {
|
||||
onSelect,
|
||||
@ -50,11 +52,8 @@ export default {
|
||||
},
|
||||
argTypes: {
|
||||
width: { control: { type: 'range', min: 0, max: 70 } },
|
||||
placeholder: NOOP_CONTROL,
|
||||
initialValue: NOOP_CONTROL,
|
||||
changeOnSelect: NOOP_CONTROL,
|
||||
},
|
||||
};
|
||||
} as Meta;
|
||||
|
||||
const Template: Story<CascaderProps> = (args) => <Cascader {...args} />;
|
||||
|
||||
|
||||
@ -1,7 +1,6 @@
|
||||
import React, { useState } from 'react';
|
||||
import { Story } from '@storybook/react';
|
||||
import { Story, Meta } from '@storybook/react';
|
||||
import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
|
||||
import { NOOP_CONTROL } from '../../utils/storybook/noopControl';
|
||||
import { ClipboardButton, Props } from './ClipboardButton';
|
||||
import { Input } from '../Forms/Legacy/Input/Input';
|
||||
import mdx from './ClipboardButton.mdx';
|
||||
@ -17,15 +16,11 @@ export default {
|
||||
knobs: {
|
||||
disable: true,
|
||||
},
|
||||
controls: {
|
||||
exclude: ['size', 'variant', 'icon', 'className', 'fullWidth'],
|
||||
},
|
||||
},
|
||||
argTypes: {
|
||||
size: NOOP_CONTROL,
|
||||
variant: NOOP_CONTROL,
|
||||
icon: NOOP_CONTROL,
|
||||
className: NOOP_CONTROL,
|
||||
fullWidth: NOOP_CONTROL,
|
||||
},
|
||||
};
|
||||
} as Meta;
|
||||
|
||||
interface StoryProps extends Partial<Props> {
|
||||
inputText: string;
|
||||
|
||||
@ -1,9 +1,8 @@
|
||||
import React from 'react';
|
||||
import { Story } from '@storybook/react';
|
||||
import { Meta, Story } from '@storybook/react';
|
||||
import { SeriesColorPicker, ColorPicker } from '@grafana/ui';
|
||||
import { action } from '@storybook/addon-actions';
|
||||
import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
|
||||
import { NOOP_CONTROL } from '../../utils/storybook/noopControl';
|
||||
import { UseState } from '../../utils/storybook/UseState';
|
||||
import { renderComponentWithTheme } from '../../utils/storybook/withTheme';
|
||||
import { ColorPickerProps } from './ColorPickerPopover';
|
||||
@ -21,16 +20,14 @@ export default {
|
||||
knobs: {
|
||||
disable: true,
|
||||
},
|
||||
controls: {
|
||||
exclude: ['color', 'onChange', 'onColorChange'],
|
||||
},
|
||||
},
|
||||
args: {
|
||||
enableNamedColors: false,
|
||||
},
|
||||
argTypes: {
|
||||
color: NOOP_CONTROL,
|
||||
onChange: NOOP_CONTROL,
|
||||
onColorChange: NOOP_CONTROL,
|
||||
},
|
||||
};
|
||||
} as Meta;
|
||||
|
||||
export const Basic: Story<ColorPickerProps> = ({ enableNamedColors }) => {
|
||||
return (
|
||||
|
||||
@ -1,9 +1,8 @@
|
||||
import React from 'react';
|
||||
import { NamedColorsPalette, NamedColorsPaletteProps } from './NamedColorsPalette';
|
||||
import { Story } from '@storybook/react';
|
||||
import { Meta, Story } from '@storybook/react';
|
||||
import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
|
||||
import { renderComponentWithTheme } from '../../utils/storybook/withTheme';
|
||||
import { NOOP_CONTROL } from '../../utils/storybook/noopControl';
|
||||
import { UseState } from '../../utils/storybook/UseState';
|
||||
import mdx from './ColorPicker.mdx';
|
||||
|
||||
@ -18,13 +17,14 @@ export default {
|
||||
knobs: {
|
||||
disable: true,
|
||||
},
|
||||
controls: {
|
||||
exclude: ['theme', 'color'],
|
||||
},
|
||||
},
|
||||
argTypes: {
|
||||
selectedColor: { control: { type: 'select', options: ['green', 'red', 'light-blue', 'yellow'] } },
|
||||
theme: NOOP_CONTROL,
|
||||
color: NOOP_CONTROL,
|
||||
},
|
||||
};
|
||||
} as Meta;
|
||||
|
||||
interface StoryProps extends Partial<NamedColorsPaletteProps> {
|
||||
selectedColor: string;
|
||||
|
||||
@ -1,8 +1,7 @@
|
||||
import React from 'react';
|
||||
import { Story } from '@storybook/react';
|
||||
import { Meta, Story } from '@storybook/react';
|
||||
import { ConfirmButton } from '@grafana/ui';
|
||||
import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
|
||||
import { NOOP_CONTROL } from '../../utils/storybook/noopControl';
|
||||
import { action } from '@storybook/addon-actions';
|
||||
import { Button } from '../Button';
|
||||
import { DeleteButton } from './DeleteButton';
|
||||
@ -21,6 +20,9 @@ export default {
|
||||
knobs: {
|
||||
disable: true,
|
||||
},
|
||||
controls: {
|
||||
exclude: ['className'],
|
||||
},
|
||||
},
|
||||
args: {
|
||||
buttonText: 'Edit',
|
||||
@ -33,9 +35,8 @@ export default {
|
||||
argTypes: {
|
||||
confirmVariant: { control: { type: 'select' } },
|
||||
size: { control: { type: 'select' } },
|
||||
className: NOOP_CONTROL,
|
||||
},
|
||||
};
|
||||
} as Meta;
|
||||
|
||||
interface StoryProps extends Partial<Props> {
|
||||
buttonText: string;
|
||||
|
||||
@ -1,8 +1,7 @@
|
||||
import React from 'react';
|
||||
import { Story } from '@storybook/react';
|
||||
import { Meta, Story } from '@storybook/react';
|
||||
import { action } from '@storybook/addon-actions';
|
||||
import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
|
||||
import { NOOP_CONTROL } from '../../utils/storybook/noopControl';
|
||||
import { ConfirmModal } from '@grafana/ui';
|
||||
import mdx from './ConfirmModal.mdx';
|
||||
import { Props } from './ConfirmModal';
|
||||
@ -18,13 +17,14 @@ export default {
|
||||
knobs: {
|
||||
disable: true,
|
||||
},
|
||||
controls: {
|
||||
exclude: ['isOpen', 'body'],
|
||||
},
|
||||
},
|
||||
argTypes: {
|
||||
icon: { control: { type: 'select', options: ['exclamation-triangle', 'power', 'cog', 'lock'] } },
|
||||
isOpen: NOOP_CONTROL,
|
||||
body: NOOP_CONTROL,
|
||||
},
|
||||
};
|
||||
} as Meta;
|
||||
|
||||
const defaultActions = {
|
||||
onConfirm: () => {
|
||||
|
||||
@ -1,12 +1,11 @@
|
||||
import React from 'react';
|
||||
import { action } from '@storybook/addon-actions';
|
||||
import { Story } from '@storybook/react';
|
||||
import { Meta, Story } from '@storybook/react';
|
||||
import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
|
||||
import { UseState } from '../../utils/storybook/UseState';
|
||||
import { SelectableValue } from '@grafana/data';
|
||||
import { ButtonSelect } from './ButtonSelect';
|
||||
import { DashboardStoryCanvas } from '../../utils/storybook/DashboardStoryCanvas';
|
||||
import { NOOP_CONTROL } from '../../utils/storybook/noopControl';
|
||||
|
||||
export default {
|
||||
title: 'Forms/Select/ButtonSelect',
|
||||
@ -16,14 +15,11 @@ export default {
|
||||
knobs: {
|
||||
disable: true,
|
||||
},
|
||||
controls: {
|
||||
exclude: ['className', 'options', 'value', 'tooltipContent'],
|
||||
},
|
||||
},
|
||||
argTypes: {
|
||||
className: NOOP_CONTROL,
|
||||
options: NOOP_CONTROL,
|
||||
value: NOOP_CONTROL,
|
||||
tooltipContent: NOOP_CONTROL,
|
||||
},
|
||||
};
|
||||
} as Meta;
|
||||
|
||||
export const Basic: Story = (args) => {
|
||||
const initialValue: SelectableValue<string> = { label: 'A label', value: 'A value' };
|
||||
|
||||
@ -1,6 +1,5 @@
|
||||
import React from 'react';
|
||||
import { Story } from '@storybook/react';
|
||||
import { NOOP_CONTROL } from '../../utils/storybook/noopControl';
|
||||
import { Meta, Story } from '@storybook/react';
|
||||
import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
|
||||
import { FormField, Props } from './FormField';
|
||||
|
||||
@ -12,6 +11,9 @@ export default {
|
||||
knobs: {
|
||||
disable: true,
|
||||
},
|
||||
controls: {
|
||||
exclude: ['inputEl'],
|
||||
},
|
||||
},
|
||||
args: {
|
||||
inputWidth: 20,
|
||||
@ -22,9 +24,8 @@ export default {
|
||||
inputWidth: { control: { type: 'range', min: 5, max: 30 } },
|
||||
labelWidth: { control: { type: 'range', min: 5, max: 30 } },
|
||||
tooltip: { control: { type: 'text' } },
|
||||
inputEl: NOOP_CONTROL,
|
||||
},
|
||||
};
|
||||
} as Meta;
|
||||
|
||||
export const Basic: Story<Props> = (args) => {
|
||||
return <FormField {...args} />;
|
||||
|
||||
@ -1,8 +1,7 @@
|
||||
import React from 'react';
|
||||
import { Story } from '@storybook/react';
|
||||
import { Meta, Story } from '@storybook/react';
|
||||
import { FieldValidationMessage, FieldValidationMessageProps } from './FieldValidationMessage';
|
||||
import mdx from './FieldValidationMessage.mdx';
|
||||
import { NOOP_CONTROL } from '../../utils/storybook/noopControl';
|
||||
|
||||
export default {
|
||||
title: 'Forms/FieldValidationMessage',
|
||||
@ -14,6 +13,9 @@ export default {
|
||||
knobs: {
|
||||
disable: true,
|
||||
},
|
||||
controls: {
|
||||
exclude: ['className'],
|
||||
},
|
||||
},
|
||||
args: {
|
||||
horizontal: false,
|
||||
@ -21,9 +23,8 @@ export default {
|
||||
},
|
||||
argTypes: {
|
||||
children: { name: 'message' },
|
||||
className: NOOP_CONTROL,
|
||||
},
|
||||
};
|
||||
} as Meta;
|
||||
|
||||
export const Basic: Story<FieldValidationMessageProps> = (args) => {
|
||||
return <FieldValidationMessage horizontal={args.horizontal}>{args.children}</FieldValidationMessage>;
|
||||
|
||||
@ -3,9 +3,8 @@ import { zip, fromPairs } from 'lodash';
|
||||
|
||||
import { withCenteredStory } from '../../../../utils/storybook/withCenteredStory';
|
||||
import { Input } from './Input';
|
||||
import { Story } from '@storybook/react';
|
||||
import { Meta, Story } from '@storybook/react';
|
||||
import { EventsWithValidation } from '../../../../utils';
|
||||
import { NOOP_CONTROL } from '../../../../utils/storybook/noopControl';
|
||||
|
||||
export default {
|
||||
title: 'Forms/Legacy/Input',
|
||||
@ -15,6 +14,9 @@ export default {
|
||||
knobs: {
|
||||
disable: true,
|
||||
},
|
||||
controls: {
|
||||
exclude: ['inputRef'],
|
||||
},
|
||||
},
|
||||
argTypes: {
|
||||
validationEvents: {
|
||||
@ -24,9 +26,8 @@ export default {
|
||||
},
|
||||
},
|
||||
validation: { name: 'Validation regex (will do a partial match if you do not anchor it)' },
|
||||
inputRef: NOOP_CONTROL,
|
||||
},
|
||||
};
|
||||
} as Meta;
|
||||
|
||||
const Wrapper: Story = (args) => {
|
||||
const [value, setValue] = useState('');
|
||||
|
||||
@ -1,11 +1,10 @@
|
||||
import React, { useState, useCallback } from 'react';
|
||||
import { action } from '@storybook/addon-actions';
|
||||
import { Story } from '@storybook/react';
|
||||
import { Meta, Story } from '@storybook/react';
|
||||
import { withCenteredStory } from '../../../../utils/storybook/withCenteredStory';
|
||||
import { UseState } from '../../../../utils/storybook/UseState';
|
||||
import { SelectableValue } from '@grafana/data';
|
||||
import { Select, AsyncSelect as AsyncSelectComponent } from './Select';
|
||||
import { NOOP_CONTROL } from '../../../../utils/storybook/noopControl';
|
||||
|
||||
export default {
|
||||
title: 'Forms/Legacy/Select',
|
||||
@ -15,29 +14,32 @@ export default {
|
||||
knobs: {
|
||||
disable: true,
|
||||
},
|
||||
controls: {
|
||||
exclude: [
|
||||
'className',
|
||||
'menuPlacement',
|
||||
'menuPosition',
|
||||
'maxMenuHeight',
|
||||
'minMenuHeight',
|
||||
'maxVisibleValues',
|
||||
'prefix',
|
||||
'renderControl',
|
||||
'value',
|
||||
'tooltipContent',
|
||||
'components',
|
||||
'inputValue',
|
||||
'id',
|
||||
'inputId',
|
||||
'defaultValue',
|
||||
'loading',
|
||||
'aria-label',
|
||||
],
|
||||
},
|
||||
},
|
||||
argTypes: {
|
||||
width: { control: { type: 'range', min: 5, max: 30 } },
|
||||
className: NOOP_CONTROL,
|
||||
menuPlacement: NOOP_CONTROL,
|
||||
menuPosition: NOOP_CONTROL,
|
||||
maxMenuHeight: NOOP_CONTROL,
|
||||
minMenuHeight: NOOP_CONTROL,
|
||||
maxVisibleValues: NOOP_CONTROL,
|
||||
prefix: NOOP_CONTROL,
|
||||
renderControl: NOOP_CONTROL,
|
||||
value: NOOP_CONTROL,
|
||||
options: NOOP_CONTROL,
|
||||
tooltipContent: NOOP_CONTROL,
|
||||
components: NOOP_CONTROL,
|
||||
inputValue: NOOP_CONTROL,
|
||||
id: NOOP_CONTROL,
|
||||
inputId: NOOP_CONTROL,
|
||||
defaultValue: NOOP_CONTROL,
|
||||
loading: NOOP_CONTROL,
|
||||
'aria-label': NOOP_CONTROL,
|
||||
},
|
||||
};
|
||||
} as Meta;
|
||||
|
||||
const initialValue: SelectableValue<string> = { label: 'A label', value: 'A value' };
|
||||
|
||||
|
||||
@ -1,3 +0,0 @@
|
||||
# Switch
|
||||
|
||||
A basic docs for Switch component
|
||||
@ -1,29 +1,20 @@
|
||||
import React, { useState } from 'react';
|
||||
|
||||
import { Props, Switch } from './Switch';
|
||||
import { Story } from '@storybook/react';
|
||||
import mdx from './Switch.mdx';
|
||||
import { NOOP_CONTROL } from '../../../../utils/storybook/noopControl';
|
||||
import { Meta, Story } from '@storybook/react';
|
||||
|
||||
const getStory = (title: string, component: any) => ({
|
||||
title,
|
||||
export default {
|
||||
title: 'Forms/Legacy/Switch',
|
||||
component: Switch,
|
||||
parameters: {
|
||||
component,
|
||||
docs: {
|
||||
page: mdx,
|
||||
},
|
||||
knobs: {
|
||||
disable: true,
|
||||
},
|
||||
controls: {
|
||||
exclude: ['className', 'labelClass', 'switchClass'],
|
||||
},
|
||||
},
|
||||
argTypes: {
|
||||
className: NOOP_CONTROL,
|
||||
labelClass: NOOP_CONTROL,
|
||||
switchClass: NOOP_CONTROL,
|
||||
},
|
||||
});
|
||||
|
||||
export default getStory('Forms/Legacy/Switch', Switch);
|
||||
} as Meta;
|
||||
|
||||
const SwitchWrapper: Story<Props> = ({ label, ...args }) => {
|
||||
const [checked, setChecked] = useState(false);
|
||||
|
||||
@ -1,9 +1,8 @@
|
||||
import React from 'react';
|
||||
import { Story } from '@storybook/react';
|
||||
import { Meta, Story } from '@storybook/react';
|
||||
|
||||
import { Legend } from '@grafana/ui';
|
||||
import mdx from './Legend.mdx';
|
||||
import { NOOP_CONTROL } from '../../utils/storybook/noopControl';
|
||||
|
||||
export default {
|
||||
title: 'Forms/Legend',
|
||||
@ -15,12 +14,14 @@ export default {
|
||||
knobs: {
|
||||
disable: true,
|
||||
},
|
||||
controls: {
|
||||
exclude: ['description'],
|
||||
},
|
||||
},
|
||||
argTypes: {
|
||||
children: { name: 'Label' },
|
||||
description: NOOP_CONTROL,
|
||||
},
|
||||
};
|
||||
} as Meta;
|
||||
|
||||
export const Basic: Story = (args) => {
|
||||
return <Legend>{args.children}</Legend>;
|
||||
|
||||
@ -2,7 +2,6 @@ import React, { useState } from 'react';
|
||||
import mdx from './RadioButtonGroup.mdx';
|
||||
import { RadioButtonGroup } from './RadioButtonGroup';
|
||||
import { Story } from '@storybook/react';
|
||||
import { NOOP_CONTROL } from '../../../utils/storybook/noopControl';
|
||||
|
||||
export default {
|
||||
title: 'Forms/RadioButtonGroup',
|
||||
@ -14,6 +13,9 @@ export default {
|
||||
knobs: {
|
||||
disable: true,
|
||||
},
|
||||
controls: {
|
||||
exclude: ['className', 'options', 'value'],
|
||||
},
|
||||
},
|
||||
argTypes: {
|
||||
disabledOptions: {
|
||||
@ -21,9 +23,6 @@ export default {
|
||||
control: { type: 'select', options: ['', 'graphite', 'prometheus', 'elastic'] },
|
||||
},
|
||||
size: { control: { type: 'select' } },
|
||||
className: NOOP_CONTROL,
|
||||
options: NOOP_CONTROL,
|
||||
value: NOOP_CONTROL,
|
||||
},
|
||||
};
|
||||
|
||||
|
||||
@ -6,7 +6,6 @@ import { Story } from '@storybook/react';
|
||||
import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
|
||||
import { TooltipContentProps, TooltipMode } from '../Chart/Tooltip';
|
||||
import { JSONFormatter } from '../JSONFormatter/JSONFormatter';
|
||||
import { NOOP_CONTROL } from '../../utils/storybook/noopControl';
|
||||
import { GraphProps } from './Graph';
|
||||
|
||||
const series: GraphSeriesXY[] = [
|
||||
@ -86,6 +85,9 @@ export default {
|
||||
knobs: {
|
||||
disable: true,
|
||||
},
|
||||
controls: {
|
||||
exclude: ['className', 'series', 'timeRange', 'ariaLabel'],
|
||||
},
|
||||
},
|
||||
args: {
|
||||
series: series,
|
||||
@ -108,10 +110,6 @@ export default {
|
||||
width: { control: { type: 'range', min: 200, max: 800 } },
|
||||
height: { control: { type: 'range', min: 200, max: 800 } },
|
||||
lineWidth: { control: { type: 'range', min: 1, max: 10 } },
|
||||
className: NOOP_CONTROL,
|
||||
series: NOOP_CONTROL,
|
||||
timeRange: NOOP_CONTROL,
|
||||
ariaLabel: NOOP_CONTROL,
|
||||
},
|
||||
};
|
||||
|
||||
|
||||
@ -5,7 +5,6 @@ import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
|
||||
import { GraphWithLegend, GraphWithLegendProps } from './GraphWithLegend';
|
||||
import { LegendDisplayMode } from '../VizLegend/types';
|
||||
import { GraphSeriesXY, FieldType, ArrayVector, dateTime, FieldColorModeId } from '@grafana/data';
|
||||
import { NOOP_CONTROL } from '../../utils/storybook/noopControl';
|
||||
|
||||
export default {
|
||||
title: 'Visualizations/Graph/GraphWithLegend',
|
||||
@ -15,6 +14,9 @@ export default {
|
||||
knobs: {
|
||||
disable: true,
|
||||
},
|
||||
controls: {
|
||||
exclude: ['className', 'series', 'timeRange', 'ariaLabel', 'legendDisplayMode'],
|
||||
},
|
||||
},
|
||||
argTypes: {
|
||||
displayMode: { control: { type: 'radio', options: ['table', 'list', 'hidden'] } },
|
||||
@ -24,11 +26,6 @@ export default {
|
||||
width: { control: { type: 'range', min: 200, max: 800 } },
|
||||
height: { control: { type: 'range', min: 200, max: 800 } },
|
||||
lineWidth: { control: { type: 'range', min: 1, max: 10 } },
|
||||
className: NOOP_CONTROL,
|
||||
series: NOOP_CONTROL,
|
||||
timeRange: NOOP_CONTROL,
|
||||
ariaLabel: NOOP_CONTROL,
|
||||
legendDisplayMode: NOOP_CONTROL,
|
||||
},
|
||||
};
|
||||
|
||||
|
||||
@ -6,7 +6,6 @@ import { LegendDisplayMode, LegendPlacement } from '../VizLegend/types';
|
||||
import { prepDataForStorybook } from '../../utils/storybook/data';
|
||||
import { useTheme } from '../../themes';
|
||||
import { Story } from '@storybook/react';
|
||||
import { NOOP_CONTROL } from '../../utils/storybook/noopControl';
|
||||
|
||||
export default {
|
||||
title: 'Visualizations/GraphNG',
|
||||
@ -16,6 +15,9 @@ export default {
|
||||
knobs: {
|
||||
disable: true,
|
||||
},
|
||||
controls: {
|
||||
exclude: ['className', 'timeRange', 'data', 'legend', 'fields'],
|
||||
},
|
||||
},
|
||||
argTypes: {
|
||||
legendDisplayMode: { control: { type: 'radio', options: ['table', 'list', 'hidden'] } },
|
||||
@ -23,11 +25,6 @@ export default {
|
||||
timeZone: { control: { type: 'radio', options: ['browser', 'utc'] } },
|
||||
width: { control: { type: 'range', min: 200, max: 800 } },
|
||||
height: { control: { type: 'range', min: 200, max: 800 } },
|
||||
className: NOOP_CONTROL,
|
||||
timeRange: NOOP_CONTROL,
|
||||
data: NOOP_CONTROL,
|
||||
legend: NOOP_CONTROL,
|
||||
fields: NOOP_CONTROL,
|
||||
},
|
||||
};
|
||||
|
||||
|
||||
@ -0,0 +1,30 @@
|
||||
// This is a temporary workaround to allow theme switching storybook docs
|
||||
// see https://github.com/storybookjs/storybook/issues/10523 for further details
|
||||
import React from 'react';
|
||||
import { DocsContainer } from '@storybook/addon-docs/blocks';
|
||||
import { useDarkMode } from 'storybook-dark-mode';
|
||||
import { GrafanaLight, GrafanaDark } from '../../../.storybook/storybookTheme';
|
||||
|
||||
type Props = {
|
||||
context: any;
|
||||
};
|
||||
|
||||
export const ThemedDocsContainer: React.FC<Props> = ({ children, context }) => {
|
||||
const dark = useDarkMode();
|
||||
|
||||
return (
|
||||
<DocsContainer
|
||||
context={{
|
||||
...context,
|
||||
parameters: {
|
||||
...context.parameters,
|
||||
docs: {
|
||||
theme: dark ? GrafanaDark : GrafanaLight,
|
||||
},
|
||||
},
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
</DocsContainer>
|
||||
);
|
||||
};
|
||||
@ -1 +0,0 @@
|
||||
export const NOOP_CONTROL = { control: { disable: true } };
|
||||
Loading…
Reference in New Issue
Block a user