moving the LoadingBar to core

This commit is contained in:
polinaboneva 2022-12-08 18:24:53 +02:00
parent 257bb7fd3e
commit 11f0f4ff2f
4 changed files with 1 additions and 81 deletions

View File

@ -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} />

View File

@ -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;

View File

@ -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';

View File

@ -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