fix: add fullWidth, description ellipsis 2 line and border less bg color

Author: eshankvaish

package-lock.json

@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "0.2.2-beta-6",
+    "version": "0.2.2-beta-7",
     "description": "Supporting common component library",
     "type": "module",
     "main": "dist/index.js",

package.json

@@ -206,6 +206,7 @@ const SelectPicker = <OptionValue, IsMulti extends boolean>({
     isSearchable,
     selectRef,
     shouldMenuAlignRight = false,
+    fullWidth = false,
     ...props
 }: SelectPickerProps<OptionValue, IsMulti>) => {
     const { inputId, required, isDisabled, controlShouldRenderValue = true, value } = props
@@ -326,7 +327,7 @@ const SelectPicker = <OptionValue, IsMulti extends boolean>({
     )
 
     return (
-        <div className="flex column left top dc__gap-4">
+        <div className={`flex column left top dc__gap-4 ${fullWidth ? 'w-100' : ''}`}>
             {/* Note: Common out for fields */}
             <div className="flex column left top dc__gap-6 w-100">
                 {label && (

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

@@ -152,7 +152,7 @@ export const SelectPickerOption = <OptionValue, IsMulti extends boolean>({
                         {/* Add support for custom ellipsis if required */}
                         {showDescription && (
                             <p
-                                className={`m-0 fs-12 fw-4 lh-18 cn-7 ${!disableDescriptionEllipsis ? 'dc__truncate' : ''}`}
+                                className={`m-0 fs-12 fw-4 lh-18 cn-7 ${!disableDescriptionEllipsis ? 'dc__ellipsis-right__2nd-line' : ''}`}
                             >
                                 {description}
                             </p>

src/Shared/Components/SelectPicker/common.tsx

@@ -150,6 +150,12 @@ export type SelectPickerProps<OptionValue = number | string, IsMulti extends boo
          * @default false
          */
         shouldMenuAlignRight?: boolean
+        /**
+         * If true, the select spans to the max available width
+         *
+         * @default false
+         */
+        fullWidth?: boolean
     } & (IsMulti extends true
         ? {
               isMulti: IsMulti | boolean

src/Shared/Components/SelectPicker/type.ts

@@ -39,11 +39,8 @@ const getVariantOverrides = <OptionValue>(
     switch (variant) {
         case SelectPickerVariantType.BORDER_LESS:
             return {
-                menu: () => ({
-                    width: '250px',
-                }),
                 control: () => ({
-                    backgroundColor: 'var(--N0)',
+                    backgroundColor: 'transparent',
                     border: 'none',
                     padding: 0,
                     gap: '2px',
@@ -92,7 +89,7 @@ export const getCommonSelectStyle = <OptionValue, IsMulti extends boolean>({
             pointerEvents: 'auto',
         }),
     }),
-    menu: (base, state) => ({
+    menu: (base) => ({
         ...base,
         overflow: 'hidden',
         marginBlock: '4px',
@@ -105,7 +102,6 @@ export const getCommonSelectStyle = <OptionValue, IsMulti extends boolean>({
         ...(shouldMenuAlignRight && {
             right: 0,
         }),
-        ...(getVariantOverrides(variant)?.menu(base, state) || {}),
     }),
     menuList: (base) => ({
         ...base,