update HexTextField to accept optional label or placeholder

Author: SmartToolFactory

README.md

@@ -1,23 +1,19 @@
-### Jetpack Compose Color Picker Bundle
+# Jetpack Compose Color Picker Bundle
 
 Bundle of Stylish customizable Color pickers, selectors, colorful sliders written with Jetpack
 Compose enables users to choose from HSL, HSV or RGB color models to pick Solid colors or gradients.
 With colorful Sliders, panels, hex and color displays and various elements to create customized
 pickers based on preference.
 
-There are 10(for now) different color pickers and 3 different color+gradient pickers available to
-choose from to use as Composables or inside dialogs that are available in demos.
-
-
+There are 12, as of current version, different color pickers and 3 different color+gradient pickers
+available to choose from to use as Composables or inside dialogs that are available in demos.
 
 https://user-images.githubusercontent.com/35650605/161702454-34b0cf00-8496-4060-bfe1-bea9d1bf754d.mp4
 
-
-
 Inspired
 by [mchome's flutter_colorpicker  for Flutter](https://github.com/mchome/flutter_colorpicker)
 
-### Color Pickers
+## Color Pickers
 
 There are various selection of default color pickers and with selectors sliders, and hex displays
 it's possible to create new ones either.
@@ -30,12 +26,11 @@ it's possible to create new ones either.
 | ----------|-----------| -----------| -----------|
 | <img src="./screenshots/colorpicker/cp_rect_saturation_value_hsv.png"/> | <img src="./screenshots/colorpicker/cp_rect_saturation_lightness_hsl.png"/> | <img src="./screenshots/colorpicker/cp_circle_hue_saturation_hsv.png"/> | <img src="./screenshots/colorpicker/cp_ring_rect_hex_hsv.png"/> |
 
-| Hue-Saturation HSV |  Hue-Value HSV |  Hue-Saturation HSL  | Hue-Lightness HSL  |
+| HS HSV |  HL HSV |  HS HSL  | HL HSL  |
 | ----------|-----------| -----------| -----------|
 | <img src="./screenshots/colorpicker/cp_rect_hue_saturation_hsv.png"/> | <img src="./screenshots/colorpicker/cp_rect_hue_value_hsv.png"/> | <img src="./screenshots/colorpicker/cp_rect_hue_saturation_hsl.png"/> |  <img src="./screenshots/colorpicker/cp_rect_hue_lightness_hsl.png"/> |
 
-
-#### Implementation Hue Ring-Diamond HSL, Hue- Ring-Rect HSL,Hue Ring-Rect HSV
+### Implementation Hue Ring-Diamond HSL and ones with Ring Selectors
 
 ```
 ColorPickerRingRectHSL(
@@ -66,7 +61,7 @@ color can be set using `CompositeSliderPanel` which contains sliders for each co
 * **onColorChange** callback that is triggered when `Color` is changed
   using `SelectorRingHue` `SelectorDiamondSaturationLightnessHSL` or `CompositeSliderPanel`
 
-#### Implementation for other Color Pickers
+### Implementation for other Color Pickers
 
 ```
 ColorPickerCircleValueHSV(
@@ -81,7 +76,7 @@ ColorPickerCircleValueHSV(
 * **initialColor** color that is passed to this picker initially.
 * **onColorChange** callback that is triggered when `Color` is changed
 
-### Gradient Color Pickers
+## Gradient Color Pickers
 
 | Hue Ring-Diamond HSL | Hue Ring-Diamond HSL2 | Hue- Ring-Rect HSL | Hue Ring-Rect HSV|
 | ----------|-----------| -----------| -----------|
@@ -175,7 +170,7 @@ data class BrushColor(
 }
 ```
 
-### Demos
+## Demos
 
 * `SaturationSelectorDemo`  different type of Hue/Saturation/Value/Lightness Selectors
 * `GradientSelection`  select gradient with varying properties such as tile mode, angle, size, or
@@ -189,7 +184,7 @@ data class BrushColor(
 | ----------|-----------|-----------| -----------| -----------|
 | <img src="./screenshots/saturation.gif"/> | <img src="./screenshots/gradient_selection.gif"/> | <img src="./screenshots/gradient_angle.gif"/> |  <img src="./screenshots/hsv_hsl_gradient.gif"/> | <img src="./screenshots/colorful_sliders.gif"/> |
 
-### Completed:
+## Completed:
 
 - [x] Add Hue Picker Wheel for selecting Hue
 - [x] Add Saturation Rectangle for selecting Saturation and Lightness

colorpicker/src/main/java/com/smarttoolfactory/colorpicker/widget/HexTextField.kt

@@ -26,9 +26,17 @@ import com.smarttoolfactory.colorpicker.util.hexWithAlphaRegex
 /**
  * [TextField] that displays color in hex representation either with #RRGGBB or #AARRGGBB
  * depending on [useAlpha] flag.
- * @param colors that are used by default [TextField] to set background and many other default
- * properties.
- * @param textStyle style for [Text] of [TextField].
+ *
+ * @param colors [TextFieldColors] that will be used to resolve color of the text and content
+ * (including label, placeholder, leading and trailing icons, border) for this text field in
+ * different states. See [TextFieldDefaults.outlinedTextFieldColors]
+ * @param textStyle the style to be applied to the input text. The default [textStyle] uses the
+ * [LocalTextStyle] defined by the theme
+ * @param label the optional label to be displayed inside the text field container. The default
+ * text style for internal [Text] is [Typography.caption] when the text field is in focus and
+ * [Typography.subtitle1] when the text field is not in focus
+ * @param placeholder the optional placeholder to be displayed when the text field is in focus and
+ * the input text is empty. The default text style for internal [Text] is [Typography.subtitle1]
  * @param shape of this [TextField].
  * @param hexString string in hex format.
  * @param useAlpha when set to true returns colors in #AARRGGBB format.
@@ -47,6 +55,12 @@ fun HexTextField(
         focusedIndicatorColor = Color.Transparent,
         unfocusedIndicatorColor = Color.Transparent
     ),
+    label: @Composable () -> Unit = {
+        Text("Hex", color = Grey400)
+    },
+    placeholder: @Composable () -> Unit = {
+        Text("Enter a color", fontSize = textStyle.fontSize)
+    },
     shape: Shape = RoundedCornerShape(25),
     useAlpha: Boolean = false,
     onTextChange: (String) -> Unit,
@@ -68,8 +82,8 @@ fun HexTextField(
         textStyle = textStyle,
         colors = colors,
         shape = shape,
-        label = { Text("Hex", color = Grey400) },
-        placeholder = { Text("Enter a color", fontSize = textStyle.fontSize) },
+        label = label,
+        placeholder = placeholder,
         value = hexString.removePrefix("#"),
         onValueChange = {
 
@@ -82,8 +96,7 @@ fun HexTextField(
                 }
 
                 if (validHex) {
-                    onTextChange(it)
-
+                    onTextChange("#$it")
                     // Hex String with 6 or 8 chars matches a Color
                     if (hex.matches(it)) {
                         onColorChange(hexToColor(it))