Bootstrap 5: add support for color input

nepada · Dec 28, 2023 · 6ddc37c · 6ddc37c
1 parent 482e3c7
commit 6ddc37c
Show file tree

Hide file tree

Showing 28 changed files with 207 additions and 19 deletions.
diff --git a/src/FormRenderer/templates/bootstrap5.latte b/src/FormRenderer/templates/bootstrap5.latte
@@ -173,6 +173,15 @@
     ">
 {/define}
 
+{define #input-type-color}
+    <input n:name="$control" n:class="
+        $control->getControlPrototype()->class,
+        form-control,
+        form-control-color,
+        ($control|validationClass)
+    ">
+{/define}
+
 {define #input-type-checkbox}
     <div n:class="
         $control->getSeparatorPrototype()->class,

diff --git a/tests/FormRenderer/Bootstrap5RendererTest.phpt b/tests/FormRenderer/Bootstrap5RendererTest.phpt
@@ -75,6 +75,7 @@ class Bootstrap5RendererTest extends TestCase
             'inlineradiolist' => '1',
             'range' => 10,
             'switch' => true,
+            'color' => '#ff0000',
         ]);
         HtmlAssert::matchFile(__DIR__ . "/expected/bootstrap5-{$mode}-renderValidState.html", $form->__toString(), 'render valid state');
     }
@@ -225,6 +226,9 @@ class Bootstrap5RendererTest extends TestCase
         $range = $form->addText('range', 'Range');
         $range->setHtmlType('range')->setOption('type', 'range');
 
+        $color = $form->addText('color', 'Color');
+        $color->setHtmlType('color')->setOption('type', 'color');
+
         $switch = $form->addCheckbox('switch', 'Switch');
         $switch->setOption('type', 'switch');
         $switch->setOption('description', 'Switch description');

diff --git a/tests/FormRenderer/expected/bootstrap5-basic-controlDescription.html b/tests/FormRenderer/expected/bootstrap5-basic-controlDescription.html
@@ -135,8 +135,14 @@
     <input type="range" name="range" id="frm-range" class="form-range align-top">
 
     <div class="form-text">Control range description.</div>
+    </div>
 
+    <div class="mb-3">
+    <label class="form-label" for="frm-color">Color</label>
+    <input class="form-control form-control-color" id="frm-color" name="color" type="color">
+    <div class="form-text">Control color description.</div>
     </div>
+
     <div class="mb-3">
     <div class="form-check form-switch">
         <input type="checkbox" name="switch" id="frm-switch" class="form-check-input">

diff --git a/tests/FormRenderer/expected/bootstrap5-basic-customControlClass.html b/tests/FormRenderer/expected/bootstrap5-basic-customControlClass.html
@@ -120,9 +120,13 @@
     <div class="custom-range mb-3">
     <label class="form-label" for="frm-range">Range</label>
     <input type="range" name="range" id="frm-range" class="form-range align-top">
+    </div>
 
-
+    <div class="custom-color mb-3">
+    <label class="form-label" for="frm-color">Color</label>
+    <input class="form-control form-control-color" id="frm-color" name="color" type="color">
     </div>
+
     <div class="custom-switch mb-3">
     <div class="form-check form-switch">
         <input type="checkbox" name="switch" id="frm-switch" class="form-check-input">

diff --git a/tests/FormRenderer/expected/bootstrap5-basic-customControlId.html b/tests/FormRenderer/expected/bootstrap5-basic-customControlId.html
@@ -118,9 +118,13 @@
     <div id="custom-range" class="mb-3">
     <label class="form-label" for="frm-range">Range</label>
     <input type="range" name="range" id="frm-range" class="form-range align-top">
+    </div>
 
-
+    <div id="custom-color" class="mb-3">
+    <label class="form-label" for="frm-color">Color</label>
+    <input class="form-control form-control-color" id="frm-color" name="color" type="color">
     </div>
+
     <div id="custom-switch" class="mb-3">
     <div class="form-check form-switch">
         <input type="checkbox" name="switch" id="frm-switch" class="form-check-input">

diff --git a/tests/FormRenderer/expected/bootstrap5-basic-errors-tooltips.html b/tests/FormRenderer/expected/bootstrap5-basic-errors-tooltips.html
@@ -132,6 +132,13 @@
 </div>
 </div>
 <div class="mb-3">
+<label class="form-label" for="frm-color">Color</label>
+<div class="position-relative">
+<input class="form-control form-control-color is-invalid" id="frm-color" name="color" type="color">
+<div class="d-block invalid-tooltip">Control color error 1. Control color error 2.</div>
+</div>
+</div>
+<div class="mb-3">
 <div class="position-relative">
 <div class="form-check form-switch">
 <input type="checkbox" name="switch" id="frm-switch" class="form-check-input is-invalid">

