VDOM improvements

core/src/main/scala/japgolly/scalajs/react/vdom/Attr.scala

@@ -12,12 +12,12 @@ import Attr.ValueType
 /**
   * @tparam U Underlying type of the value required by this attribute.
   */
-abstract class Attr[-U](final val name: String) {
-  override final def toString = s"VdomAttr{name=$name}"
+abstract class Attr[-U](final val attrName: String) {
+  override final def toString = s"VdomAttr{name=$attrName}"
 
-  override def hashCode = name.##
+  override def hashCode = attrName.##
   override def equals(any: Any) = any match {
-    case that: Attr[_] => this.name == that.name
+    case that: Attr[_] => this.attrName == that.attrName
     case _                  => false
   }
 
@@ -51,9 +51,9 @@ object Attr {
     else
       Dud
 
-  class Generic[-U](name: String) extends Attr[U](name) {
+  class Generic[-U](attrName: String) extends Attr[U](attrName) {
     override def :=[A](a: A)(implicit t: ValueType[A, U]): TagMod =
-      t(name, a)
+      t(attrName, a)
   }
 
   final class Event[E[+x <: dom.Node] <: raw.SyntheticEvent[x]](name: String)
@@ -116,7 +116,7 @@ object Attr {
 
   object Ref extends Attr[raw.React.RefFn[_ <: TopNode]]("ref") {
     override def :=[A](a: A)(implicit t: ValueType[A, raw.React.RefFn[_ <: TopNode]]) =
-      t(name, a)
+      t(attrName, a)
     private[vdom] def apply[N <: TopNode](r: japgolly.scalajs.react.Ref.Set[N]): TagMod =
       :=(r.rawSetFn)(ValueType.direct)
   }

core/src/main/scala/japgolly/scalajs/react/vdom/HtmlAttrs.scala

@@ -223,17 +223,69 @@ trait HtmlAttrs {
 
   final def autoCapitalize = VdomAttr("autoCapitalize")
 
-  /**
-    * This attribute indicates whether the value of the control can be
+  /** This attribute indicates whether the value of the control can be
     * automatically completed by the browser. This attribute is ignored if the
     * value of the type attribute is hidden, checkbox, radio, file, or a button
     * type (button, submit, reset, image).
-    *
-    * Possible values are "off" and "on"
     */
-  object autoComplete extends VdomAttr.Generic("autoComplete") {
-    def on  = this := "on"
-    def off = this := "off"
+  final object autoComplete extends VdomAttr.Generic("autoComplete") {
+    def additionalName      = this := "additional-name"
+    def addressLevel1       = this := "address-level1"
+    def addressLevel2       = this := "address-level2"
+    def addressLevel3       = this := "address-level3"
+    def addressLevel4       = this := "address-level4"
+    def addressLine1        = this := "address-line1"
+    def addressLine2        = this := "address-line2"
+    def addressLine3        = this := "address-line3"
+    def bday                = this := "bday"
+    def bdayDay             = this := "bday-day"
+    def bdayMonth           = this := "bday-month"
+    def bdayYear            = this := "bday-year"
+    def ccAdditionalName    = this := "cc-additional-name"
+    def ccCsc               = this := "cc-csc"
+    def ccExp               = this := "cc-exp"
+    def ccExpMonth          = this := "cc-exp-month"
+    def ccExpYear           = this := "cc-exp-year"
+    def ccFamilyName        = this := "cc-family-name"
+    def ccGivenName         = this := "cc-given-name"
+    def ccName              = this := "cc-name"
+    def ccNumber            = this := "cc-number"
+    def ccType              = this := "cc-type"
+    def country             = this := "country"
+    def countryName         = this := "country-name"
+    def currentPassword     = this := "current-password"
+    def email               = this := "email"
+    def familyName          = this := "family-name"
+    def givenName           = this := "given-name"
+    def honorificPrefix     = this := "honorific-prefix"
+    def honorificSuffix     = this := "honorific-suffix"
+    def impp                = this := "impp"
+    def language            = this := "language"
+    def name                = this := "name"
+    def newPassword         = this := "new-password"
+    def nickname            = this := "nickname"
+    def off                 = this := "off"
+    def on                  = this := "on"
+    def oneTimeCode         = this := "one-time-code"
+    def organization        = this := "organization"
+    def organizationTitle   = this := "organization-title"
+    def photo               = this := "photo"
+    def postalCode          = this := "postal-code"
+    def sex                 = this := "sex"
+    def streetAddress       = this := "street-address"
+    def tel                 = this := "tel"
+    def telAreaCode         = this := "tel-area-code"
+    def telCountryCode      = this := "tel-country-code"
+    def telExtension        = this := "tel-extension"
+    def telLocal            = this := "tel-local"
+    def telLocalPrefix      = this := "tel-local-prefix"
+    def telLocalSuffix      = this := "tel-local-suffix"
+    def telNational         = this := "tel-national"
+    def transactionAmount   = this := "transaction-amount"
+    def transactionCurrency = this := "transaction-currency"
+    def url                 = this := "url"
+    def username            = this := "username"
+    def usernameEmail       = this := "username email"
   }
 
   final def autoCorrect = VdomAttr[Boolean]("autoCorrect")
@@ -494,7 +546,7 @@ trait HtmlAttrs {
     */
   final def max = VdomAttr("max")
 
-  final def maxLength = VdomAttr("maxLength")
+  final def maxLength = VdomAttr[Int]("maxLength")
 
   /**
     * This attribute specifies the media which the linked resource applies to.
@@ -531,7 +583,7 @@ trait HtmlAttrs {
     */
   final def min = VdomAttr("min")
 
-  final def minLength = VdomAttr("minLength")
+  final def minLength = VdomAttr[Int]("minLength")
 
   final def multiple = VdomAttr[Boolean]("multiple")
 
@@ -1041,6 +1093,13 @@ trait HtmlAttrs {
     */
   final def optimum = VdomAttr("optimum")
 
+  /** The pattern attribute specifies a regular expression against which the control’s value, or, when the multiple
+    * attribute applies and is set, the control’s values, are to be checked.
+    *
+    * @see https://www.w3.org/TR/html5/sec-forms.html#the-pattern-attribute
+    */
+  final def pattern = VdomAttr[String]("pattern")
+
   /**
     * A hint to the user of what can be entered in the control. The placeholder
     * text must not contain carriage returns or line-feeds. This attribute

core/src/main/scala/japgolly/scalajs/react/vdom/HtmlStyles.scala

@@ -2514,7 +2514,9 @@ trait HtmlStyles {
     *   * . - a period signifies an empty grid cell
     *   * none - no grid areas are defined
     */
-  final def gridTemplateAreas = Style[String]("gridTemplateAreas")
+  final object gridTemplateAreas extends Style[String]("gridTemplateAreas") {
+    def apply(rows: String*) = this := rows.mkString("'", "' '", "'")
+  }
 
   /**
     * Specifies the size of the grid lines. You can think of it like setting the

doc/changelog/1.4.2.md

@@ -6,12 +6,19 @@
   * `AsyncCallback#flatten` wouldn't compile (oops)
   * `AsyncCallback.fromFuture` should be sync if future already complete
   * `AsyncCallback.promise` should be sync if promise already complete
-  * Fix bug where in `fullOptJS`, using a key and a ref would result in the key being lost.
-  * Fix CSS-Grid style definitions to not cause React warnings
+  * Fix bug where in `fullOptJS`, using a key and a ref would result in the key being lost
 
 * Add an immediately-deprecated `AsyncCallback.fromCallback[A](c: CallbackTo[A]): AsyncCallback[A]`
   which points users to use `c.asAsyncCallback`.
 
+* VDOM improvements
+  * Add helper methods to the `autoComplete` attribute, eg. `^.autoComplete.currentPassword`
+  * `minLength` and `maxLength` now only accept ints
+  * Add `pattern` attribute
+  * Fix CSS-Grid style definitions to not cause React warnings
+  * `gridTemplateAreas` has a new optional syntax: `^.gridTemplateAreas("a a", "b c", "b c")`
+    which is equivalent to `^.gridTemplateAreas := "'a a' 'b c' 'b c'"`
+
 * Dependency upgrades
   * Cats 1.6.0
   * Scala.JS 0.6.27