feat(visual-picker): create package (#3350)

twilio-labs · Aug 3, 2023 · 360d799 · 360d799
1 parent c4a70d9
commit 360d799
Show file tree

Hide file tree

Showing 35 changed files with 2,818 additions and 60 deletions.
diff --git a/.changeset/fresh-shrimps-serve.md b/.changeset/fresh-shrimps-serve.md
@@ -0,0 +1,7 @@
+---
+'@twilio-paste/checkbox': patch
+'@twilio-paste/radio-group': patch
+'@twilio-paste/core': patch
+---
+
+[Checkbox, Radio Group] export HiddenRadio, HiddenRadioState, HiddenCheckbox, and CheckboxIcon from package for use in Visual Picker package
diff --git a/.changeset/green-gorillas-melt.md b/.changeset/green-gorillas-melt.md
@@ -0,0 +1,6 @@
+---
+'@twilio-paste/inline-control-group': patch
+'@twilio-paste/core': patch
+---
+
+[Inline control group] add new `fieldStyleProps` property to enable overriding styles for visual picker
diff --git a/.changeset/silver-melons-learn.md b/.changeset/silver-melons-learn.md
@@ -0,0 +1,6 @@
+---
+'@twilio-paste/base-radio-checkbox': patch
+'@twilio-paste/core': patch
+---
+
+[Base Radio Checkbox] add new prop `applyHoverStyles` for extended styling abilities
diff --git a/.changeset/smart-dancers-try.md b/.changeset/smart-dancers-try.md
@@ -0,0 +1,6 @@
+---
+'@twilio-paste/visual-picker': major
+'@twilio-paste/core': minor
+---
+
+[Visual Picker] Create new Visual Picker package for stylized radio and checkbox groups
diff --git a/.changeset/two-toes-warn.md b/.changeset/two-toes-warn.md
@@ -0,0 +1,5 @@
+---
+'@twilio-paste/codemods': patch
+---
+
+[Codemods] new Visual Picker exports
diff --git a/.changeset/yellow-jeans-agree.md b/.changeset/yellow-jeans-agree.md
@@ -0,0 +1,6 @@
+---
+'@twilio-paste/callout': patch
+'@twilio-paste/core': patch
+---
+
+[Callout] Remove CalloutHeading propTypes
diff --git a/.codesandbox/ci.json b/.codesandbox/ci.json
@@ -104,7 +104,8 @@
     "/packages/paste-types",
     "/packages/paste-libraries/uid",
     "/packages/paste-core/components/user-dialog",
-    "/packages/paste-utils"
+    "/packages/paste-utils",
+    "/packages/paste-core/components/visual-picker"
   ],
   "sandboxes": [
     "/packages/paste-nextjs-template",

diff --git a/packages/paste-codemods/tools/.cache/mappings.json b/packages/paste-codemods/tools/.cache/mappings.json
@@ -62,6 +62,8 @@
   "Checkbox": "@twilio-paste/core/checkbox",
   "CheckboxDisclaimer": "@twilio-paste/core/checkbox",
   "CheckboxGroup": "@twilio-paste/core/checkbox",
+  "CheckboxIcon": "@twilio-paste/core/checkbox",
+  "HiddenCheckbox": "@twilio-paste/core/checkbox",
   "CodeBlock": "@twilio-paste/core/code-block",
   "CodeBlockHeader": "@twilio-paste/core/code-block",
   "CodeBlockTab": "@twilio-paste/core/code-block",
@@ -210,6 +212,7 @@
   "ProgressSteps": "@twilio-paste/core/progress-steps",
   "RadioButton": "@twilio-paste/core/radio-button-group",
   "RadioButtonGroup": "@twilio-paste/core/radio-button-group",
+  "HiddenRadio": "@twilio-paste/core/radio-group",
   "Radio": "@twilio-paste/core/radio-group",
   "RadioGroup": "@twilio-paste/core/radio-group",
   "ScreenReaderOnly": "@twilio-paste/core/screen-reader-only",
@@ -304,6 +307,10 @@
   "UserDialogUserName": "@twilio-paste/core/user-dialog",
   "useUserDialogListState": "@twilio-paste/core/user-dialog",
   "useUserDialogState": "@twilio-paste/core/user-dialog",
+  "VisualPickerCheckbox": "@twilio-paste/core/visual-picker",
+  "VisualPickerCheckboxGroup": "@twilio-paste/core/visual-picker",
+  "VisualPickerRadio": "@twilio-paste/core/visual-picker",
+  "VisualPickerRadioGroup": "@twilio-paste/core/visual-picker",
   "AspectRatio": "@twilio-paste/core/aspect-ratio",
   "Flex": "@twilio-paste/core/flex",
   "Column": "@twilio-paste/core/grid",

diff --git a/packages/paste-core/components/base-radio-checkbox/src/BaseRadioCheckbox.tsx b/packages/paste-core/components/base-radio-checkbox/src/BaseRadioCheckbox.tsx
@@ -13,17 +13,18 @@ import type {BoxProps} from '@twilio-paste/box';
 export interface BaseRadioCheckboxControlProps extends SiblingBoxProps, Pick<BoxProps, 'element'> {
   children: NonNullable<React.ReactNode>;
   disabled?: boolean;
+  applyHoverStyles?: boolean; // only used in Visual Picker
 }
 const BaseRadioCheckboxControl = React.forwardRef<HTMLSpanElement, BaseRadioCheckboxControlProps>(
-  ({children, disabled, element = 'BASE_RADIO_CHECKBOX_CONTROL', ...props}, ref) => {
+  ({children, disabled, applyHoverStyles = false, element = 'BASE_RADIO_CHECKBOX_CONTROL', ...props}, ref) => {
     return (
       <SiblingBox
         as="span"
         ref={ref}
         display="flex"
         element={element}
         backgroundColor="colorBackgroundBody"
-        borderColor="colorBorder"
+        borderColor={applyHoverStyles ? 'colorBorderPrimaryStronger' : 'colorBorder'}
         borderStyle="solid"
         borderWidth="borderWidth10"
         height="sizeSquare50"
@@ -36,7 +37,7 @@ const BaseRadioCheckboxControl = React.forwardRef<HTMLSpanElement, BaseRadioChec
           color: 'colorTextWeakest',
         }}
         _focusSibling={{
-          borderColor: 'colorBorderPrimaryStronger',
+          borderColor: 'colorBorder',
           boxShadow: 'shadowFocus',
           color: 'colorTextInverse',
         }}

diff --git a/packages/paste-core/components/callout/src/CalloutHeading.tsx b/packages/paste-core/components/callout/src/CalloutHeading.tsx
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import PropTypes from 'prop-types';
 import {Text, safelySpreadTextProps} from '@twilio-paste/text';
 import type {asTags} from '@twilio-paste/heading';
 import type {BoxProps} from '@twilio-paste/box';
@@ -27,8 +26,3 @@ export const CalloutHeading = React.forwardRef<HTMLHeadingElement, CalloutHeadin
 );
 
 CalloutHeading.displayName = 'CalloutHeading';
-CalloutHeading.propTypes = {
-  children: PropTypes.node,
-  element: PropTypes.string,
-  as: PropTypes.oneOf(['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'div', 'label', 'span', 'header'] as asTags[]).isRequired,
-};
diff --git a/packages/paste-core/components/checkbox/src/Checkbox.tsx b/packages/paste-core/components/checkbox/src/Checkbox.tsx
@@ -234,4 +234,4 @@ Checkbox.propTypes = {
   defaultChecked: PropTypes.bool,
 };
 
-export {Checkbox};
+export {Checkbox, HiddenCheckbox, CheckboxIcon};
diff --git a/packages/paste-core/components/inline-control-group/src/InlineControlGroup.tsx b/packages/paste-core/components/inline-control-group/src/InlineControlGroup.tsx
@@ -1,7 +1,5 @@
 import * as React from 'react';
-import PropTypes from 'prop-types';
-import {Box, safelySpreadBoxProps} from '@twilio-paste/box';
-import type {BoxProps} from '@twilio-paste/box';
+import {Box, safelySpreadBoxProps, type BoxProps, type BoxStyleProps} from '@twilio-paste/box';
 import {Label} from '@twilio-paste/label';
 import {HelpText} from '@twilio-paste/help-text';
 
@@ -16,6 +14,7 @@ export interface InlineControlGroupProps
   orientation?: 'vertical' | 'horizontal';
   required?: boolean;
   i18nRequiredLabel?: string;
+  fieldStyleProps?: BoxStyleProps;
 }
 
 const InlineControlGroup = React.forwardRef<HTMLFieldSetElement, InlineControlGroupProps>(
@@ -30,6 +29,7 @@ const InlineControlGroup = React.forwardRef<HTMLFieldSetElement, InlineControlGr
       orientation = 'vertical',
       required,
       i18nRequiredLabel,
+      fieldStyleProps, // Only used in Visual Picker
       ...props
     },
     ref
@@ -58,18 +58,34 @@ const InlineControlGroup = React.forwardRef<HTMLFieldSetElement, InlineControlGr
         </Label>
         {helpText && <HelpText marginTop="space0">{helpText}</HelpText>}
         <Box element={`${element}_SET`} marginRight="space20">
-          {React.Children.map(children, (child) => {
-            return (
-              <Box
-                element={`${element}_FIELD`}
-                display={orientation === 'horizontal' ? 'inline-block' : 'block'}
-                marginTop="space40"
-                marginRight={orientation === 'horizontal' ? 'space70' : null}
-              >
-                {child}
-              </Box>
-            );
-          })}
+          <Box display={fieldStyleProps && orientation === 'horizontal' ? 'inline-flex' : 'block'}>
+            {React.Children.map(children, (child, index) => {
+              return (
+                <Box
+                  element={`${element}_FIELD`}
+                  display={orientation === 'horizontal' ? 'inline-block' : 'block'}
+                  marginTop={
+                    fieldStyleProps?.marginTop
+                      ? // eslint-disable-next-line unicorn/no-nested-ternary
+                        index === 0 && orientation === 'vertical'
+                        ? 'space40'
+                        : fieldStyleProps?.marginTop
+                      : 'space40'
+                  }
+                  marginRight={
+                    fieldStyleProps?.marginRight
+                      ? fieldStyleProps?.marginRight
+                      : // eslint-disable-next-line unicorn/no-nested-ternary
+                      orientation === 'horizontal'
+                      ? 'space70'
+                      : null
+                  }
+                >
+                  {child}
+                </Box>
+              );
+            })}
+          </Box>
           {errorText && (
             <Box element={`${element}_ERROR_TEXT_WRAPPER`} marginTop="space40">
               <HelpText variant="error">{errorText}</HelpText>
@@ -83,18 +99,4 @@ const InlineControlGroup = React.forwardRef<HTMLFieldSetElement, InlineControlGr
 
 InlineControlGroup.displayName = 'InlineControlGroup';
 
-if (process.env.NODE_ENV === 'development') {
-  InlineControlGroup.propTypes = {
-    children: PropTypes.node.isRequired,
-    disabled: PropTypes.bool,
-    errorText: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
-    helpText: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
-    legend: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).isRequired,
-    name: PropTypes.string.isRequired,
-    orientation: PropTypes.oneOf(['vertical', 'horizontal']),
-    required: PropTypes.bool,
-    i18nRequiredLabel: PropTypes.string,
-  };
-}
-
 export {InlineControlGroup};
diff --git a/packages/paste-core/components/radio-group/src/Radio.tsx b/packages/paste-core/components/radio-group/src/Radio.tsx
@@ -214,4 +214,4 @@ if (process.env.NODE_ENV === 'development') {
   };
 }
 
-export {Radio};
+export {Radio, HiddenRadio, type HiddenRadioState};