[Xsltforms-support] Suggestion: make hint/@appearance='full' turn into inline span.

[Leigh L K. Jr <lei...@xe...>]

Th forms WG recently resolved to make hint/@appearance='minimal' put the 
hint inside the input in a desktop or mobile browser.

I propose that XSLTForms use @appearance='compact' for its current 
behavior (an icon with mouseover).

Many graphic designers want more control over hint appearance, so I 
propose @appearance='full' place the hint text inline after the form 
control.

<span class="xforms-hint*xforms-appearance-full*">
/ ... no span/@class='xforms-hint-icon"
  ... rest is the same ...
/</span>

In the @appearance='compact' case I propose
<span class="xforms-hint *xforms-appearance-compact*">
/    ...rest is the same ...
/ </span>

XSLTForms does not yet implement appearance='minimal' but when it does I 
suspect it will use the HTML5 @placeholder when that is available, so 
the form author should not rely on a span whose class is 
xforms-appearance-minimal.

The changes below to xsltforms.css are the minimal to demonstrate the 
functionality.  It might be better to output class="xforms-hint 
xforms-appearance-compact" even when there is no @appearance; then the 
default CSS would style only that the case 
.xforms-hint.xforms-appearance-compact, and the form author CSS could 
style .xforms-hint.xforms-appearance-full and not have to override any 
CSS behavior.


1. Add hint/@appearance='full'.  Make current behavior (and default with 
no @apperance) hint/@appearance='compact'
Index: xsltforms.css
===================================================================
--- xsltforms.css    (revision 66884)
+++ xsltforms.css    (working copy)
@@ -225,6 +225,17 @@
      box-sizing            : border-box;
  }

+span.xforms-hint.xforms-appearance-full > span.xforms-hint-value {
+        display                      : inline;
+    border                : none;
+    white-space: normal;
+    background-color    : transparent;
+    white-space: normal;
+    margin-top            : 0px;
+    margin-left            : 20em;
+    width                : 200px;
+}
+
  span.xforms-alert {
      display                : none;
  }
Index: xsltforms.xsl
===================================================================
--- xsltforms.xsl    (revision 66884)
+++ xsltforms.xsl    (working copy)
@@ -1215,8 +1215,17 @@
</xsl:if>
</span>
<xsl:if test="xforms:hint">
- <span class="xforms-hint">
- <span class="xforms-hint-icon" 
onmouseover="XsltForms_browser.show(this, 'hint', true)" 
onmouseout="XsltForms_browser.show(this, 'hint', 
false)">&#xA0;<xsl:text/></span>
+ <xsl:variable name="ha" select="xforms:hint/@appearance" />
+ <span>
+ <xsl:attribute name="class">
+ <xsl:choose>
+ <xsl:when test="$ha">xforms-hint xforms-appearance-<xsl:value-of 
select='$ha' /></xsl:when>
+ <xsl:otherwise>xforms-hint</xsl:otherwise>
+ </xsl:choose>
+ </xsl:attribute>
+ <xsl:if test="$ha='compact' or not($ha)">
+ <span class="xforms-hint-icon" 
onmouseover="XsltForms_browser.show(this, 'hint', true)" 
onmouseout="XsltForms_browser.show(this, 'hint', 
false)">&#xA0;<xsl:text/></span>
+ </xsl:if>
<xsl:variable name="hid">
<xsl:choose>
<xsl:when test="xforms:hint/@id"><xsl:value-of 
select="xforms:hint/@id"/></xsl:when>
@@ -1231,10 +1240,10 @@
</xsl:otherwise>
</xsl:choose>
</xsl:variable>
- <span class="xforms-hint-value" id="{$hid}">
- <xsl:apply-templates select="xforms:hint/node()"/>
- </span>
- </span>
+ <span class="xforms-hint-value" id="{$hid}">
+ <xsl:apply-templates select="xforms:hint/node()"/>
+ </span>
+ </span>
</xsl:if>
<xsl:if test="xforms:help[not(@appearance='minimal')]">
<span class="xforms-help">