feat: Add Loc support and Form component

package.json

@@ -55,17 +55,19 @@
         "@floating-ui/react-dom-interactions": "0.6.3",
         "@mdi/react": "1.5.0",
         "@ngard/tiny-isequal": "1.1.0",
-        "@types/lodash": "4.14.182",
         "@types/react-is": "17.0.3",
         "@types/shallowequal": "1.1.1",
+        "async-validator": "4.1.0",
         "bodymovin": "4.13.0",
         "date-fns": "2.28.0",
         "dayjs": "1.11.3",
         "dom-align": "1.12.3",
         "lottie-web": "5.8.1",
+        "memoize-one": "6.0.0",
         "react-flip-toolkit": "7.0.13",
         "react-is": "18.1.0",
         "resize-observer-polyfill": "1.5.1",
+        "scroll-into-view-if-needed": "2.2.25",
         "shallowequal": "1.1.0"
     },
     "peerDependencies": {

src/components/Button/BaseButton.tsx

@@ -1,10 +1,11 @@
-import React, { FC, Ref } from 'react';
+import React, { FC, Ref, useContext } from 'react';
+import DisabledContext, { Disabled } from '../ConfigProvider/DisabledContext';
+import { SizeContext, Size } from '../ConfigProvider';
 import {
     ButtonIconAlign,
     ButtonShape,
     ButtonSize,
     ButtonTextAlign,
-    ButtonTheme,
     ButtonWidth,
     InternalButtonProps,
     SplitButton,
@@ -27,6 +28,10 @@ export const BaseButton: FC<InternalButtonProps> = React.forwardRef(
             buttonWidth = ButtonWidth.fitContent,
             checked = false,
             classNames,
+            configContextProps = {
+                noDisabledContext: false,
+                noSizeContext: false,
+            },
             counter,
             disabled = false,
             disruptive = false,
@@ -38,13 +43,12 @@ export const BaseButton: FC<InternalButtonProps> = React.forwardRef(
             onClick,
             onContextMenu,
             shape = ButtonShape.Pill,
-            size = ButtonSize.Flex,
+            size = ButtonSize.Medium,
             split,
             splitButtonChecked = false,
             splitButtonProps,
             style,
             text,
-            theme,
             toggle,
             type,
             loading = false,
@@ -57,6 +61,16 @@ export const BaseButton: FC<InternalButtonProps> = React.forwardRef(
         const smallScreenActive: boolean = useMatchMedia(Breakpoints.Small);
         const xSmallScreenActive: boolean = useMatchMedia(Breakpoints.XSmall);
 
+        const contextuallyDisabled: Disabled = useContext(DisabledContext);
+        const mergedDisabled: boolean = configContextProps.noDisabledContext
+            ? disabled
+            : contextuallyDisabled || disabled;
+
+        const contextuallySized: Size = useContext(SizeContext);
+        const mergedSize = configContextProps.noSizeContext
+            ? size
+            : contextuallySized || size;
+
         const counterExists: boolean = !!counter;
         const iconExists: boolean = !!iconProps;
         const textExists: boolean = !!text;
@@ -65,30 +79,29 @@ export const BaseButton: FC<InternalButtonProps> = React.forwardRef(
             classNames,
             {
                 [styles.buttonSmall]:
-                    size === ButtonSize.Flex && largeScreenActive,
+                    mergedSize === ButtonSize.Flex && largeScreenActive,
             },
             {
                 [styles.buttonMedium]:
-                    size === ButtonSize.Flex && mediumScreenActive,
+                    mergedSize === ButtonSize.Flex && mediumScreenActive,
             },
             {
                 [styles.buttonMedium]:
-                    size === ButtonSize.Flex && smallScreenActive,
+                    mergedSize === ButtonSize.Flex && smallScreenActive,
             },
             {
                 [styles.buttonLarge]:
-                    size === ButtonSize.Flex && xSmallScreenActive,
+                    mergedSize === ButtonSize.Flex && xSmallScreenActive,
             },
-            { [styles.buttonLarge]: size === ButtonSize.Large },
-            { [styles.buttonMedium]: size === ButtonSize.Medium },
-            { [styles.buttonSmall]: size === ButtonSize.Small },
+            { [styles.buttonLarge]: mergedSize === ButtonSize.Large },
+            { [styles.buttonMedium]: mergedSize === ButtonSize.Medium },
+            { [styles.buttonSmall]: mergedSize === ButtonSize.Small },
             { [styles.pillShape]: shape === ButtonShape.Pill },
             {
                 [styles.roundShape]:
                     shape === ButtonShape.Round && !split && !textExists,
             },
             { [styles.dropShadow]: dropShadow },
-            { [styles.dark]: theme === ButtonTheme.dark },
             { [styles.floating]: floatingButtonProps?.enabled },
         ]);
 
@@ -106,30 +119,30 @@ export const BaseButton: FC<InternalButtonProps> = React.forwardRef(
                 [styles.iconRight]:
                     iconExists && alignIcon === ButtonIconAlign.Right,
             },
-            { [styles.disabled]: allowDisabledFocus || disabled },
+            { [styles.disabled]: allowDisabledFocus || mergedDisabled },
             { [styles.loading]: loading },
         ]);
 
         const buttonTextClassNames: string = mergeClasses([
             {
                 [styles.buttonTextSmall]:
-                    size === ButtonSize.Flex && largeScreenActive,
+                    mergedSize === ButtonSize.Flex && largeScreenActive,
             },
             {
                 [styles.buttonTextMedium]:
-                    size === ButtonSize.Flex && mediumScreenActive,
+                    mergedSize === ButtonSize.Flex && mediumScreenActive,
             },
             {
                 [styles.buttonTextMedium]:
-                    size === ButtonSize.Flex && smallScreenActive,
+                    mergedSize === ButtonSize.Flex && smallScreenActive,
             },
             {
                 [styles.buttonTextLarge]:
-                    size === ButtonSize.Flex && xSmallScreenActive,
+                    mergedSize === ButtonSize.Flex && xSmallScreenActive,
             },
-            { [styles.buttonTextLarge]: size === ButtonSize.Large },
-            { [styles.buttonTextMedium]: size === ButtonSize.Medium },
-            { [styles.buttonTextSmall]: size === ButtonSize.Small },
+            { [styles.buttonTextLarge]: mergedSize === ButtonSize.Large },
+            { [styles.buttonTextMedium]: mergedSize === ButtonSize.Medium },
+            { [styles.buttonTextSmall]: mergedSize === ButtonSize.Small },
         ]);
 
         const badgeClassNames: string = mergeClasses([
@@ -139,20 +152,20 @@ export const BaseButton: FC<InternalButtonProps> = React.forwardRef(
 
         const getButtonIconSize = (): IconSize => {
             let iconSize: IconSize;
-            if (size === ButtonSize.Flex && largeScreenActive) {
+            if (mergedSize === ButtonSize.Flex && largeScreenActive) {
                 iconSize = IconSize.Small;
             } else if (
-                size === ButtonSize.Flex &&
+                mergedSize === ButtonSize.Flex &&
                 (mediumScreenActive || smallScreenActive)
             ) {
                 iconSize = IconSize.Medium;
-            } else if (size === ButtonSize.Flex && xSmallScreenActive) {
+            } else if (mergedSize === ButtonSize.Flex && xSmallScreenActive) {
                 iconSize = IconSize.Large;
-            } else if (size === ButtonSize.Large) {
+            } else if (mergedSize === ButtonSize.Large) {
                 iconSize = IconSize.Large;
-            } else if (size === ButtonSize.Medium) {
+            } else if (mergedSize === ButtonSize.Medium) {
                 iconSize = IconSize.Medium;
-            } else if (size === ButtonSize.Small) {
+            } else if (mergedSize === ButtonSize.Small) {
                 iconSize = IconSize.Small;
             }
             return iconSize;
@@ -210,11 +223,13 @@ export const BaseButton: FC<InternalButtonProps> = React.forwardRef(
                     ref={ref}
                     {...rest}
                     aria-checked={toggle ? !!checked : undefined}
-                    aria-disabled={disabled || loading}
+                    aria-disabled={mergedDisabled || loading}
                     aria-label={ariaLabel}
                     aria-pressed={toggle ? !!checked : undefined}
                     defaultChecked={checked}
-                    disabled={(!allowDisabledFocus && disabled) || loading}
+                    disabled={
+                        (!allowDisabledFocus && mergedDisabled) || loading
+                    }
                     className={buttonBaseClassNames}
                     id={id}
                     onClick={!allowDisabledFocus ? onClick : null}
@@ -252,9 +267,8 @@ export const BaseButton: FC<InternalButtonProps> = React.forwardRef(
                                 : null
                         }
                         shape={shape}
-                        size={size}
+                        size={mergedSize}
                         split={split}
-                        theme={theme}
                         type={type}
                     />
                 )}

src/components/Button/Button.stories.tsx

@@ -7,7 +7,6 @@ import {
     ButtonShape,
     ButtonSize,
     ButtonTextAlign,
-    ButtonTheme,
     ButtonWidth,
     DefaultButton,
     NeutralButton,
@@ -39,14 +38,14 @@ export default {
                                 <li>
                                     There are four button sizes that may be
                                     specified via the <b>size</b> prop and the{' '}
-                                    <b>ButtonSize</b>: <b>ButtonSize.Flex</b>,{' '}
+                                    <b>size</b>: <b>ButtonSize.Flex</b>,{' '}
                                     <b>ButtonSize.Large</b>,{' '}
                                     <b>ButtonSize.Medium</b>,{' '}
-                                    <b>ButtonSize.Small</b>.{' '}
-                                    <b>ButtonSize.Flex</b> is the default and
-                                    resizes the button automatically with the
-                                    viewport. To prevent this responsive
-                                    behavior, give the button a size.
+                                    <b>ButtonSize.Small</b>. <b>medium</b> is
+                                    the default and flex resizes the button
+                                    automatically with the viewport. To prevent
+                                    this responsive behavior, give the button a
+                                    size other than flex.
                                 </li>
                                 <li>
                                     For dialog boxes and panels, where people
@@ -252,12 +251,11 @@ const buttonArgs: Object = {
     },
     id: 'myButton',
     shape: ButtonShape.Pill,
-    size: ButtonSize.Flex,
+    size: ButtonSize.Medium,
     split: false,
     splitButtonChecked: false,
     style: {},
     text: 'Button',
-    theme: ButtonTheme.light,
     toggle: false,
     counter: 0,
     loading: false,

src/components/Button/Button.types.ts

@@ -1,6 +1,7 @@
 import React, { Ref } from 'react';
 import { IconProps } from '../Icon';
 import { OcBaseProps } from '../OcBase';
+import { ConfigContextProps, Shape, Size } from '../ConfigProvider';
 
 export enum ButtonIconAlign {
     Left = 'left',
@@ -31,11 +32,6 @@ export enum ButtonShape {
     Round = 'round',
 }
 
-export enum ButtonTheme {
-    light = 'light',
-    dark = 'dark',
-}
-
 export enum ButtonType {
     Default = 'default',
     Neutral = 'neutral',
@@ -124,6 +120,10 @@ export interface ButtonProps extends NativeButtonProps {
      * The button class names.
      */
     classNames?: string;
+    /**
+     * Configure how contextual props are consumed
+     */
+    configContextProps?: ConfigContextProps;
     /**
      * The button counter string.
      */
@@ -171,12 +171,12 @@ export interface ButtonProps extends NativeButtonProps {
      * Shape of the button.
      * @default ButtonShape.Pill
      */
-    shape?: ButtonShape;
+    shape?: ButtonShape | Shape;
     /**
      * The button size.
      * @default ButtonSize.Medium
      */
-    size?: ButtonSize;
+    size?: ButtonSize | Size;
     /**
      * Determines whether this is a split button.
      * @default false
@@ -198,11 +198,6 @@ export interface ButtonProps extends NativeButtonProps {
      * The button text.
      */
     text?: string;
-    /**
-     * The button theme.
-     * @default light
-     */
-    theme?: ButtonTheme;
     /**
      * The button is a toggle button with distinct on and off states.
      */

src/components/Button/DefaultButton/DefaultButton.tsx

@@ -29,9 +29,8 @@ export const DefaultButton: FC<ButtonProps> = React.forwardRef(
             iconProps,
             onClick,
             text,
-            theme,
             shape = ButtonShape.Pill,
-            size = ButtonSize.Flex,
+            size = ButtonSize.Medium,
             split,
             splitButtonChecked,
             splitButtonProps,
@@ -74,7 +73,6 @@ export const DefaultButton: FC<ButtonProps> = React.forwardRef(
                 splitButtonProps={splitButtonProps}
                 style={style}
                 text={text}
-                theme={theme}
                 toggle={toggle}
                 type={ButtonType.Default}
                 buttonWidth={buttonWidth}

src/components/Button/NeutralButton/NeutralButton.tsx

@@ -3,8 +3,8 @@ import {
     BaseButton,
     ButtonIconAlign,
     ButtonProps,
-    ButtonSize,
     ButtonShape,
+    ButtonSize,
     ButtonTextAlign,
     ButtonType,
 } from '../';
@@ -29,9 +29,8 @@ export const NeutralButton: FC<ButtonProps> = React.forwardRef(
             iconProps,
             onClick,
             text,
-            theme,
             shape = ButtonShape.Pill,
-            size = ButtonSize.Flex,
+            size = ButtonSize.Medium,
             split,
             splitButtonProps,
             splitButtonChecked = false,
@@ -72,7 +71,6 @@ export const NeutralButton: FC<ButtonProps> = React.forwardRef(
                 splitButtonProps={splitButtonProps}
                 style={style}
                 text={text}
-                theme={theme}
                 toggle={toggle}
                 type={ButtonType.Neutral}
                 buttonWidth={buttonWidth}

src/components/Button/PrimaryButton/PrimaryButton.tsx

@@ -3,8 +3,8 @@ import {
     BaseButton,
     ButtonIconAlign,
     ButtonProps,
-    ButtonSize,
     ButtonShape,
+    ButtonSize,
     ButtonTextAlign,
     ButtonType,
 } from '../';
@@ -31,13 +31,12 @@ export const PrimaryButton: FC<ButtonProps> = React.forwardRef(
             onClick,
             onContextMenu,
             shape = ButtonShape.Pill,
-            size = ButtonSize.Flex,
+            size = ButtonSize.Medium,
             split,
             splitButtonChecked = false,
             splitButtonProps,
             style,
             text,
-            theme,
             toggle,
             buttonWidth,
             ...rest
@@ -77,7 +76,6 @@ export const PrimaryButton: FC<ButtonProps> = React.forwardRef(
                 splitButtonProps={splitButtonProps}
                 style={style}
                 text={text}
-                theme={theme}
                 toggle={toggle}
                 type={ButtonType.Primary}
                 buttonWidth={buttonWidth}