Skip to content

Commit e6f5b0b

Browse files
segunadebayosegunadebayo
committed
chore: add color-picker example
1 parent 9326550 commit e6f5b0b

10 files changed

Lines changed: 327 additions & 0 deletions

File tree

‎packages/react/src/components/color-picker/color-picker.stories.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ export { Controlled } from './examples/controlled'
1111
export { Disabled } from './examples/disabled'
1212
export { FormUsage } from './examples/form-usage'
1313
export { Inline } from './examples/inline'
14+
export { InsideDialog } from './examples/inside-dialog'
1415
export { InputOnly } from './examples/input-only'
1516
export { OpenControlled } from './examples/open-controlled'
1617
export { RootProvider } from './examples/root-provider'

‎packages/react/src/components/color-picker/examples/inside-dialog.tsx‎

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
import { ColorPicker, parseColor } from '@ark-ui/react/color-picker'
2+
import { Dialog } from '@ark-ui/react/dialog'
3+
import { Portal } from '@ark-ui/react/portal'
4+
import { PipetteIcon, XIcon } from 'lucide-react'
5+
import button from 'styles/button.module.css'
6+
import dialog from 'styles/dialog.module.css'
7+
import styles from 'styles/color-picker.module.css'
8+
9+
export const InsideDialog = () => (
10+
<Dialog.Root>
11+
<Dialog.Trigger className={button.Root}>Open Dialog</Dialog.Trigger>
12+
<Portal>
13+
<Dialog.Backdrop className={dialog.Backdrop} />
14+
<Dialog.Positioner className={dialog.Positioner}>
15+
<Dialog.Content className={dialog.Content}>
16+
<Dialog.CloseTrigger className={dialog.CloseTrigger}>
17+
<XIcon />
18+
</Dialog.CloseTrigger>
19+
<Dialog.Title className={dialog.Title}>Choose a color</Dialog.Title>
20+
<Dialog.Description className={dialog.Description}>
21+
Wrap the positioner in a portal so the popover appears above the dialog.
22+
</Dialog.Description>
23+
<div className={dialog.Body}>
24+
<ColorPicker.Root className={styles.Root} defaultValue={parseColor('#eb5e41')} lazyMount unmountOnExit>
25+
<ColorPicker.Label className={styles.Label}>Color</ColorPicker.Label>
26+
27+
<ColorPicker.Control className={styles.Control}>
28+
<ColorPicker.ChannelInput className={styles.Input} channel="hex" />
29+
<ColorPicker.ChannelInput className={styles.ChannelInput} channel="alpha" />
30+
<ColorPicker.Trigger className={styles.Trigger}>
31+
<div className={styles.Swatch}>
32+
<ColorPicker.TransparencyGrid className={styles.TransparencyGrid} />
33+
<ColorPicker.ValueSwatch className={styles.ValueSwatch} />
34+
</div>
35+
</ColorPicker.Trigger>
36+
</ColorPicker.Control>
37+
38+
<Portal>
39+
<ColorPicker.Positioner>
40+
<ColorPicker.Content className={styles.Content}>
41+
<ColorPicker.Area className={styles.Area}>
42+
<ColorPicker.AreaBackground className={styles.AreaBackground} />
43+
<ColorPicker.AreaThumb className={styles.AreaThumb} />
44+
</ColorPicker.Area>
45+
<div className={styles.SliderGroup}>
46+
<ColorPicker.EyeDropperTrigger className={styles.EyeDropperTrigger}>
47+
<PipetteIcon />
48+
</ColorPicker.EyeDropperTrigger>
49+
<div className={styles.ChannelSliders}>
50+
<ColorPicker.ChannelSlider className={styles.ChannelSlider} channel="hue">
51+
<ColorPicker.ChannelSliderTrack className={styles.ChannelSliderTrack} />
52+
<ColorPicker.ChannelSliderThumb className={styles.ChannelSliderThumb} />
53+
</ColorPicker.ChannelSlider>
54+
<ColorPicker.ChannelSlider className={styles.ChannelSlider} channel="alpha">
55+
<ColorPicker.TransparencyGrid className={styles.TransparencyGrid} />
56+
<ColorPicker.ChannelSliderTrack className={styles.ChannelSliderTrack} />
57+
<ColorPicker.ChannelSliderThumb className={styles.ChannelSliderThumb} />
58+
</ColorPicker.ChannelSlider>
59+
</div>
60+
</div>
61+
</ColorPicker.Content>
62+
</ColorPicker.Positioner>
63+
</Portal>
64+
<ColorPicker.HiddenInput />
65+
</ColorPicker.Root>
66+
</div>
67+
</Dialog.Content>
68+
</Dialog.Positioner>
69+
</Portal>
70+
</Dialog.Root>
71+
)

‎packages/solid/src/components/color-picker/color-picker.stories.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ export { Basic } from './examples/basic'
1010
export { Controlled } from './examples/controlled'
1111
export { Disabled } from './examples/disabled'
1212
export { Inline } from './examples/inline'
13+
export { InsideDialog } from './examples/inside-dialog'
1314
export { InputOnly } from './examples/input-only'
1415
export { OpenControlled } from './examples/open-controlled'
1516
export { RootProvider } from './examples/root-provider'

‎packages/solid/src/components/color-picker/examples/inside-dialog.tsx‎

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
import { ColorPicker, parseColor } from '@ark-ui/solid/color-picker'
2+
import { Dialog } from '@ark-ui/solid/dialog'
3+
import { Pipette, XIcon } from 'lucide-solid'
4+
import { Portal } from 'solid-js/web'
5+
import button from 'styles/button.module.css'
6+
import dialog from 'styles/dialog.module.css'
7+
import styles from 'styles/color-picker.module.css'
8+
9+
export const InsideDialog = () => (
10+
<Dialog.Root>
11+
<Dialog.Trigger class={button.Root}>Open Dialog</Dialog.Trigger>
12+
<Portal>
13+
<Dialog.Backdrop class={dialog.Backdrop} />
14+
<Dialog.Positioner class={dialog.Positioner}>
15+
<Dialog.Content class={dialog.Content}>
16+
<Dialog.CloseTrigger class={dialog.CloseTrigger}>
17+
<XIcon />
18+
</Dialog.CloseTrigger>
19+
<Dialog.Title class={dialog.Title}>Choose a color</Dialog.Title>
20+
<Dialog.Description class={dialog.Description}>
21+
Wrap the positioner in a portal so the popover appears above the dialog.
22+
</Dialog.Description>
23+
<div class={dialog.Body}>
24+
<ColorPicker.Root class={styles.Root} defaultValue={parseColor('#eb5e41')} lazyMount unmountOnExit>
25+
<ColorPicker.Label class={styles.Label}>Color</ColorPicker.Label>
26+
27+
<ColorPicker.Control class={styles.Control}>
28+
<ColorPicker.ChannelInput class={styles.Input} channel="hex" />
29+
<ColorPicker.ChannelInput class={styles.ChannelInput} channel="alpha" />
30+
<ColorPicker.Trigger class={styles.Trigger}>
31+
<div class={styles.Swatch}>
32+
<ColorPicker.TransparencyGrid class={styles.TransparencyGrid} />
33+
<ColorPicker.ValueSwatch class={styles.ValueSwatch} />
34+
</div>
35+
</ColorPicker.Trigger>
36+
</ColorPicker.Control>
37+
38+
<Portal>
39+
<ColorPicker.Positioner>
40+
<ColorPicker.Content class={styles.Content}>
41+
<ColorPicker.Area class={styles.Area}>
42+
<ColorPicker.AreaBackground class={styles.AreaBackground} />
43+
<ColorPicker.AreaThumb class={styles.AreaThumb} />
44+
</ColorPicker.Area>
45+
<div class={styles.SliderGroup}>
46+
<ColorPicker.EyeDropperTrigger class={styles.EyeDropperTrigger}>
47+
<Pipette />
48+
</ColorPicker.EyeDropperTrigger>
49+
<div class={styles.ChannelSliders}>
50+
<ColorPicker.ChannelSlider class={styles.ChannelSlider} channel="hue">
51+
<ColorPicker.ChannelSliderTrack class={styles.ChannelSliderTrack} />
52+
<ColorPicker.ChannelSliderThumb class={styles.ChannelSliderThumb} />
53+
</ColorPicker.ChannelSlider>
54+
<ColorPicker.ChannelSlider class={styles.ChannelSlider} channel="alpha">
55+
<ColorPicker.TransparencyGrid class={styles.TransparencyGrid} />
56+
<ColorPicker.ChannelSliderTrack class={styles.ChannelSliderTrack} />
57+
<ColorPicker.ChannelSliderThumb class={styles.ChannelSliderThumb} />
58+
</ColorPicker.ChannelSlider>
59+
</div>
60+
</div>
61+
</ColorPicker.Content>
62+
</ColorPicker.Positioner>
63+
</Portal>
64+
<ColorPicker.HiddenInput />
65+
</ColorPicker.Root>
66+
</div>
67+
</Dialog.Content>
68+
</Dialog.Positioner>
69+
</Portal>
70+
</Dialog.Root>
71+
)

