feat: add support for disabling border radius

Author: eshankvaish

src/Shared/Components/FormFieldWrapper/types.ts

@@ -55,4 +55,30 @@ export interface FormFieldWrapperProps
      */
     fullWidth?: boolean
     children: ReactElement
+    borderRadiusConfig?: {
+        /**
+         * If false, the top border radius is not applied
+         *
+         * @default true
+         */
+        top?: boolean
+        /**
+         * If false, the right border radius is not applied
+         *
+         * @default true
+         */
+        right?: boolean
+        /**
+         * If false, the bottom border radius is not applied
+         *
+         * @default true
+         */
+        bottom?: boolean
+        /**
+         * If false, the left border radius is not applied
+         *
+         * @default true
+         */
+        left?: boolean
+    }
 }

src/Shared/Components/FormFieldWrapper/utils.ts

@@ -1,4 +1,4 @@
-import { FormFieldInfoProps, FormFieldLabelProps } from './types'
+import { FormFieldInfoProps, FormFieldLabelProps, FormFieldWrapperProps } from './types'
 
 export const getFormErrorElementId = (inputId: FormFieldLabelProps['inputId']) => `${inputId}-error-msg`
 
@@ -37,3 +37,9 @@ export const getFormFieldAriaAttributes = ({
               'aria-label': ariaLabel,
           }),
 })
+
+export const getFormFieldBorderClassName = (borderRadiusConfig: FormFieldWrapperProps['borderRadiusConfig'] = {}) => {
+    const { top = true, right = true, bottom = true, left = true } = borderRadiusConfig
+
+    return `${!top ? 'dc__no-top-radius' : ''} ${!right ? 'dc__no-right-radius' : ''} ${!bottom ? 'dc__no-bottom-radius' : ''} ${!left ? 'dc__no-left-radius' : ''}`
+}

src/Shared/Components/SelectPicker/SelectPicker.component.tsx

@@ -218,6 +218,7 @@ const SelectPicker = <OptionValue, IsMulti extends boolean>({
     warningText,
     layout,
     ariaLabel,
+    borderRadiusConfig,
     ...props
 }: SelectPickerProps<OptionValue, IsMulti>) => {
     const [isFocussed, setIsFocussed] = useState(false)
@@ -379,6 +380,8 @@ const SelectPicker = <OptionValue, IsMulti extends boolean>({
             required={required}
             fullWidth={fullWidth}
             ariaLabel={ariaLabel}
+            // TODO: Add support for custom border radius with CustomInput refactoring
+            borderRadiusConfig={borderRadiusConfig}
         >
             <ConditionalWrap condition={isDisabled && !!disabledTippyContent} wrap={renderDisabledTippy}>
                 <div className="w-100">

src/Shared/Components/Textarea/Textarea.component.tsx

@@ -9,6 +9,7 @@ import { FormFieldWrapper, getFormFieldAriaAttributes } from '../FormFieldWrappe
 import { TextareaProps } from './types'
 import { TEXTAREA_CONSTRAINTS } from './constants'
 import './textarea.scss'
+import { getFormFieldBorderClassName } from '../FormFieldWrapper/utils'
 
 const { MIN_HEIGHT, AUTO_EXPANSION_MAX_HEIGHT } = TEXTAREA_CONSTRAINTS
 
@@ -25,6 +26,7 @@ const Textarea = ({
     shouldTrim = true,
     size = ComponentSizeType.large,
     ariaLabel,
+    borderRadiusConfig,
     ...props
 }: TextareaProps) => {
     const textareaRef = useRef<HTMLTextAreaElement>(null)
@@ -93,6 +95,7 @@ const Textarea = ({
             required={required}
             fullWidth={fullWidth}
             ariaLabel={ariaLabel}
+            borderRadiusConfig={borderRadiusConfig}
         >
             <textarea
                 {...props}
@@ -112,7 +115,7 @@ const Textarea = ({
                 required={required}
                 onBlur={handleBlur}
                 onKeyDown={handleKeyDown}
-                className={`${COMPONENT_SIZE_TYPE_TO_FONT_AND_BLOCK_PADDING_MAP[size]} ${COMPONENT_SIZE_TYPE_TO_INLINE_PADDING_MAP[size]} w-100 dc__overflow-auto textarea`}
+                className={`${COMPONENT_SIZE_TYPE_TO_FONT_AND_BLOCK_PADDING_MAP[size]} ${COMPONENT_SIZE_TYPE_TO_INLINE_PADDING_MAP[size]} ${getFormFieldBorderClassName(borderRadiusConfig)} w-100 dc__overflow-auto textarea`}
                 ref={textareaRef}
                 style={{
                     // No max height when user is expanding

src/Shared/Components/Textarea/constants.ts

@@ -1,4 +1,4 @@
 export const TEXTAREA_CONSTRAINTS = {
-    MIN_HEIGHT: 56,
+    MIN_HEIGHT: 76,
     AUTO_EXPANSION_MAX_HEIGHT: 140,
 }