fix: color picker error message fix (#2472)

* fix: color picker error message fix * fix: PR review
openedx · Aug 11, 2023 · cbfb47f · cbfb47f
1 parent eefd0f6
commit cbfb47f
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 11 deletions.
diff --git a/src/ColorPicker/index.jsx b/src/ColorPicker/index.jsx
@@ -67,14 +67,16 @@ function ColorPicker({
         >
           <HexColorPicker color={color || ''} onChange={setColor} />
           <Form.Group className="pgn__hex-form" size="sm">
-            <h5>Hex</h5>
-            <Form.Control
-              className="form-field"
-              isInvalid={!hexValid}
-              value={color}
-              onChange={(e) => validateHex(e.target.value)}
-              data-testid="hex-input"
-            />
+            <div>
+              <Form.Label className="pgn__hex-label">Hex</Form.Label>
+              <Form.Control
+                className="pgn__hex-field"
+                isInvalid={!hexValid}
+                value={color}
+                onChange={(e) => validateHex(e.target.value)}
+                data-testid="hex-input"
+              />
+            </div>
             {!hexValid && (
               <Form.Control.Feedback
                 className="pgn__color-error"

diff --git a/src/ColorPicker/index.scss b/src/ColorPicker/index.scss
@@ -33,18 +33,28 @@
 
 .pgn__color-error {
   font-size: 70%;
+  flex: 1 1 auto;
+  margin-left: .5rem;
+}
+
+.pgn__hex-label {
+  font-weight: bold;
+  font-size: $h5-mobile-font-size;
+  padding: .5rem;
+  margin-bottom: 0 !important;
 }
 
 .pgn__hex-form {
   display: flex;
   max-width: 180px;
   margin: 5px;
+  flex-wrap: wrap;
 
-  h5 {
-    margin: 10px;
+  div {
+    display: inline-flex;
   }
 
-  .form-field {
+  .pgn__hex-field {
     @media (min-width: map-get($grid-breakpoints, "sm")) {
       margin-inline-end: 0;
     }