From 15a52f4ebb264664ec03f92e68e20b4fd88325e3 Mon Sep 17 00:00:00 2001
From: Vlad Zusko <vladzvu11@gmail.com>
Date: Fri, 27 Dec 2024 14:59:54 +0200
Subject: [PATCH 1/4] fix: fix text overflow effect

---
 src/ColorInput.tsx | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/ColorInput.tsx b/src/ColorInput.tsx
index b2afee0..527b68d 100644
--- a/src/ColorInput.tsx
+++ b/src/ColorInput.tsx
@@ -177,7 +177,15 @@ export const SimplerColorInput = (props: ObjectInputProps) => {
                       />
                     </Box>
                     <Text weight="semibold">{selectedColor?.label || 'Select a color...'} </Text>
-                    <Text>{selectedColor?.value}</Text>
+                    <Text
+                      style={{
+                        maxWidth: '100px',
+                        overflow: 'hidden',
+                        textOverflow: 'ellipsis',
+                      }}
+                    >
+                      {selectedColor?.value}
+                    </Text>
                   </Inline>
                   <ChevronDownIcon width={32} height={32} />
                 </Inline>

From 94792d117568b8f2160bb33e6c074dd814af9ea6 Mon Sep 17 00:00:00 2001
From: Vlad Zusko <vladzvu11@gmail.com>
Date: Fri, 3 Jan 2025 11:21:32 +0200
Subject: [PATCH 2/4] fix: fix color value overflowing fix implementation

---
 src/ColorInput.tsx | 28 +++++++++++++---------------
 1 file changed, 13 insertions(+), 15 deletions(-)

diff --git a/src/ColorInput.tsx b/src/ColorInput.tsx
index 527b68d..ec44831 100644
--- a/src/ColorInput.tsx
+++ b/src/ColorInput.tsx
@@ -156,6 +156,8 @@ export const SimplerColorInput = (props: ObjectInputProps) => {
                   textAlign: 'center',
                   borderTopRightRadius: isRequired ? '' : '0',
                   borderBottomRightRadius: isRequired ? '' : '0',
+                  flexShrink: 1,
+                  overflow: 'hidden',
                 }}
                 mode="ghost"
                 padding={2}
@@ -165,9 +167,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,19 +178,15 @@ export const SimplerColorInput = (props: ObjectInputProps) => {
                         margin={1}
                       />
                     </Box>
-                    <Text weight="semibold">{selectedColor?.label || 'Select a color...'} </Text>
-                    <Text
-                      style={{
-                        maxWidth: '100px',
-                        overflow: 'hidden',
-                        textOverflow: 'ellipsis',
-                      }}
-                    >
-                      {selectedColor?.value}
+                    <Text style={{flexShrink: 0}} weight="semibold">
+                      {selectedColor?.label || 'Select a color...'}{' '}
                     </Text>
-                  </Inline>
-                  <ChevronDownIcon width={32} height={32} />
-                </Inline>
+                    <Box style={{overflow: 'hidden', textOverflow: 'ellipsis'}}>
+                      {selectedColor?.value}
+                    </Box>
+                  </Flex>
+                  <ChevronDownIcon style={{flexShrink: 0}} width={32} height={32} />
+                </Flex>
               </Button>
               {!isRequired && (
                 <Button

From 1147cc6941204338e5dfbd55da41fedf7933cea6 Mon Sep 17 00:00:00 2001
From: Vlad Zusko <vladzvu11@gmail.com>
Date: Fri, 3 Jan 2025 11:31:18 +0200
Subject: [PATCH 3/4] feat: add color value showing toggle option

---
 src/ColorInput.tsx | 19 +++++++++++++++----
 src/index.ts       |  1 +
 2 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/src/ColorInput.tsx b/src/ColorInput.tsx
index ec44831..d27092e 100644
--- a/src/ColorInput.tsx
+++ b/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(
@@ -178,12 +180,21 @@ export const SimplerColorInput = (props: ObjectInputProps) => {
                         margin={1}
                       />
                     </Box>
-                    <Text style={{flexShrink: 0}} weight="semibold">
+                    <Box
+                      style={{
+                        fontWeight: 600,
+                        overflow: 'hidden',
+                        textOverflow: 'ellipsis',
+                        ...(showColorValue && {flexShrink: 0}),
+                      }}
+                    >
                       {selectedColor?.label || 'Select a color...'}{' '}
-                    </Text>
-                    <Box style={{overflow: 'hidden', textOverflow: 'ellipsis'}}>
-                      {selectedColor?.value}
                     </Box>
+                    {showColorValue && (
+                      <Box style={{overflow: 'hidden', textOverflow: 'ellipsis'}}>
+                        {selectedColor?.value}
+                      </Box>
+                    )}
                   </Flex>
                   <ChevronDownIcon style={{flexShrink: 0}} width={32} height={32} />
                 </Flex>
diff --git a/src/index.ts b/src/index.ts
index 1dc1863..617852c 100644
--- a/src/index.ts
+++ b/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
 }
 
 /**

From a610f802d2ebca0c5701c5dbcf932edb5c4ee4f9 Mon Sep 17 00:00:00 2001
From: Vlad Zusko <vladzvu11@gmail.com>
Date: Fri, 3 Jan 2025 11:37:43 +0200
Subject: [PATCH 4/4] docs: add `showColorValue` option

---
 README.md | 20 ++++++++++++++++++--
 1 file changed, 18 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index bb5ada4..746bcfc 100644
--- a/README.md
+++ b/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).