diff --git a/tests/FormRenderer/expected/bootstrap5-basic-errors.html b/tests/FormRenderer/expected/bootstrap5-basic-errors.html
@@ -155,8 +155,15 @@
 
             <div class="d-block invalid-feedback">Control range error 1.</div>
         <div class="d-block invalid-feedback">Control range error 2.</div>
+    </div>
 
+    <div class="mb-3">
+    <label class="form-label" for="frm-color">Color</label>
+    <input class="form-control form-control-color is-invalid" id="frm-color" name="color" type="color">
+    <div class="d-block invalid-feedback">Control color error 1.</div>
+    <div class="d-block invalid-feedback">Control color error 2.</div>
     </div>
+
     <div class="mb-3">
     <div class="form-check form-switch">
         <input type="checkbox" name="switch" id="frm-switch" class="form-check-input is-invalid">

diff --git a/tests/FormRenderer/expected/bootstrap5-basic-imports.html b/tests/FormRenderer/expected/bootstrap5-basic-imports.html
@@ -77,9 +77,13 @@
     <div class="mb-3">
     <label class="form-label" for="frm-range">Range</label>
     <input type="range" name="range" id="frm-range" class="form-range align-top">
+    </div>
 
-
+    <div class="mb-3">
+    <label class="form-label" for="frm-color">Color</label>
+    <input class="form-control form-control-color" id="frm-color" name="color" type="color">
     </div>
+
     <div class="mb-3">
     <div class="form-check form-switch">
         <input type="checkbox" name="switch" id="frm-switch" class="form-check-input">

diff --git a/tests/FormRenderer/expected/bootstrap5-basic-renderValidState.html b/tests/FormRenderer/expected/bootstrap5-basic-renderValidState.html
@@ -119,9 +119,13 @@
     <div class="mb-3">
     <label class="form-label" for="frm-range">Range</label>
     <input type="range" name="range" id="frm-range" value="10" class="form-range align-top is-valid">
+    </div>
 
-
+    <div class="mb-3">
+    <label class="form-label" for="frm-color">Color</label>
+    <input class="form-control form-control-color is-valid" id="frm-color" name="color" type="color" value="#ff0000">
     </div>
+
     <div class="mb-3">
     <div class="form-check form-switch">
         <input type="checkbox" name="switch" id="frm-switch" checked class="form-check-input is-valid">

diff --git a/tests/FormRenderer/expected/bootstrap5-basic-requiredControl.html b/tests/FormRenderer/expected/bootstrap5-basic-requiredControl.html
@@ -116,9 +116,13 @@
     <div class="mb-3 required">
     <label class="form-label" for="frm-range">Range</label>
     <input type="range" name="range" id="frm-range" required data-nette-rules='[{"op":":filled","msg":"REQUIRED"}]' class="form-range align-top">
+    </div>
 
-
+    <div class="mb-3 required">
+    <label class="form-label" for="frm-color">Color</label>
+    <input class="form-control form-control-color" data-nette-rules='[{"op":":filled","msg":"REQUIRED"}]' id="frm-color" name="color" required type="color">
     </div>
+
     <div class="mb-3 required">
     <div class="form-check form-switch">
         <input type="checkbox" name="switch" id="frm-switch" required data-nette-rules='[{"op":":filled","msg":"REQUIRED"}]' class="form-check-input">

diff --git a/tests/FormRenderer/expected/bootstrap5-basic.html b/tests/FormRenderer/expected/bootstrap5-basic.html
@@ -120,9 +120,13 @@
     <div class="mb-3">
     <label class="form-label" for="frm-range">Range</label>
     <input type="range" name="range" id="frm-range" class="form-range align-top">
+    </div>
 
-
+    <div class="mb-3">
+    <label class="form-label" for="frm-color">Color</label>
+    <input class="form-control form-control-color" id="frm-color" name="color" type="color">
     </div>
+
     <div class="mb-3">
     <div class="form-check form-switch">
         <input type="checkbox" name="switch" id="frm-switch" class="form-check-input">

diff --git a/tests/FormRenderer/expected/bootstrap5-horizontal-controlDescription.html b/tests/FormRenderer/expected/bootstrap5-horizontal-controlDescription.html
@@ -152,11 +152,18 @@
     <label class="col-sm-3 col-form-label pt-sm-0" for="frm-range">Range</label>
         <div class="col-sm-9">
     <input type="range" name="range" id="frm-range" class="form-range align-top">
-
     <div class="form-text">Control range description.</div>
-
         </div>
     </div>
+
+    <div class="mb-3 row">
+    <label class="col-sm-3 col-form-label" for="frm-color">Color</label>
+    <div class="col-sm-9">
+    <input type="color" name="color" id="frm-color" class="form-control form-control-color">
+    <div class="form-text">Control color description.</div>
+    </div>
+    </div>
+
     <div class="mb-3 row">
         <div class="col-sm-9 offset-sm-3">
     <div class="form-check form-switch">

diff --git a/tests/FormRenderer/expected/bootstrap5-horizontal-customControlClass.html b/tests/FormRenderer/expected/bootstrap5-horizontal-customControlClass.html
@@ -139,10 +139,16 @@
     <label class="col-sm-3 col-form-label pt-sm-0" for="frm-range">Range</label>
         <div class="col-sm-9">
     <input type="range" name="range" id="frm-range" class="form-range align-top">
+    </div>
+    </div>
 
-
-        </div>
+    <div class="custom-color mb-3 row">
+    <label class="col-sm-3 col-form-label" for="frm-color">Color</label>
+    <div class="col-sm-9">
+    <input type="color" name="color" id="frm-color" class="form-control form-control-color">
+    </div>
     </div>
+
     <div class="custom-switch mb-3 row">
         <div class="col-sm-9 offset-sm-3">
     <div class="form-check form-switch">

diff --git a/tests/FormRenderer/expected/bootstrap5-horizontal-customControlId.html b/tests/FormRenderer/expected/bootstrap5-horizontal-customControlId.html
@@ -140,10 +140,16 @@
     <label class="col-sm-3 col-form-label pt-sm-0" for="frm-range">Range</label>
         <div class="col-sm-9">
     <input type="range" name="range" id="frm-range" class="form-range align-top">
-
-
         </div>
     </div>
+
+    <div id="custom-color" class="mb-3 row">
+    <label class="col-sm-3 col-form-label" for="frm-color">Color</label>
+    <div class="col-sm-9">
+    <input type="color" name="color" id="frm-color" class="form-control form-control-color">
+    </div>
+    </div>
+
     <div id="custom-switch" class="mb-3 row">
         <div class="col-sm-9 offset-sm-3">
     <div class="form-check form-switch">

diff --git a/tests/FormRenderer/expected/bootstrap5-horizontal-errors-tooltips.html b/tests/FormRenderer/expected/bootstrap5-horizontal-errors-tooltips.html
@@ -156,6 +156,15 @@
 </div>
 </div>
 <div class="mb-3 row">
+<label class="col-sm-3 col-form-label" for="frm-color">Color</label>
+<div class="col-sm-9">
+<div class="position-relative">
+<input type="color" name="color" id="frm-color" class="form-control form-control-color is-invalid">
+<div class="d-block invalid-tooltip">Control color error 1. Control color error 2.</div>
+</div>
+</div>
+</div>
+<div class="mb-3 row">
 <div class="col-sm-9 offset-sm-3">
 <div class="position-relative">
 <div class="form-check form-switch">

diff --git a/tests/FormRenderer/expected/bootstrap5-horizontal-errors.html b/tests/FormRenderer/expected/bootstrap5-horizontal-errors.html
@@ -181,6 +181,18 @@
 
         </div>
     </div>
+
+
+    <div class="mb-3 row">
+    <label class="col-sm-3 col-form-label" for="frm-color">Color</label>
+    <div class="col-sm-9">
+    <input type="color" name="color" id="frm-color" class="form-control form-control-color is-invalid">
+    <div class="d-block invalid-feedback">Control color error 1.</div>
+    <div class="d-block invalid-feedback">Control color error 2.</div>
+    </div>
+    </div>
+
+
     <div class="mb-3 row">
         <div class="col-sm-9 offset-sm-3">
     <div class="form-check form-switch">

diff --git a/tests/FormRenderer/expected/bootstrap5-horizontal-imports.html b/tests/FormRenderer/expected/bootstrap5-horizontal-imports.html
@@ -95,10 +95,16 @@
     <label class="col-sm-3 col-form-label pt-sm-0" for="frm-range">Range</label>
         <div class="col-sm-9">
     <input type="range" name="range" id="frm-range" class="form-range align-top">
-
-
         </div>
     </div>
+
+    <div class="mb-3 row">
+    <label class="col-sm-3 col-form-label" for="frm-color">Color</label>
+    <div class="col-sm-9">
+    <input type="color" name="color" id="frm-color" class="form-control form-control-color">
+    </div>
+    </div>
+
     <div class="mb-3 row">
         <div class="col-sm-9 offset-sm-3">
     <div class="form-check form-switch">

diff --git a/tests/FormRenderer/expected/bootstrap5-horizontal-renderValidState.html b/tests/FormRenderer/expected/bootstrap5-horizontal-renderValidState.html
@@ -141,10 +141,17 @@
     <label class="col-sm-3 col-form-label pt-sm-0" for="frm-range">Range</label>
         <div class="col-sm-9">
     <input type="range" name="range" id="frm-range" value="10" class="form-range align-top is-valid">
