feat: Button - add support for fullWidth prop, Select Picker - option w-100 style

Author: RohitRaj011

src/Shared/Components/Button/Button.component.tsx

@@ -137,6 +137,7 @@ const Button = ({
     icon = null,
     ariaLabel = null,
     showAriaLabelInTippy = true,
+    fullWidth = false,
     ...props
 }: ButtonProps) => {
     const isDisabled = disabled || isLoading
@@ -171,7 +172,7 @@ const Button = ({
                 <ButtonElement
                     {...props}
                     disabled={isDisabled}
-                    className={`br-4 flex cursor dc__tab-focus dc__position-rel dc__capitalize ${getButtonDerivedClass({ size, variant, style, isLoading, icon })} ${isDisabled ? 'dc__disabled' : ''}`}
+                    className={`br-4 flex cursor dc__tab-focus dc__position-rel dc__capitalize ${getButtonDerivedClass({ size, variant, style, isLoading, icon })} ${isDisabled ? 'dc__disabled' : ''} ${fullWidth ? 'w-100' : ''}`}
                     data-testid={dataTestId}
                     aria-label={ariaLabel}
                 >

src/Shared/Components/Button/types.ts

@@ -85,6 +85,12 @@ export type ButtonProps = (
      * @default false
      */
     disabled?: boolean
+    /**
+     * Determines if the button should expand to fill the full width of its container.
+     *
+     * @default false
+     */
+    fullWidth?: boolean
 } & (
         | {
               /**

src/Shared/Components/SelectPicker/common.tsx

@@ -149,7 +149,7 @@ export const SelectPickerOption = <OptionValue, IsMulti extends boolean>({
                         disabled={isDisabled}
                     />
                 )}
-                <div className={`flex left ${showDescription ? 'top' : ''} dc__gap-8`}>
+                <div className={`flex left w-100 ${showDescription ? 'top' : ''} dc__gap-8`}>
                     {startIcon && (
                         <div className="dc__no-shrink icon-dim-20 flex dc__fill-available-space">{startIcon}</div>
                     )}