Skip to content

Specific control types in storybook controls #537

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 11 commits into from
Oct 17, 2023
Merged

Specific control types in storybook controls #537

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
eb06067
Specific control types in storybook controls
bjarnef Jul 18, 2023
7064177
Set initial value on opacity story to 50% opacity
bjarnef Jul 18, 2023
b8854a9
Run formatting
bjarnef Jul 24, 2023
7edec70
Merge branch 'v1/contrib' into feature/color-story-control-types
bjarnef Jul 24, 2023
c602906
Merge branch 'v1/contrib' into feature/color-story-control-types
bjarnef Aug 14, 2023
9849b57
Merge branch 'v1/contrib' into feature/color-story-control-types
bjarnef Oct 3, 2023
681ed23
Merge branch 'v1/contrib' into feature/color-story-control-types
bjarnef Oct 6, 2023
d82f8bf
Merge branch 'v1/contrib' into feature/color-story-control-types
bjarnef Oct 10, 2023
48e709f
Merge branch 'v1/contrib' into feature/color-story-control-types
bjarnef Oct 14, 2023
19081ee
Update support for HSV
bjarnef Oct 14, 2023
9d56206
Merge branch 'v1/contrib' into feature/color-story-control-types
iOvergaard Oct 17, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
26 changes: 18 additions & 8 deletions packages/uui-color-picker/lib/uui-color-picker.story.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,9 @@ const defaultSwatches = [
'#fff',
];

const formats = ['hex', 'rgb', 'hsl', 'hsv'];
const sizes = ['small', 'medium', 'large'];

const meta: Meta<UUIColorPickerElement> = {
id: 'uui-color-picker',
title: 'Inputs/Color/Color Picker',
Expand All @@ -42,6 +45,20 @@ const meta: Meta<UUIColorPickerElement> = {
inline: false,
swatches: defaultSwatches,
format: 'hex',
size: 'medium',
},
argTypes: {
format: {
options: formats,
control: { type: 'select' },
},
size: {
options: sizes,
control: { type: 'select' },
},
value: {
control: { type: 'color' },
},
},
parameters: {
readme: {
Expand Down Expand Up @@ -91,6 +108,7 @@ export const Disabled: Story = {
export const WithOpacity: Story = {
args: {
opacity: true,
value: 'rgba(0, 0, 0, 0.5)',
},
parameters: {
docs: {
Expand All @@ -101,8 +119,6 @@ export const WithOpacity: Story = {
},
};

const formats = ['hex', 'rgb', 'hsl'];

export const Formats: Story = {
args: {
format: 'hex',
Expand All @@ -115,12 +131,6 @@ export const Formats: Story = {
${story()}
</div> `,
],
argTypes: {
format: {
options: formats,
control: { type: 'select' },
},
},
parameters: {
docs: {
source: {
Expand Down
8 changes: 8 additions & 0 deletions packages/uui-color-slider/lib/uui-color-slider.story.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,8 @@ import readme from '../README.md?raw';

import './uui-color-slider.element';

const types = ['hue', 'opacity'];

const meta: Meta<UUIColorSliderElement> = {
id: 'uui-color-slider',
title: 'Inputs/Color/Color Slider',
Expand All @@ -19,6 +21,12 @@ const meta: Meta<UUIColorSliderElement> = {
type: 'hue',
color: '',
},
argTypes: {
type: {
options: types,
control: { type: 'select' },
},
},
parameters: {
readme: {
markdown: readme,
Expand Down