Fix color value text overflow effect (fix #20)

README.md

@@ -8,7 +8,6 @@
 
 ![Color input dropdown](https://raw.githubusercontent.com/cositehq/sanity-plugin-simpler-color-input/main/assets/allow-custom-value.png)
 
-
 ## 🤩 Features
 
 ✓ Sanity v3 support
@@ -57,6 +56,7 @@ export default defineConfig({
         { label: 'Custom...', value: 'custom' },
       ],
       enableSearch: true,
+      showColorValue: true,
     })
   ],
 })
@@ -141,6 +141,7 @@ const myPortableTextComponents = {
 This can be adapted to fit the framework you're using. You just need to know that the `textColor` and `highlightColor` color values are stored in the `value` property.
 
 ### A Note on Sanity's Visual Editing Experience
+
 If you are using Sanity's Visual Editing experience, specifically their [overlays](https://www.sanity.io/docs/visual-editing-overlays) and [Stega-encoding](https://www.sanity.io/docs/stega), you will need to clean the color values before using them in your CSS. See how to do this in the discussion [here](https://github.com/cositehq/sanity-plugin-simpler-color-input/issues/11#issuecomment-2341777670).
 
 ## ⚙️ Options
@@ -249,6 +250,22 @@ Which will render accordingly:
 
 This option was removed in favor of the more precise `colorFormat` setting. The alpha slider will be enabled when the `colorFormat` is set to `hexa`, `rgba` or `hsla`.
 
+### Color Value Showing
+
+By default, the library show the color value in the input field. If you want to hide it, you can set `showColorValue` to `false`.
+
+```js
+// ...fields...
+{
+  name: 'backgroundColor',
+  title: 'Background Color with Search',
+  type: 'simplerColor', // or textColor or highlightColor
+  options: {
+    showColorValue: false,
+  }
+}
+```
+
 ## 📚 Data model
 
 ```js
@@ -275,7 +292,6 @@ with default configuration for build & watch scripts.
 See [Testing a plugin in Sanity Studio](https://github.com/sanity-io/plugin-kit#testing-a-plugin-in-sanity-studio)
 on how to run this plugin with hotreload in the studio.
 
-
 ### Release new version
 
 Run ["CI & Release" workflow](https://github.com/cositehq/sanity-plugin-simpler-color-input/actions/workflows/main.yml).

src/ColorInput.tsx

@@ -31,6 +31,7 @@ export interface ColorOptions extends Omit<ObjectOptions, 'columns'> {
   defaultColorList?: Array<SimplerColorType>
   defaultColorFormat?: ColorFormatType
   enableSearch?: boolean
+  showColorValue?: boolean
 }
 
 export type SimplerColorSchemaType = Omit<ObjectSchemaType, 'options'> & {
@@ -45,6 +46,7 @@ export const SimplerColorInput = (props: ObjectInputProps) => {
   const {onChange} = props
   const value = props.value as SimplerColorType | undefined
   const type = props.schemaType as SimplerColorSchemaType
+  const showColorValue = Boolean(type.options?.showColorValue ?? true)
   const [selectedColor, setSelectedColor] = useState<Partial<SimplerColorType> | undefined>(value)
 
   const handleChange = useCallback(
@@ -156,6 +158,8 @@ export const SimplerColorInput = (props: ObjectInputProps) => {
                   textAlign: 'center',
                   borderTopRightRadius: isRequired ? '' : '0',
                   borderBottomRightRadius: isRequired ? '' : '0',
+                  flexShrink: 1,
+                  overflow: 'hidden',
                 }}
                 mode="ghost"
                 padding={2}
@@ -165,9 +169,9 @@ export const SimplerColorInput = (props: ObjectInputProps) => {
                     : setPickerIsOpen(!pickerIsOpen)
                 }
               >
-                <Inline space={4}>
-                  <Inline space={1}>
-                    <Box>
+                <Flex style={{width: '100%'}} gap={4}>
+                  <Flex style={{overflow: 'hidden', flexGrow: 1}} align="center" gap={1}>
+                    <Box style={{flexShrink: 0}}>
                       <Card
                         style={{backgroundColor: selectedColor?.value || '#ffffff'}}
                         radius={2}
@@ -176,11 +180,24 @@ export const SimplerColorInput = (props: ObjectInputProps) => {
                         margin={1}
                       />
                     </Box>
-                    <Text weight="semibold">{selectedColor?.label || 'Select a color...'} </Text>
-                    <Text>{selectedColor?.value}</Text>
-                  </Inline>
-                  <ChevronDownIcon width={32} height={32} />
-                </Inline>
+                    <Box
+                      style={{
+                        fontWeight: 600,
+                        overflow: 'hidden',
+                        textOverflow: 'ellipsis',
+                        ...(showColorValue && {flexShrink: 0}),
+                      }}
+                    >
+                      {selectedColor?.label || 'Select a color...'}{' '}
+                    </Box>
+                    {showColorValue && (
+                      <Box style={{overflow: 'hidden', textOverflow: 'ellipsis'}}>
+                        {selectedColor?.value}
+                      </Box>
+                    )}
+                  </Flex>
+                  <ChevronDownIcon style={{flexShrink: 0}} width={32} height={32} />
+                </Flex>
               </Button>
               {!isRequired && (
                 <Button

src/index.ts

@@ -9,6 +9,7 @@ interface SimplerColorInputConfig {
   defaultColorList?: Array<{label: string; value: string}>
   defaultColorFormat?: ColorFormatType // defaults to 'hex'
   enableSearch?: boolean // defaults to false
+  showColorValue?: boolean // default to true
 }
 
 /**