mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
moving the LoadingBar to core
This commit is contained in:
parent
257bb7fd3e
commit
11f0f4ff2f
@ -1,22 +0,0 @@
|
||||
import { Meta, Preview, ArgsTable } from '@storybook/addon-docs/blocks';
|
||||
import { LoadingBar } from './LoadingBar';
|
||||
|
||||
<Meta title="MDX|LoadingBar" component={LoadingBar} />
|
||||
|
||||
# LoadingBar
|
||||
|
||||
The LoadingBar is used as a simple loading slider animation in the top of its container.
|
||||
|
||||
<Preview>
|
||||
<div style={{ height: '200px', width: '400px' }}>
|
||||
<LoadingBar containerWidth={400} height={2} width={128} />
|
||||
</div>
|
||||
</Preview>
|
||||
|
||||
```jsx
|
||||
<div style={{ height: '200px', width: '400px' }}>
|
||||
<LoadingBar containerWidth={400} height={2} width={128} />
|
||||
</div>
|
||||
```
|
||||
|
||||
<ArgsTable of={LoadingBar} />
|
@ -1,56 +0,0 @@
|
||||
import { css } from '@emotion/css';
|
||||
import { ComponentMeta, ComponentStory } from '@storybook/react';
|
||||
import React from 'react';
|
||||
|
||||
import { GrafanaTheme2 } from '@grafana/data';
|
||||
import { LoadingBar, LoadingBarProps, useStyles2 } from '@grafana/ui';
|
||||
|
||||
import { DashboardStoryCanvas } from '../../utils/storybook/DashboardStoryCanvas';
|
||||
import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
|
||||
|
||||
import mdx from './LoadingBar.mdx';
|
||||
|
||||
const meta: ComponentMeta<typeof LoadingBar> = {
|
||||
title: 'General/LoadingBar',
|
||||
component: LoadingBar,
|
||||
decorators: [withCenteredStory],
|
||||
parameters: {
|
||||
controls: {},
|
||||
docs: {
|
||||
page: mdx,
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
const getStyles = (theme: GrafanaTheme2) => {
|
||||
const { borderColor } = theme.components.panel;
|
||||
|
||||
return {
|
||||
container: css({
|
||||
label: 'placeholder-container',
|
||||
width: '400px',
|
||||
height: '200px',
|
||||
border: `1px solid ${borderColor}`,
|
||||
borderRadius: '3px',
|
||||
}),
|
||||
};
|
||||
};
|
||||
|
||||
export const Basic: ComponentStory<typeof LoadingBar> = (args: LoadingBarProps) => {
|
||||
const styles = useStyles2(getStyles);
|
||||
|
||||
return (
|
||||
<DashboardStoryCanvas>
|
||||
<div className={styles.container}>
|
||||
<LoadingBar {...args} />
|
||||
</div>
|
||||
</DashboardStoryCanvas>
|
||||
);
|
||||
};
|
||||
|
||||
Basic.args = {
|
||||
width: '128px',
|
||||
height: '2px',
|
||||
};
|
||||
|
||||
export default meta;
|
@ -24,7 +24,6 @@ export { ButtonCascader } from './ButtonCascader/ButtonCascader';
|
||||
export { InlineToast } from './InlineToast/InlineToast';
|
||||
|
||||
export { LoadingPlaceholder, type LoadingPlaceholderProps } from './LoadingPlaceholder/LoadingPlaceholder';
|
||||
export { LoadingBar, type LoadingBarProps } from './LoadingBar/LoadingBar';
|
||||
export { ColorPicker, SeriesColorPicker } from './ColorPicker/ColorPicker';
|
||||
export { ColorPickerInput } from './ColorPicker/ColorPickerInput';
|
||||
export { SeriesColorPickerPopover, SeriesColorPickerPopoverWithTheme } from './ColorPicker/SeriesColorPickerPopover';
|
||||
|
@ -2,8 +2,7 @@ import { css, keyframes } from '@emotion/css';
|
||||
import React from 'react';
|
||||
|
||||
import { GrafanaTheme2 } from '@grafana/data';
|
||||
|
||||
import { useStyles2 } from '../../themes';
|
||||
import { useStyles2 } from '@grafana/ui/src/themes';
|
||||
|
||||
/**
|
||||
* @internal
|
Loading…
Reference in New Issue
Block a user