updated styles

assets/js/src/core/components/select/select.stories.tsx

@@ -14,65 +14,65 @@
 import { type Meta } from '@storybook/react'
 import { Select } from '@Pimcore/components/select/select'
 
-const config: Meta = {
-  title: 'Components/Controls/Select',
-  component: Select,
-  tags: ['autodocs']
-}
-
 const SAMPLE_SELECT_OPTIONS = [
   { value: '1', label: 'Option 1' },
   { value: '2', label: 'Option 2' },
   { value: '3', label: 'Option 3' }
 ]
 
-export const _default = {
+const config: Meta = {
+  title: 'Components/Controls/Select',
   args: {
     options: SAMPLE_SELECT_OPTIONS,
+    width: 250
+  },
+  component: Select,
+  tags: ['autodocs']
+}
+
+export const _default = {
+  args: {
     placeholder: 'Choose an option...'
   }
 }
 
 export const Multiple = {
   args: {
-    options: SAMPLE_SELECT_OPTIONS,
     placeholder: 'Choose an option...',
     mode: 'multiple'
   }
 }
 
 export const WithSearch = {
   args: {
-    options: SAMPLE_SELECT_OPTIONS,
-    placeholder: 'Choose an option...'
+    placeholder: 'Choose an option...',
+    showSearch: true
   }
 }
 
 export const WithCustomIcon = {
   args: {
-    options: SAMPLE_SELECT_OPTIONS,
-    placeholder: 'Choose an option...'
+    placeholder: 'Choose an option...',
+    customIcon: 'export'
   }
 }
 
 export const WithCustomArrowIcon = {
   args: {
-    options: SAMPLE_SELECT_OPTIONS,
-    placeholder: 'Choose an option...'
+    placeholder: 'Choose an option...',
+    customArrowIcon: 'export'
   }
 }
 
 export const WithWarning = {
   args: {
-    options: SAMPLE_SELECT_OPTIONS,
     placeholder: 'Choose an option...',
     status: 'warning'
   }
 }
 
 export const WithError = {
   args: {
-    options: SAMPLE_SELECT_OPTIONS,
     placeholder: 'Choose an option...',
     status: 'error'
   }

assets/js/src/core/components/select/select.styles.ts

@@ -12,10 +12,15 @@
 */
 
 import { createStyles } from 'antd-style'
+import { isEmptyValue } from '@Pimcore/utils/type-utils'
+
+interface StylesProps {
+  width?: number
+}
 
 const ICON_WIDTH = 16
 
-export const useStyles = createStyles(({ css, token }) => {
+export const useStyles = createStyles(({ css, token }, props: StylesProps) => {
   return {
     selectContainer: css`
       position: relative;
@@ -110,6 +115,8 @@ export const useStyles = createStyles(({ css, token }) => {
     `,
 
     select: css`
+      width: ${!isEmptyValue(props.width) ? `${props.width}px` : 'initial'};
+      
       .ant-select-selector {
         padding: 0 ${token.controlPaddingHorizontal}px !important;
       }
@@ -185,8 +192,10 @@ export const useStyles = createStyles(({ css, token }) => {
     `,
 
     selectWithCustomIcon: css`
-      .ant-select-selector {
-        padding: 0 ${token.controlPaddingHorizontal}px 0 ${token.controlPaddingHorizontal + ICON_WIDTH + token.marginXXS}px !important;
+      &.ant-select {
+        .ant-select-selector {
+          padding: 0 ${token.controlPaddingHorizontal}px 0 ${token.controlPaddingHorizontal + ICON_WIDTH + token.marginXXS}px !important;
+        }
       }
     `,
 
@@ -196,6 +205,7 @@ export const useStyles = createStyles(({ css, token }) => {
       top: 50%;
       transform: translateY(-50%);
       z-index: 1;
+      color: ${token.colorIcon};
     `,
 
     customIconActive: css`

assets/js/src/core/components/select/select.tsx

@@ -22,17 +22,18 @@ import { useStyles } from './select.styles'
 interface SelectProps extends AntdSelectProps {
   customArrowIcon?: string
   customIcon?: string
+  width?: number
 }
 
-export const Select = forwardRef<RefSelectProps, SelectProps>(({ customIcon, customArrowIcon, mode, status, className, ...antdSelectProps }, ref): React.JSX.Element => {
+export const Select = forwardRef<RefSelectProps, SelectProps>(({ customIcon, customArrowIcon, mode, status, className, width, ...antdSelectProps }, ref): React.JSX.Element => {
   const selectRef = useRef<RefSelectProps>(null)
 
   const [isActive, setIsActive] = useState(false)
   const [isFocus, setIsFocus] = useState(false)
 
   useImperativeHandle(ref, () => selectRef.current!)
 
-  const { styles } = useStyles()
+  const { styles } = useStyles({ width })
 
   const withCustomIcon = !isEmptyValue(customIcon)
   const isStatusWarning = status === 'warning'

public/build/b635e820-daf9-4d13-867c-7dbeb89657fb/entrypoints.json

@@ -0,0 +1,14 @@
+{
+  "entrypoints": {
+    "main": {
+      "css": [
+        "http://localhost:3030/build/b635e820-daf9-4d13-867c-7dbeb89657fb/vendors-node_modules_ant-design_icons_es_icons_CaretDownOutlined_js-node_modules_ant-design_i-ab460d.css",
+        "http://localhost:3030/build/b635e820-daf9-4d13-867c-7dbeb89657fb/main.css"
+      ],
+      "js": [
+        "http://localhost:3030/build/b635e820-daf9-4d13-867c-7dbeb89657fb/vendors-node_modules_ant-design_icons_es_icons_CaretDownOutlined_js-node_modules_ant-design_i-ab460d.js",
+        "http://localhost:3030/build/b635e820-daf9-4d13-867c-7dbeb89657fb/main.js"
+      ]
+    }
+  }
+}