flystyles - npm Package Compare versions

Comparing version 1.1.13 to 1.1.14

docs/_docs/components/formElements.md

@@ -49,2 +49,16 @@ ---
 
+##### Readonly & disabled fields
+
+{% example html %}
+<div class='FormGroup'>
+  <label class='Label'>Read only input</label>
+  <input type='text' class='Input' value='This is the value' readonly />
+</div>
+
+<div class='FormGroup'>
+  <label class='Label'>Disabled input</label>
+  <input type='text' class='Input' value='This is the value' disabled />
+</div>
+{% endexample %}
+
 ##### Input sizes
@@ -91,2 +105,3 @@
 Flystyles includes validation styles for danger, warning, and success states on form controls.
+These styles can be applied either by adding the class `has-error` or `has-success` to the parent `FormGroup`, or adding to the child form element the variation `--error` or `--success`.
 
@@ -103,3 +118,3 @@ {% example html %}
 <div class="FormGroup has-error">
-  <label class="Label" for="inputError1">Input with danger</label>
+  <label class="Label" for="inputError1">Input with error</label>
   <input type="text" class="Input Input--error" id="inputError1">
@@ -110,2 +125,16 @@ <p class="FormGroup-feedback FormGroup-feedback--error">Sorry, that username's taken. Try another?</p>
 
+<div class="FormGroup has-error">
+  <label class="Label" for="textAreaError">Textarea with error</label>
+  <textarea class="Textarea" id="textAreaError">
+  </textarea>
+</div>
+
+<div class="FormGroup has-error">
+  <label class="Label" for="selectError">Select with error</label>
+  <select class="Select" id="selectError">
+    <option>Option 1</option>
+  </select>
+</div>
+</div>
+
 {% endexample %}
@@ -112,0 +141,0 @@

docs/css-guidelines.md

@@ -146,5 +146,5 @@ ---
 
-#### componentName
+#### ComponentName
 
-The component's name must be written in upper camel case.
+The component's name must be written in **UpperCamelCase**.
 
@@ -165,3 +165,3 @@ ```css
 component in some form (e.g., for a certain configuration of the component).
-Modifier names must be written in camel case and be separated from the
+Modifier names must be written in camelCase and be separated from the
 component name by two hyphens. The class should be included in the HTML _in
@@ -185,3 +185,3 @@ addition_ to the base component class.
 descendent on behalf of a particular component. Descendent names must be
-written in camel case.
+written in camelCase.
 
@@ -202,3 +202,3 @@ ```html
 
-Use `is-stateName` to reflect changes to a component's state. The state name must be camel case.
+Use `is-stateName` or `has-stateName` to reflect changes to a component's state. Normally used for javascript interactions. The state name must be camelCase.
 **Never style these classes directly; they should always be used as an adjoining class.**
@@ -221,2 +221,8 @@
 
+```html
+<input class="Input has-error">
+  …
+</article>
+```
+
 ### Utilities
@@ -230,3 +236,3 @@
 
-Utilities must use a camel case name. What follows is an example of how various utilities can be used to create a simple structure within a component.
+Utilities must use a camelCase name. What follows is an example of how various utilities can be used to create a simple structure within a component.
 
@@ -233,0 +239,0 @@ ```html

package.json

 {
   "name": "flystyles",
-  "version": "1.1.13",
+  "version": "1.1.14",
   "description": "Flywire UI Framework",
@@ -5,0 +5,0 @@ "author": "Javier Arques <[e-mail]>",

No alert changes

Improved metrics

Total package byte prevSize

1024979

increased by35.7%

Number of package files

121

increased by9.01%

Lines of code

3955

increased by1.28%

No dependency changes