docs: create visual picker docs (#3370)

* feat(visual-picker): create package * test(visual-picker): remove fire focus event now that clicking focuses * docs(visual-picker): create docs page * chore: work on docs * chore(visual-picker): improve docs examples * chore(website): add visual picker package dep to website package json * chore: yarn lock * chore: pr feedback * chore(visual-picker, inline-control-group): make width and height equal * chore: horizontal pickers spacing * chore: colorTextWeak * chore(inline-control-group): fix so changes apply to visual picker only --------- Co-authored-by: Simon Taggart <me@simontaggart.com>
twilio-labs · Aug 9, 2023 · 1fe9f32 · 1fe9f32
1 parent 6b42044
commit 1fe9f32
Show file tree

Hide file tree

Showing 14 changed files with 1,672 additions and 308 deletions.
diff --git a/.changeset/itchy-crabs-shout.md b/.changeset/itchy-crabs-shout.md
@@ -0,0 +1,6 @@
+---
+'@twilio-paste/visual-picker': patch
+'@twilio-paste/core': patch
+---
+
+[Visual Picker] Adjust spacing to make pickers equal width and height
diff --git a/.changeset/wise-laws-laugh.md b/.changeset/wise-laws-laugh.md
@@ -0,0 +1,6 @@
+---
+'@twilio-paste/inline-control-group': patch
+'@twilio-paste/core': patch
+---
+
+[Inline control group] Adjust spacing for Visual Picker
diff --git a/cypress/integration/sitemap-vrt/constants.ts b/cypress/integration/sitemap-vrt/constants.ts
@@ -91,6 +91,7 @@ export const SITEMAP = [
   '/components/user-dialog/',
   '/components/textarea/',
   '/components/table/',
+  '/components/visual-picker/',
   '/core/',
   '/core/changelog/',
   '/core/libraries/',

diff --git a/packages/paste-core/components/inline-control-group/src/InlineControlGroup.tsx b/packages/paste-core/components/inline-control-group/src/InlineControlGroup.tsx
@@ -30,11 +30,13 @@ const InlineControlGroup = React.forwardRef<HTMLFieldSetElement, InlineControlGr
       orientation = 'vertical',
       required,
       i18nRequiredLabel,
-      fieldStyleProps, // Only used in Visual Picker
+      fieldStyleProps,
       ...props
     },
     ref
   ) => {
+    const isVisualPicker = Boolean(fieldStyleProps); // This prop is only used in Visual Picker
+
     return (
       <Box
         {...safelySpreadBoxProps(props)}
@@ -58,13 +60,17 @@ const InlineControlGroup = React.forwardRef<HTMLFieldSetElement, InlineControlGr
           {legend}
         </Label>
         {helpText && <HelpText marginTop="space0">{helpText}</HelpText>}
-        <Box element={`${element}_SET`} marginRight="space20">
-          <Box display={fieldStyleProps && orientation === 'horizontal' ? 'inline-flex' : 'block'}>
+        <Box element={`${element}_SET`} marginRight={isVisualPicker ? undefined : 'space20'}>
+          <Box
+            display={isVisualPicker && orientation === 'horizontal' ? 'inline-flex' : 'block'} // Sets equal heights for horizontal Visual Pickers
+            width={isVisualPicker ? '100%' : undefined} // Allows vertical Visual Pickers to take up the full width of the container
+          >
             {React.Children.map(children, (child, index) => {
               return (
                 <Box
                   element={`${element}_FIELD`}
                   display={orientation === 'horizontal' ? 'inline-block' : 'block'}
+                  flexBasis={isVisualPicker ? '50%' : undefined} // Makes horizontal Visual Pickers grow to fill the width of the container
                   marginTop={
                     fieldStyleProps?.marginTop
                       ? // eslint-disable-next-line unicorn/no-nested-ternary
@@ -73,13 +79,9 @@ const InlineControlGroup = React.forwardRef<HTMLFieldSetElement, InlineControlGr
                         : fieldStyleProps?.marginTop
                       : 'space40'
                   }
-                  marginRight={
-                    fieldStyleProps?.marginRight
-                      ? fieldStyleProps?.marginRight
-                      : // eslint-disable-next-line unicorn/no-nested-ternary
-                      orientation === 'horizontal'
-                      ? 'space70'
-                      : null
+                  marginRight={orientation === 'horizontal' && !isVisualPicker ? 'space70' : null}
+                  marginLeft={
+                    isVisualPicker && orientation === 'horizontal' ? (index === 0 ? 'space0' : 'space30') : 'space0' // Sets spacing between horizontal Visual Pickers except for the first one
                   }
                 >
                   {child}

diff --git a/packages/paste-core/components/visual-picker/CHANGELOG.md b/packages/paste-core/components/visual-picker/CHANGELOG.md
diff --git a/packages/paste-core/components/visual-picker/package.json b/packages/paste-core/components/visual-picker/package.json
@@ -3,7 +3,7 @@
   "version": "0.0.0",
   "category": "interaction",
   "status": "production",
-  "description": "A Visual Picker is a stylistically enhanced checkbox or radio selection element.",
+  "description": "Visual Picker is a stylistically enhanced checkbox or radio selection element.",
   "author": "Twilio Inc.",
   "license": "MIT",
   "main:dev": "src/index.tsx",

diff --git a/packages/paste-core/components/visual-picker/src/VisualPickerCheckbox.tsx b/packages/paste-core/components/visual-picker/src/VisualPickerCheckbox.tsx
@@ -42,6 +42,7 @@ export const VisualPickerCheckbox = React.forwardRef<HTMLInputElement, VisualPic
         alignItems={visualPickerCheckboxGroupContext.orientation === 'vertical' ? 'center' : 'flex-start'}
         flexDirection="row"
         height="100%"
+        width="100%"
         backgroundColor={disabled || groupIsDisabled ? 'colorBackgroundWeak' : undefined}
         borderStyle="solid"
         borderColor={pickerBorderColor}
@@ -94,7 +95,7 @@ export const VisualPickerCheckbox = React.forwardRef<HTMLInputElement, VisualPic
           </BaseRadioCheckboxControl>
         </BaseRadioCheckboxLabel>
 
-        <Box element={`${element}_CONTENT`} id={helpTextId} paddingLeft="space50">
+        <Box element={`${element}_CONTENT`} id={helpTextId} paddingLeft="space50" width="100%">
           {children}
         </Box>
       </Box>

diff --git a/packages/paste-core/components/visual-picker/src/VisualPickerRadio.tsx b/packages/paste-core/components/visual-picker/src/VisualPickerRadio.tsx
@@ -66,6 +66,7 @@ export const VisualPickerRadio = React.forwardRef<HTMLInputElement, VisualPicker
         alignItems={visualPickerRadioGroupContext.orientation === 'vertical' ? 'center' : 'flex-start'}
         flexDirection="row"
         height="100%"
+        width="100%"
         backgroundColor={disabled || groupIsDisabled ? 'colorBackgroundWeak' : undefined}
         borderStyle="solid"
         borderColor={pickerBorderColor}
@@ -121,7 +122,7 @@ export const VisualPickerRadio = React.forwardRef<HTMLInputElement, VisualPicker
             </Box>
           </BaseRadioCheckboxControl>
         </BaseRadioCheckboxLabel>
-        <Box element={`${element}_CONTENT`} id={helpTextId} paddingLeft="space50">
+        <Box element={`${element}_CONTENT`} id={helpTextId} paddingLeft="space50" width="100%">
           {children}
         </Box>
       </Box>