-
Notifications
You must be signed in to change notification settings - Fork 2.7k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
docs(react-swatch-picker): Added stories for Size, Shape and Spacing (#…
- Loading branch information
1 parent
cbd6654
commit fd89630
Showing
6 changed files
with
236 additions
and
1 deletion.
There are no files selected for viewing
8 changes: 7 additions & 1 deletion
8
...components/react-swatch-picker-preview/stories/ColorSwatch/ColorSwatchDefault.stories.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,4 +1,10 @@ | ||
import * as React from 'react'; | ||
import { ColorSwatch } from '@fluentui/react-swatch-picker-preview'; | ||
|
||
export const Default = () => <ColorSwatch color="red" value="red-color" aria-label="Red" />; | ||
export const Default = () => ( | ||
<> | ||
<ColorSwatch color="purple" value="purple-color" aria-label="Purple" /> | ||
<ColorSwatch color="#E3008C" value="hot-pink-color" aria-label="Hot pink" /> | ||
<ColorSwatch color="linear-gradient(0deg, #E3008C, #fff232)" value="gradient" aria-label="Gradient yellow pink" /> | ||
</> | ||
); |
86 changes: 86 additions & 0 deletions
86
...components/react-swatch-picker-preview/stories/SwatchPicker/SwatchPickerPopup.stories.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,86 @@ | ||
import * as React from 'react'; | ||
import { makeStyles, shorthands, Button, Popover, PopoverSurface, PopoverTrigger } from '@fluentui/react-components'; | ||
import { SwatchPicker, SwatchPickerOnSelectEventHandler, ColorSwatch } from '@fluentui/react-swatch-picker-preview'; | ||
|
||
const useStyles = makeStyles({ | ||
example: { | ||
width: '100px', | ||
height: '100px', | ||
...shorthands.border('1px', 'solid', '#ccc'), | ||
...shorthands.margin('20px', '0'), | ||
}, | ||
}); | ||
|
||
const colors = [ | ||
{ color: '#FF1921', value: 'FF1921', 'aria-label': 'red' }, | ||
{ color: '#FFC12E', value: 'FFC12E', 'aria-label': 'orange' }, | ||
{ color: '#FEFF37', value: 'FEFF37', 'aria-label': 'yellow' }, | ||
{ color: '#90D057', value: '90D057', 'aria-label': 'light green' }, | ||
{ color: '#00B053', value: '00B053', 'aria-label': 'green' }, | ||
{ color: '#00AFED', value: '00AFED', 'aria-label': 'light blue' }, | ||
{ color: '#006EBD', value: '006EBD', 'aria-label': 'blue' }, | ||
{ color: '#712F9E', value: '712F9E', 'aria-label': 'purple' }, | ||
]; | ||
|
||
const gradientColors = [ | ||
{ color: 'linear-gradient(0deg, #FF1921, #FFB92E)', value: 'orange-red', 'aria-label': 'gradient orange-red' }, | ||
{ color: 'linear-gradient(0deg, #FFC12E, #FEFF37)', value: 'yellow-orange', 'aria-label': 'gradient yellow-orange' }, | ||
{ color: 'linear-gradient(0deg, #90D057, #FEFF37)', value: 'yellow-green', 'aria-label': 'gradient yellow-green' }, | ||
{ | ||
color: 'linear-gradient(0deg, #00B053, #90D057)', | ||
value: 'light-green-gradient', | ||
'aria-label': 'gradient light green', | ||
}, | ||
{ color: 'linear-gradient(0deg, #00B053, #00AFED)', value: 'green-blue', 'aria-label': 'gradient green-blue' }, | ||
{ color: 'linear-gradient(0deg, #006EBD, #00AFED)', value: 'blue gradient', 'aria-label': 'gradient blue' }, | ||
{ color: 'linear-gradient(0deg, #712F9E, #00AFED)', value: 'blue-purple', 'aria-label': 'gradient blue-purple' }, | ||
{ | ||
color: | ||
'linear-gradient(0deg, #FF1921 0%, #FFC12E 10%, #FEFF37 20%, #90D057 30%, #00B053 40%, #00AFED 50%, #006EBD 60%, #011F5E 70%, #712F9E 80%)', | ||
value: 'gradient', | ||
'aria-label': 'gradient', | ||
}, | ||
]; | ||
|
||
export const SwatchPickerPopup = () => { | ||
const [selectedValue, setSelectedValue] = React.useState('00B053'); | ||
const [selectedColor, setSelectedColor] = React.useState('#00B053'); | ||
|
||
const handleSelect: SwatchPickerOnSelectEventHandler = (_, data) => { | ||
setSelectedValue(data.selectedValue); | ||
setSelectedColor(data.selectedColor); | ||
}; | ||
|
||
const styles = useStyles(); | ||
|
||
return ( | ||
<> | ||
<Popover trapFocus> | ||
<PopoverTrigger disableButtonEnhancement> | ||
<Button>Choose color</Button> | ||
</PopoverTrigger> | ||
|
||
<PopoverSurface> | ||
<h3>Color set 1</h3> | ||
<SwatchPicker aria-label="SwatchPicker set 1" selectedValue={selectedValue} onSelectionChange={handleSelect}> | ||
{colors.map((color, index) => { | ||
return <ColorSwatch key={`${color.value}-${index}`} {...color} />; | ||
})} | ||
</SwatchPicker> | ||
<h3>Color set 2</h3> | ||
<SwatchPicker aria-label="SwatchPicker set 2" selectedValue={selectedValue} onSelectionChange={handleSelect}> | ||
{gradientColors.map((color, index) => { | ||
return <ColorSwatch key={`${color.value}-${index}`} {...color} />; | ||
})} | ||
</SwatchPicker> | ||
</PopoverSurface> | ||
</Popover> | ||
<div | ||
className={styles.example} | ||
style={{ | ||
background: selectedColor, | ||
}} | ||
/> | ||
</> | ||
); | ||
}; |
46 changes: 46 additions & 0 deletions
46
...components/react-swatch-picker-preview/stories/SwatchPicker/SwatchPickerShape.stories.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,46 @@ | ||
import * as React from 'react'; | ||
import { makeStyles, shorthands } from '@fluentui/react-components'; | ||
import { SwatchPicker, ColorSwatch } from '@fluentui/react-swatch-picker-preview'; | ||
|
||
const useStyles = makeStyles({ | ||
example: { | ||
display: 'flex', | ||
flexDirection: 'column', | ||
...shorthands.gap('10px'), | ||
}, | ||
}); | ||
|
||
const colors = [ | ||
{ color: '#FF1921', value: 'FF1921', 'aria-label': 'red' }, | ||
{ color: '#FFC12E', value: 'FFC12E', 'aria-label': 'orange' }, | ||
{ color: '#FEFF37', value: 'FEFF37', 'aria-label': 'yellow' }, | ||
{ color: '#90D057', value: '90D057', 'aria-label': 'light green' }, | ||
{ color: '#00B053', value: '00B053', 'aria-label': 'green' }, | ||
{ color: '#00AFED', value: '00AFED', 'aria-label': 'light blue' }, | ||
{ color: '#006EBD', value: '006EBD', 'aria-label': 'blue' }, | ||
{ color: '#011F5E', value: '011F5E', 'aria-label': 'dark blue' }, | ||
{ color: '#712F9E', value: '712F9E', 'aria-label': 'purple' }, | ||
]; | ||
|
||
export const SwatchPickerShape = () => { | ||
const styles = useStyles(); | ||
return ( | ||
<div className={styles.example}> | ||
<SwatchPicker aria-label="SwatchPicker square shape"> | ||
{colors.map((color, index) => { | ||
return <ColorSwatch key={`${color.value}-${index}`} {...color} />; | ||
})} | ||
</SwatchPicker> | ||
<SwatchPicker aria-label="SwatchPicker circular shape" shape="circular"> | ||
{colors.map((color, index) => { | ||
return <ColorSwatch key={`${color.value}-${index}`} {...color} />; | ||
})} | ||
</SwatchPicker> | ||
<SwatchPicker aria-label="SwatchPicker rounded shape" shape="rounded"> | ||
{colors.map((color, index) => { | ||
return <ColorSwatch key={`${color.value}-${index}`} {...color} />; | ||
})} | ||
</SwatchPicker> | ||
</div> | ||
); | ||
}; |
51 changes: 51 additions & 0 deletions
51
...-components/react-swatch-picker-preview/stories/SwatchPicker/SwatchPickerSize.stories.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,51 @@ | ||
import * as React from 'react'; | ||
import { makeStyles, shorthands } from '@fluentui/react-components'; | ||
import { SwatchPicker, ColorSwatch } from '@fluentui/react-swatch-picker-preview'; | ||
|
||
const useStyles = makeStyles({ | ||
example: { | ||
display: 'flex', | ||
flexDirection: 'column', | ||
...shorthands.gap('10px'), | ||
}, | ||
}); | ||
|
||
const colors = [ | ||
{ color: '#FF1921', value: 'FF1921', 'aria-label': 'red' }, | ||
{ color: '#FFC12E', value: 'FFC12E', 'aria-label': 'orange' }, | ||
{ color: '#FEFF37', value: 'FEFF37', 'aria-label': 'yellow' }, | ||
{ color: '#90D057', value: '90D057', 'aria-label': 'light green' }, | ||
{ color: '#00B053', value: '00B053', 'aria-label': 'green' }, | ||
{ color: '#00AFED', value: '00AFED', 'aria-label': 'light blue' }, | ||
{ color: '#006EBD', value: '006EBD', 'aria-label': 'blue' }, | ||
{ color: '#011F5E', value: '011F5E', 'aria-label': 'dark blue' }, | ||
{ color: '#712F9E', value: '712F9E', 'aria-label': 'purple' }, | ||
]; | ||
|
||
export const SwatchPickerSize = () => { | ||
const styles = useStyles(); | ||
return ( | ||
<div className={styles.example}> | ||
<SwatchPicker aria-label="SwatchPicker large size" size="large"> | ||
{colors.map((color, index) => { | ||
return <ColorSwatch key={`${color.value}-${index}`} {...color} />; | ||
})} | ||
</SwatchPicker> | ||
<SwatchPicker aria-label="SwatchPicker medium size"> | ||
{colors.map((color, index) => { | ||
return <ColorSwatch key={`${color.value}-${index}`} {...color} />; | ||
})} | ||
</SwatchPicker> | ||
<SwatchPicker aria-label="SwatchPicker small size" size="small"> | ||
{colors.map((color, index) => { | ||
return <ColorSwatch key={`${color.value}-${index}`} {...color} />; | ||
})} | ||
</SwatchPicker> | ||
<SwatchPicker aria-label="SwatchPicker extra small size" size="extraSmall"> | ||
{colors.map((color, index) => { | ||
return <ColorSwatch key={`${color.value}-${index}`} {...color} />; | ||
})} | ||
</SwatchPicker> | ||
</div> | ||
); | ||
}; |
42 changes: 42 additions & 0 deletions
42
...mponents/react-swatch-picker-preview/stories/SwatchPicker/SwatchPickerSpacing.stories.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,42 @@ | ||
import * as React from 'react'; | ||
import { makeStyles, shorthands } from '@fluentui/react-components'; | ||
import { SwatchPicker, ColorSwatch } from '@fluentui/react-swatch-picker-preview'; | ||
|
||
const useStyles = makeStyles({ | ||
example: { | ||
display: 'flex', | ||
flexDirection: 'column', | ||
...shorthands.gap('10px'), | ||
}, | ||
}); | ||
|
||
const colors = [ | ||
{ color: '#FF1921', value: 'FF1921', 'aria-label': 'red' }, | ||
{ color: '#FFC12E', value: 'FFC12E', 'aria-label': 'orange' }, | ||
{ color: '#FEFF37', value: 'FEFF37', 'aria-label': 'yellow' }, | ||
{ color: '#90D057', value: '90D057', 'aria-label': 'light green' }, | ||
{ color: '#00B053', value: '00B053', 'aria-label': 'green' }, | ||
{ color: '#00AFED', value: '00AFED', 'aria-label': 'light blue' }, | ||
{ color: '#006EBD', value: '006EBD', 'aria-label': 'blue' }, | ||
{ color: '#011F5E', value: '011F5E', 'aria-label': 'dark blue' }, | ||
{ color: '#712F9E', value: '712F9E', 'aria-label': 'purple' }, | ||
]; | ||
|
||
export const SwatchPickerSpacing = () => { | ||
const styles = useStyles(); | ||
|
||
return ( | ||
<div className={styles.example}> | ||
<SwatchPicker aria-label="SwatchPicker medium spacing"> | ||
{colors.map((color, index) => { | ||
return <ColorSwatch key={`${color.value}-${index}`} {...color} />; | ||
})} | ||
</SwatchPicker> | ||
<SwatchPicker aria-label="SwatchPicker small spacing" spacing="small"> | ||
{colors.map((color, index) => { | ||
return <ColorSwatch key={`${color.value}-${index}`} {...color} />; | ||
})} | ||
</SwatchPicker> | ||
</div> | ||
); | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters