From 224ab68e305ce0d1ad9a4de3b14b99cc294f22a3 Mon Sep 17 00:00:00 2001
From: stephanrauh <stephan@beyondjava.de>
Date: Thu, 28 May 2015 22:23:29 +0200
Subject: [PATCH] Added documentation for the CSS pseudo class bf-required
 (issue #96)

---
 src/main/webapp/forms/inputText.xhtml     | 18 +++++++++++++++++-
 src/main/webapp/forms/selectOneMenu.xhtml | 10 ++++++++--
 2 files changed, 25 insertions(+), 3 deletions(-)

diff --git a/src/main/webapp/forms/inputText.xhtml b/src/main/webapp/forms/inputText.xhtml
index 80bceb85..b872df45 100644
--- a/src/main/webapp/forms/inputText.xhtml
+++ b/src/main/webapp/forms/inputText.xhtml
@@ -129,7 +129,7 @@
                 <h:form>
                     <h:panelGrid columns="2"  cellpadding="5">
                         <h:outputText value="e-mail:"/>
-                        <b:inputText placeholder="Username">
+                        <b:inputText placeholder="Username" required="true">
                             <f:facet name="prepend">
                                 <b:icon name="user" />
                             </f:facet>
@@ -294,6 +294,22 @@
 					   </b:well>
 					</b:tab>
 				</b:tabView>
+            <b:panel look="info">
+				<f:facet name="heading">
+					<b>Skinning</b>
+				</f:facet>
+				<f:facet name="footer">
+				<ul>
+					<li>
+				   		<code>&lt;b:inputfield /&gt;</code> is an <code>input</code> tag bearing the CSS-class <code>form-control</code>.
+				   </li>
+				   <li>
+				   		If the attribute <code>required</code> is true, the pseudo CSS class <code>bf-required</code> is added. Thus you can define your custom style for required fields.
+				   </li>
+				  </ul> 
+				</f:facet>
+			</b:panel>
+				
 				<script type="text/javascript">
                     SyntaxHighlighter.all();
                 </script>
diff --git a/src/main/webapp/forms/selectOneMenu.xhtml b/src/main/webapp/forms/selectOneMenu.xhtml
index b5e7ef6f..052e22ef 100644
--- a/src/main/webapp/forms/selectOneMenu.xhtml
+++ b/src/main/webapp/forms/selectOneMenu.xhtml
@@ -506,8 +506,14 @@ public class SemaphoreBean {
 					<b>Skinning</b>
 				</f:facet>
 				<f:facet name="footer">
-				<p>
-				   The combobox is a <code>select</code> tag bearing the CSS-class <code>form-control</code>.</p>
+				<ul>
+					<li>
+				   		The combobox is a <code>select</code> tag bearing the CSS-class <code>form-control</code>.
+				   </li>
+				   <li>
+				   		If the attribute <code>required</code> is true, the pseudo CSS class <code>bf-required</code> is added. Thus you can define your custom style for required fields.
+				   </li>
+				  </ul> 
 				</f:facet>
 			</b:panel>