dev: add narrow UpObject story to test overflow/ellipsis
parent
0b488d9384
commit
894faa94ae
|
@ -0,0 +1,11 @@
|
||||||
|
<div class="narrow">
|
||||||
|
<slot />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.narrow {
|
||||||
|
width: 256px;
|
||||||
|
border: 1px dashed red;
|
||||||
|
padding: 1em 0;
|
||||||
|
}
|
||||||
|
</style>
|
|
@ -1,6 +1,7 @@
|
||||||
import type { Meta, StoryObj } from '@storybook/svelte';
|
import type { Meta, StoryObj } from '@storybook/svelte';
|
||||||
import UpObject from '../lib/components/display/UpObject.svelte';
|
import UpObject from '../lib/components/display/UpObject.svelte';
|
||||||
import { videoAddress } from './common';
|
import { videoAddress } from './common';
|
||||||
|
import NarrowDecorator from './NarrowDecorator.svelte';
|
||||||
|
|
||||||
const address = videoAddress;
|
const address = videoAddress;
|
||||||
|
|
||||||
|
@ -20,8 +21,7 @@ const meta: Meta<UpObject> = {
|
||||||
onResolved: {
|
onResolved: {
|
||||||
action: 'resolved'
|
action: 'resolved'
|
||||||
}
|
}
|
||||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
}
|
||||||
} as any
|
|
||||||
};
|
};
|
||||||
|
|
||||||
export default meta;
|
export default meta;
|
||||||
|
@ -54,3 +54,10 @@ export const BannerWithLabels: Story = {
|
||||||
labels: ['Label 1', 'Label B', 'Label III']
|
labels: ['Label 1', 'Label B', 'Label III']
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
export const Overflow: Story = {
|
||||||
|
args: {
|
||||||
|
labels: ['qwertyuiopasdfghjklzxcvbnmqwertyuiopasdfghjklzxcvbnm'.repeat(3)]
|
||||||
|
},
|
||||||
|
decorators: [() => NarrowDecorator as any]
|
||||||
|
};
|
||||||
|
|
Loading…
Reference in New Issue