‎packages/svelte/src/lib/components/color-picker/color-picker.stories.ts‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import BasicExample from './examples/basic.svelte'
33
import ControlledExample from './examples/controlled.svelte'
44
import DisabledExample from './examples/disabled.svelte'
55
import InlineExample from './examples/inline.svelte'
6+
import InsideDialogExample from './examples/inside-dialog.svelte'
67
import InputOnlyExample from './examples/input-only.svelte'
78
import OpenControlledExample from './examples/open-controlled.svelte'
89
import RootProviderExample from './examples/root-provider.svelte'
@@ -42,6 +43,12 @@ export const Inline = {
4243
}),
4344
}
4445

46+
export const InsideDialog = {
47+
render: () => ({
48+
Component: InsideDialogExample,
49+
}),
50+
}
51+
4552
export const InputOnly = {
4653
render: () => ({
4754
Component: InputOnlyExample,

‎packages/svelte/src/lib/components/color-picker/examples/inside-dialog.svelte‎

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
<script lang="ts">
2+
import { ColorPicker, parseColor } from '@ark-ui/svelte/color-picker'
3+
import { Dialog } from '@ark-ui/svelte/dialog'
4+
import { Portal } from '@ark-ui/svelte/portal'
5+
import { Pipette, XIcon } from 'lucide-svelte'
6+
import button from 'styles/button.module.css'
7+
import dialog from 'styles/dialog.module.css'
8+
import styles from 'styles/color-picker.module.css'
9+
</script>
10+
11+
<Dialog.Root>
12+
<Dialog.Trigger class={button.Root}>Open Dialog</Dialog.Trigger>
13+
<Portal>
14+
<Dialog.Backdrop class={dialog.Backdrop} />
15+
<Dialog.Positioner class={dialog.Positioner}>
16+
<Dialog.Content class={dialog.Content}>
17+
<Dialog.CloseTrigger class={dialog.CloseTrigger}>
18+
<XIcon />
19+
</Dialog.CloseTrigger>
20+
<Dialog.Title class={dialog.Title}>Choose a color</Dialog.Title>
21+
<Dialog.Description class={dialog.Description}>
22+
Wrap the positioner in a portal so the popover appears above the dialog.
23+
</Dialog.Description>
24+
<div class={dialog.Body}>
25+
<ColorPicker.Root class={styles.Root} defaultValue={parseColor('#eb5e41')} lazyMount unmountOnExit>
26+
<ColorPicker.Label class={styles.Label}>Color</ColorPicker.Label>
27+
28+
<ColorPicker.Control class={styles.Control}>
29+
<ColorPicker.ChannelInput class={styles.Input} channel="hex" />
30+
<ColorPicker.ChannelInput class={styles.ChannelInput} channel="alpha" />
31+
<ColorPicker.Trigger class={styles.Trigger}>
32+
<div class={styles.Swatch}>
33+
<ColorPicker.TransparencyGrid class={styles.TransparencyGrid} />
34+
<ColorPicker.ValueSwatch class={styles.ValueSwatch} />
35+
</div>
36+
</ColorPicker.Trigger>
37+
</ColorPicker.Control>
38+
39+
<Portal>
40+
<ColorPicker.Positioner>
41+
<ColorPicker.Content class={styles.Content}>
42+
<ColorPicker.Area class={styles.Area}>
43+
<ColorPicker.AreaBackground class={styles.AreaBackground} />
44+
<ColorPicker.AreaThumb class={styles.AreaThumb} />
45+
</ColorPicker.Area>
46+
<div class={styles.SliderGroup}>
47+
<ColorPicker.EyeDropperTrigger class={styles.EyeDropperTrigger}>
48+
<Pipette />
49+
</ColorPicker.EyeDropperTrigger>
50+
<div class={styles.ChannelSliders}>
51+
<ColorPicker.ChannelSlider class={styles.ChannelSlider} channel="hue">
52+
<ColorPicker.ChannelSliderTrack class={styles.ChannelSliderTrack} />
53+
<ColorPicker.ChannelSliderThumb class={styles.ChannelSliderThumb} />
54+
</ColorPicker.ChannelSlider>
55+
<ColorPicker.ChannelSlider class={styles.ChannelSlider} channel="alpha">
56+
<ColorPicker.TransparencyGrid class={styles.TransparencyGrid} />
57+
<ColorPicker.ChannelSliderTrack class={styles.ChannelSliderTrack} />
58+
<ColorPicker.ChannelSliderThumb class={styles.ChannelSliderThumb} />
59+
</ColorPicker.ChannelSlider>
60+
</div>
61+
</div>
62+
</ColorPicker.Content>
63+
</ColorPicker.Positioner>
64+
</Portal>
65+
<ColorPicker.HiddenInput />
66+
</ColorPicker.Root>
67+
</div>
68+
</Dialog.Content>
69+
</Dialog.Positioner>
70+
</Portal>
71+
</Dialog.Root>

‎packages/vue/src/components/color-picker/color-picker.stories.ts‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import BasicExample from './examples/basic.vue'
44
import ControlledExample from './examples/controlled.vue'
55
import DisabledExample from './examples/disabled.vue'
66
import InlineExample from './examples/inline.vue'
7+
import InsideDialogExample from './examples/inside-dialog.vue'
78
import InputOnlyExample from './examples/input-only.vue'
89
import OpenControlledExample from './examples/open-controlled.vue'
910
import RootProviderExample from './examples/root-provider.vue'
@@ -47,6 +48,13 @@ export const Inline = {
4748
}),
4849
}
4950

51+
export const InsideDialog = {
52+
render: () => ({
53+
components: { Component: InsideDialogExample },
54+
template: '<Component />',
55+
}),
56+
}
57+
5058
export const InputOnly = {
5159
render: () => ({
5260
components: { Component: InputOnlyExample },

‎packages/vue/src/components/color-picker/examples/inside-dialog.vue‎

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
<script setup lang="ts">
2+
import { ColorPicker, parseColor } from '@ark-ui/vue/color-picker'
3+
import { Dialog } from '@ark-ui/vue/dialog'
4+
import { Pipette, XIcon } from 'lucide-vue-next'
5+
import { Teleport } from 'vue'
6+
import button from 'styles/button.module.css'
7+
import dialog from 'styles/dialog.module.css'
8+
import styles from 'styles/color-picker.module.css'
9+
</script>
10+
11+
<template>
12+
<Dialog.Root>
13+
<Dialog.Trigger :class="button.Root">Open Dialog</Dialog.Trigger>
14+
<Teleport to="body">
15+
<Dialog.Backdrop :class="dialog.Backdrop" />
16+
<Dialog.Positioner :class="dialog.Positioner">
17+
<Dialog.Content :class="dialog.Content">
18+
<Dialog.CloseTrigger :class="dialog.CloseTrigger">
19+
<XIcon />
20+
</Dialog.CloseTrigger>
21+
<Dialog.Title :class="dialog.Title">Choose a color</Dialog.Title>
22+
<Dialog.Description :class="dialog.Description">
23+
Wrap the positioner in a portal so the popover appears above the dialog.
24+
</Dialog.Description>
25+
<div :class="dialog.Body">
26+
<ColorPicker.Root :class="styles.Root" :default-value="parseColor('#eb5e41')" lazy-mount unmount-on-exit>
27+
<ColorPicker.Label :class="styles.Label">Color</ColorPicker.Label>
28+
29+
<ColorPicker.Control :class="styles.Control">
30+
<ColorPicker.ChannelInput :class="styles.Input" channel="hex" />
31+
<ColorPicker.ChannelInput :class="styles.ChannelInput" channel="alpha" />
32+
<ColorPicker.Trigger :class="styles.Trigger">
33+
<div :class="styles.Swatch">
34+
<ColorPicker.TransparencyGrid :class="styles.TransparencyGrid" />
35+
<ColorPicker.ValueSwatch :class="styles.ValueSwatch" />
36+
</div>
37+
</ColorPicker.Trigger>
38+
</ColorPicker.Control>
39+
40+
<Teleport to="body">
41+
<ColorPicker.Positioner>
42+
<ColorPicker.Content :class="styles.Content">
43+
<ColorPicker.Area :class="styles.Area">
44+
<ColorPicker.AreaBackground :class="styles.AreaBackground" />
45+
<ColorPicker.AreaThumb :class="styles.AreaThumb" />
46+
</ColorPicker.Area>
47+
<div :class="styles.SliderGroup">
48+
<ColorPicker.EyeDropperTrigger :class="styles.EyeDropperTrigger">
49+
<Pipette />
50+
</ColorPicker.EyeDropperTrigger>
51+
<div :class="styles.ChannelSliders">
52+
<ColorPicker.ChannelSlider :class="styles.ChannelSlider" channel="hue">
53+
<ColorPicker.ChannelSliderTrack :class="styles.ChannelSliderTrack" />
54+
<ColorPicker.ChannelSliderThumb :class="styles.ChannelSliderThumb" />
55+
</ColorPicker.ChannelSlider>
56+
<ColorPicker.ChannelSlider :class="styles.ChannelSlider" channel="alpha">
57+
<ColorPicker.TransparencyGrid :class="styles.TransparencyGrid" />
58+
<ColorPicker.ChannelSliderTrack :class="styles.ChannelSliderTrack" />
59+
<ColorPicker.ChannelSliderThumb :class="styles.ChannelSliderThumb" />
60+
</ColorPicker.ChannelSlider>
61+
</div>
62+
</div>
63+
</ColorPicker.Content>
64+
</ColorPicker.Positioner>
65+
</Teleport>
66+
<ColorPicker.HiddenInput />
67+
</ColorPicker.Root>
68+
</div>
69+
</Dialog.Content>
70+
</Dialog.Positioner>
71+
</Teleport>
72+
</Dialog.Root>
73+
</template>

‎website/src/content/pages/components/color-picker.mdx‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -119,6 +119,12 @@ Integrate the color picker with form libraries like React Hook Form using the `H
119119

120120
<Example id="form-usage" />
121121

122+
### Inside Dialog
123+
124+
Here's an example of how to use the color picker inside a dialog.
125+
126+
<Example id="inside-dialog" />
127+
122128
## API Reference
123129

124130
### Props

0 commit comments

Comments
 (0)