+        </div>
+    </div>
 
 
-        </div>
+    <div class="mb-3 row">
+    <label class="col-sm-3 col-form-label" for="frm-color">Color</label>
+    <div class="col-sm-9">
+    <input type="color" name="color" id="frm-color" class="form-control form-control-color is-valid" value="#ff0000">
+    </div>
     </div>
+
     <div class="mb-3 row">
         <div class="col-sm-9 offset-sm-3">
     <div class="form-check form-switch">

diff --git a/tests/FormRenderer/expected/bootstrap5-horizontal-requiredControl.html b/tests/FormRenderer/expected/bootstrap5-horizontal-requiredControl.html
@@ -139,10 +139,16 @@
     <label class="col-sm-3 col-form-label pt-sm-0" for="frm-range">Range</label>
         <div class="col-sm-9">
     <input type="range" name="range" id="frm-range" required data-nette-rules='[{"op":":filled","msg":"REQUIRED"}]' class="form-range align-top">
-
-
         </div>
     </div>
+
+    <div class="mb-3 row required">
+    <label class="col-sm-3 col-form-label" for="frm-color">Color</label>
+    <div class="col-sm-9">
+    <input type="color" name="color" id="frm-color" required data-nette-rules='[{"op":":filled","msg":"REQUIRED"}]' class="form-control form-control-color">
+    </div>
+    </div>
+
     <div class="mb-3 row required">
         <div class="col-sm-9 offset-sm-3">
     <div class="form-check form-switch">

diff --git a/tests/FormRenderer/expected/bootstrap5-horizontal.html b/tests/FormRenderer/expected/bootstrap5-horizontal.html
@@ -139,10 +139,16 @@
     <label class="col-sm-3 col-form-label pt-sm-0" for="frm-range">Range</label>
         <div class="col-sm-9">
     <input type="range" name="range" id="frm-range" class="form-range align-top">
+     </div>
+    </div>
 
-
-        </div>
+    <div class="mb-3 row">
+    <label class="col-sm-3 col-form-label" for="frm-color">Color</label>
+    <div class="col-sm-9">
+    <input type="color" name="color" id="frm-color" class="form-control form-control-color">
+    </div>
     </div>
+
     <div class="mb-3 row">
         <div class="col-sm-9 offset-sm-3">
     <div class="form-check form-switch">

diff --git a/tests/FormRenderer/expected/bootstrap5-inline-controlDescription.html b/tests/FormRenderer/expected/bootstrap5-inline-controlDescription.html
@@ -155,6 +155,15 @@
 </div>
 <div class="col-12">
 <div class="row row-cols-sm-auto g-2 align-items-baseline">
+<label class="col-12" for="frm-color">Color</label>
+<div class="position-relative col-12">
+<input type="color" name="color" id="frm-color" class="form-control form-control-color">
+</div>
+<div class="form-text col-auto">Control color description.</div>
+</div>
+</div>
+<div class="col-12">
+<div class="row row-cols-sm-auto g-2 align-items-baseline">
 <div class="position-relative col-12">
 <div class="form-check form-switch">
 <input type="checkbox" name="switch" id="frm-switch" class="form-check-input">

diff --git a/tests/FormRenderer/expected/bootstrap5-inline-customControlClass.html b/tests/FormRenderer/expected/bootstrap5-inline-customControlClass.html
@@ -140,6 +140,14 @@
 </div>
 </div>
 <div class="col-12">
+<div class="custom-color row row-cols-sm-auto g-2 align-items-baseline">
+<label class="col-12" for="frm-color">Color</label>
+<div class="position-relative col-12">
+<input type="color" name="color" id="frm-color" class="form-control form-control-color">
+</div>
+</div>
+</div>
+<div class="col-12">
 <div class="custom-switch row row-cols-sm-auto g-2 align-items-baseline">
 <div class="position-relative col-12">
 <div class="form-check form-switch">

diff --git a/tests/FormRenderer/expected/bootstrap5-inline-customControlId.html b/tests/FormRenderer/expected/bootstrap5-inline-customControlId.html
@@ -140,6 +140,14 @@
 </div>
 </div>
 <div class="col-12">
+<div class="row row-cols-sm-auto g-2 align-items-baseline" id="custom-color">
+<label class="col-12" for="frm-color">Color</label>
+<div class="position-relative col-12">
+<input type="color" name="color" id="frm-color" class="form-control form-control-color">
+</div>
+</div>
+</div>
+<div class="col-12">
 <div class="row row-cols-sm-auto g-2 align-items-baseline" id="custom-switch">
 <div class="position-relative col-12">
 <div class="form-check form-switch">