Add JS instructions

docs/css/bulma-docs.css

@@ -142,6 +142,10 @@ a {
   text-decoration: none;
 }
 
+a strong {
+  color: currentColor;
+}
+
 a:hover {
   color: #363636;
 }
@@ -2579,6 +2583,11 @@ a.box:active {
 }
 
 .file {
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
   align-items: stretch;
   display: flex;
   justify-content: flex-start;
@@ -2605,12 +2614,12 @@ a.box:active {
   font-size: 28px;
 }
 
-.file.has-path .file-cta {
+.file.has-name .file-cta {
   border-bottom-right-radius: 0;
   border-top-right-radius: 0;
 }
 
-.file.has-path .file-path {
+.file.has-name .file-name {
   border-bottom-left-radius: 0;
   border-top-left-radius: 0;
 }
@@ -2629,7 +2638,7 @@ a.box:active {
   padding: 1em 3em;
 }
 
-.file.is-centered .file-path {
+.file.is-centered .file-name {
   border-width: 0 1px 1px;
 }
 
@@ -2654,11 +2663,11 @@ a.box:active {
   font-size: 35px;
 }
 
-.file.is-centered.has-path .file-cta {
+.file.is-centered.has-name .file-cta {
   border-radius: 3px 3px 0 0;
 }
 
-.file.is-centered.has-path .file-path {
+.file.is-centered.has-name .file-name {
   border-radius: 0 0 3px 3px;
   border-width: 0 1px 1px;
 }
@@ -2673,21 +2682,21 @@ a.box:active {
 }
 
 .file-label:hover .file-cta {
-  background-color: #ff2b56;
+  background-color: #eeeeee;
   color: #363636;
 }
 
-.file-label:hover .file-path {
+.file-label:hover .file-name {
-  border-color: #ff2b56;
+  border-color: #eeeeee;
 }
 
 .file-label:active .file-cta {
-  background-color: #ff1f4b;
+  background-color: #e8e8e8;
   color: #363636;
 }
 
-.file-label:active .file-path {
+.file-label:active .file-name {
-  border-color: #ff1f4b;
+  border-color: #e8e8e8;
 }
 
 .file-input {
@@ -2700,7 +2709,7 @@ a.box:active {
 }
 
 .file-cta,
-.file-path {
+.file-name {
   -moz-appearance: none;
   -webkit-appearance: none;
   align-items: center;
@@ -2727,25 +2736,25 @@ a.box:active {
 }
 
 .file-cta:focus, .file-cta.is-focused, .file-cta:active, .file-cta.is-active,
-.file-path:focus,
+.file-name:focus,
-.file-path.is-focused,
+.file-name.is-focused,
-.file-path:active,
+.file-name:active,
-.file-path.is-active {
+.file-name.is-active {
   outline: none;
 }
 
 .file-cta[disabled],
-.file-path[disabled] {
+.file-name[disabled] {
   cursor: not-allowed;
 }
 
 .file-cta {
-  background-color: #ff3860;
+  background-color: whitesmoke;
   color: #4a4a4a;
 }
 
-.file-path {
+.file-name {
-  border-color: #ff3860;
+  border-color: whitesmoke;
   border-style: solid;
   border-width: 1px 1px 1px 0;
   display: block;

docs/documentation/form/file.html

@@ -2,8 +2,29 @@
 title: File upload
 layout: documentation
 doc-tab: form
-doc-subtab: upload
+doc-subtab: file
 file_name: "Screen Shot 2017-07-29 at 15.54.25.png"
+variables:
+- name: $file-border-color
+  value: transparent
+- name: $file-radius
+  value: $radius
+- name: $file-cta-background-color
+  value: $white-ter
+- name: $file-cta-color
+  value: $grey-dark
+- name: $file-cta-hover-color
+  value: $grey-darker
+- name: $file-cta-active-color
+  value: $grey-darker
+- name: $file-name-border-color
+  value: $file-cta-background-color
+- name: $file-name-border-style
+  value: solid
+- name: $file-name-border-width
+  value: 1px 1px 1px 0
+- name: $file-name-max-width
+  value: 16em
 ---
 
 {% capture file %}
@@ -22,8 +43,8 @@ file_name: "Screen Shot 2017-07-29 at 15.54.25.png"
 </div>
 {% endcapture %}
 
-{% capture file_path %}
+{% capture file_name %}
-<div class="file has-path">
+<div class="file has-name">
   <label class="file-label">
     <input class="file-input" type="file" name="resume">
     <span class="file-cta">
@@ -34,7 +55,7 @@ file_name: "Screen Shot 2017-07-29 at 15.54.25.png"
         Choose a file…
       </span>
     </span>
-    <span class="file-path">
+    <span class="file-name">
       {{ page.file_name }}
     </span>
   </label>
@@ -57,8 +78,8 @@ file_name: "Screen Shot 2017-07-29 at 15.54.25.png"
 </div>
 {% endcapture %}
 
-{% capture file_centered_path %}
+{% capture file_centered_name %}
-<div class="file is-centered has-path">
+<div class="file has-name is-centered">
   <label class="file-label">
     <input class="file-input" type="file" name="resume">
     <span class="file-cta">
@@ -69,7 +90,7 @@ file_name: "Screen Shot 2017-07-29 at 15.54.25.png"
         Choose a file…
       </span>
     </span>
-    <span class="file-path">
+    <span class="file-name">
       {{ page.file_name }}
     </span>
   </label>
@@ -142,9 +163,9 @@ file_name: "Screen Shot 2017-07-29 at 15.54.25.png"
 </div>
 {% endcapture %}
 
-{% capture file_sizes_path %}
+{% capture file_sizes_name %}
 <div class="field">
-  <div class="file is-small has-path">
+  <div class="file is-small has-name">
     <label class="file-label">
       <input class="file-input" type="file" name="resume">
       <span class="file-cta">
@@ -155,7 +176,7 @@ file_name: "Screen Shot 2017-07-29 at 15.54.25.png"
           Small file…
         </span>
       </span>
-      <span class="file-path">
+      <span class="file-name">
         {{ page.file_name }}
       </span>
     </label>
@@ -163,7 +184,7 @@ file_name: "Screen Shot 2017-07-29 at 15.54.25.png"
 </div>
 
 <div class="field">
-  <div class="file has-path">
+  <div class="file has-name">
     <label class="file-label">
       <input class="file-input" type="file" name="resume">
       <span class="file-cta">
@@ -174,7 +195,7 @@ file_name: "Screen Shot 2017-07-29 at 15.54.25.png"
           Normal file…
         </span>
       </span>
-      <span class="file-path">
+      <span class="file-name">
         {{ page.file_name }}
       </span>
     </label>
@@ -182,7 +203,7 @@ file_name: "Screen Shot 2017-07-29 at 15.54.25.png"
 </div>
 
 <div class="field">
-  <div class="file is-medium has-path">
+  <div class="file is-medium has-name">
     <label class="file-label">
       <input class="file-input" type="file" name="resume">
       <span class="file-cta">
@@ -193,7 +214,7 @@ file_name: "Screen Shot 2017-07-29 at 15.54.25.png"
           Medium file…
         </span>
       </span>
-      <span class="file-path">
+      <span class="file-name">
         {{ page.file_name }}
       </span>
     </label>
@@ -201,7 +222,7 @@ file_name: "Screen Shot 2017-07-29 at 15.54.25.png"
 </div>
 
 <div class="field">
-  <div class="file is-large has-path">
+  <div class="file is-large has-name">
     <label class="file-label">
       <input class="file-input" type="file" name="resume">
       <span class="file-cta">
@@ -212,7 +233,7 @@ file_name: "Screen Shot 2017-07-29 at 15.54.25.png"
           Large file…
         </span>
       </span>
-      <span class="file-path">
+      <span class="file-name">
         {{ page.file_name }}
       </span>
     </label>
@@ -286,9 +307,9 @@ file_name: "Screen Shot 2017-07-29 at 15.54.25.png"
 </div>
 {% endcapture %}
 
-{% capture file_sizes_centered_path %}
+{% capture file_sizes_centered_name %}
 <div class="field">
-  <div class="file is-small is-centered has-path">
+  <div class="file is-small is-centered has-name">
     <label class="file-label">
       <input class="file-input" type="file" name="resume">
       <span class="file-cta">
@@ -299,7 +320,7 @@ file_name: "Screen Shot 2017-07-29 at 15.54.25.png"
           Small file…
         </span>
       </span>
-      <span class="file-path">
+      <span class="file-name">
         {{ page.file_name }}
       </span>
     </label>
@@ -307,7 +328,7 @@ file_name: "Screen Shot 2017-07-29 at 15.54.25.png"
 </div>
 
 <div class="field">
-  <div class="file is-centered has-path">
+  <div class="file is-centered has-name">
     <label class="file-label">
       <input class="file-input" type="file" name="resume">
       <span class="file-cta">
@@ -318,7 +339,7 @@ file_name: "Screen Shot 2017-07-29 at 15.54.25.png"
           Normal file…
         </span>
       </span>
-      <span class="file-path">
+      <span class="file-name">
         {{ page.file_name }}
       </span>
     </label>
@@ -326,7 +347,7 @@ file_name: "Screen Shot 2017-07-29 at 15.54.25.png"
 </div>
 
 <div class="field">
-  <div class="file is-medium is-centered has-path">
+  <div class="file is-medium is-centered has-name">
     <label class="file-label">
       <input class="file-input" type="file" name="resume">
       <span class="file-cta">
@@ -337,7 +358,7 @@ file_name: "Screen Shot 2017-07-29 at 15.54.25.png"
           Medium file…
         </span>
       </span>
-      <span class="file-path">
+      <span class="file-name">
         {{ page.file_name }}
       </span>
     </label>
@@ -345,7 +366,7 @@ file_name: "Screen Shot 2017-07-29 at 15.54.25.png"
 </div>
 
 <div class="field">
-  <div class="file is-large is-centered has-path">
+  <div class="file is-large is-centered has-name">
     <label class="file-label">
       <input class="file-input" type="file" name="resume">
       <span class="file-cta">
@@ -356,7 +377,7 @@ file_name: "Screen Shot 2017-07-29 at 15.54.25.png"
           Large file…
         </span>
       </span>
-      <span class="file-path">
+      <span class="file-name">
         {{ page.file_name }}
       </span>
     </label>
@@ -385,11 +406,37 @@ file_name: "Screen Shot 2017-07-29 at 15.54.25.png"
 
     <div class="content">
       <p>
-        The <code>.file</code> class is a simple wrapper around the <code>&lt;input type="radio"&gt;</code> HTML elements. It is intentionally not styled, to preserve cross-browser compatibility and the user experience.
+        The <code>.file</code> element is a simple <strong>interactive label</strong> that wraps an <code>&lt;input type="file"&gt;</code>. It comprises several sub-elements:
-      </p>
-      <p>
-        Make sure the linked radio buttons have the <strong>same value</strong> for their <code>name</code> HTML attribute.
       </p>
+      <ul>
+        <li>
+          <code>.file</code> the main <strong>container</strong>
+          <ul>
+            <li>
+              <code>.file-label</code> the actual <strong>interactive</strong> and clickable part of the element
+              <ul>
+                <li>
+                  <code>.file-input</code> the <strong>native</strong> file input, hidden for styling purposes
+                </li>
+                <li>
+                  <code>.file-cta</code> the upload <strong>call-to-action</strong>
+                  <ul>
+                    <li>
+                      <code>.file-icon</code> an optional <strong>upload</strong> icon
+                    </li>
+                    <li>
+                      <code>.file-label</code> the "Choose a file…" text
+                    </li>
+                  </ul>
+                </li>
+                <li>
+                  <code>.file-name</code> a container for the <strong>chosen file</strong> name
+                </li>
+              </ul>
+            </li>
+          </ul>
+        </li>
+      </ul>
     </div>
 
     <div class="columns">
@@ -407,17 +454,27 @@ file_name: "Screen Shot 2017-07-29 at 15.54.25.png"
 
     <div class="columns">
       <div class="column">
+        <div class="content">
+          <p>
+            With the <code>.has-name</code> modifier combined with the <code>.file-name</code> element, you can add a <strong>placeholder</strong> for the selected file name.
+          </p>
+        </div>
         <div class="example">
-          {{ file_path }}
+          {{ file_name }}
         </div>
       </div>
       <div class="column highlight-full">
-        {% highlight html %}{{ file_path }}{% endhighlight %}
+        {% highlight html %}{{ file_name }}{% endhighlight %}
       </div>
     </div>
 
     <div class="columns">
       <div class="column">
+        <div class="content">
+          <p>
+            You can have a <strong>centered block</strong> with the <code>.is-centered</code> modifier.
+          </p>
+        </div>
         <div class="example">
           {{ file_centered }}
         </div>
@@ -429,17 +486,39 @@ file_name: "Screen Shot 2017-07-29 at 15.54.25.png"
 
     <div class="columns">
       <div class="column">
+        <div class="content">
+          <p>
+            You can <strong>combine</strong> <code>.has-name</code> and <code>.is-centered</code>.
+          </p>
+        </div>
         <div class="example">
-          {{ file_centered_path }}
+          {{ file_centered_name }}
         </div>
       </div>
       <div class="column highlight-full">
-        {% highlight html %}{{ file_centered_path }}{% endhighlight %}
+        {% highlight html %}{{ file_centered_name }}{% endhighlight %}
       </div>
     </div>
 
     {% include heading.html name="Sizes" %}
 
+    <div class="content">
+      <p>
+        You can append one of <strong>3 additional sizes</strong>:
+      </p>
+      <ul>
+        <li>
+          <code>.is-small</code>
+        </li>
+        <li>
+          <code>.is-medium</code>
+        </li>
+        <li>
+          <code>.is-large</code>
+        </li>
+      </ul>
+    </div>
+
     <div class="columns">
       <div class="column">
         <div class="example">
@@ -454,11 +533,11 @@ file_name: "Screen Shot 2017-07-29 at 15.54.25.png"
     <div class="columns">
       <div class="column">
         <div class="example">
-          {{ file_sizes_path }}
+          {{ file_sizes_name }}
         </div>
       </div>
       <div class="column">
-        {% highlight html %}{{ file_sizes_path }}{% endhighlight %}
+        {% highlight html %}{{ file_sizes_name }}{% endhighlight %}
       </div>
     </div>
 
@@ -476,12 +555,25 @@ file_name: "Screen Shot 2017-07-29 at 15.54.25.png"
     <div class="columns">
       <div class="column">
         <div class="example">
-          {{ file_sizes_centered_path }}
+          {{ file_sizes_centered_name }}
         </div>
       </div>
       <div class="column">
-        {% highlight html %}{{ file_sizes_centered_path }}{% endhighlight %}
+        {% highlight html %}{{ file_sizes_centered_name }}{% endhighlight %}
       </div>
     </div>
+
+    {% include heading.html name="JavaScript" %}
+
+    <div class="content">
+      <p>
+        A file upload input requires JavaScript to <strong>retrieve</strong> the <strong>selected file name</strong>.
+        <br>
+        User <a href="https://github.com/chintanbanugaria"><strong>@chintanbanugaria</strong></a> on GitHub <a href="https://github.com/jgthms/bulma/issues/280#issuecomment-294099510">has provided</a> a simple solution <a href="https://jsfiddle.net/chintanbanugaria/uzva5byy/">on JSFiddle</a>.
+      </p>
+    </div>
+
+    {% include variables.html element=true %}
+
   </div>
 </section>

sass/base/generic.sass

@@ -62,6 +62,8 @@ a
   color: $link
   cursor: pointer
   text-decoration: none
+  strong
+    color: currentColor
   &:hover
     color: $link-hover
 

sass/elements/form.sass

@@ -20,6 +20,19 @@ $input-icon-active-color: $grey !default
 
 $input-radius: $radius !default
 
+$file-border-color: transparent !default
+$file-radius: $radius !default
+
+$file-cta-background-color: $white-ter !default
+$file-cta-color: $grey-dark !default
+$file-cta-hover-color: $grey-darker !default
+$file-cta-active-color: $grey-darker !default
+
+$file-name-border-color: $file-cta-background-color !default
+$file-name-border-style: solid !default
+$file-name-border-width: 1px 1px 1px 0 !default
+$file-name-max-width: 16em !default
+
 $label-color: $grey-darker !default
 $label-weight: $weight-bold !default
 
@@ -181,21 +194,8 @@ $help-size: $size-small !default
     &.is-large:after
       font-size: $size-large
 
-$file-border-color: transparent !default
-$file-radius: $radius !default
-
-// $file-cta-background-color: $white-ter !default
-$file-cta-background-color: $red !default
-$file-cta-color: $grey-dark !default
-$file-cta-hover-color: $grey-darker !default
-$file-cta-active-color: $grey-darker !default
-
-$file-path-border-color: $file-cta-background-color !default
-$file-path-border-style: solid !default
-$file-path-border-width: 1px 1px 1px 0 !default
-$file-path-max-width: 16em !default
-
 .file
+  +unselectable
   align-items: stretch
   display: flex
   justify-content: flex-start
@@ -212,11 +212,11 @@ $file-path-max-width: 16em !default
     .file-icon
       .fa
         font-size: 28px
-  &.has-path
+  &.has-name
     .file-cta
       border-bottom-right-radius: 0
       border-top-right-radius: 0
-    .file-path
+    .file-name
       border-bottom-left-radius: 0
       border-top-left-radius: 0
   &.is-centered
@@ -227,7 +227,7 @@ $file-path-max-width: 16em !default
       flex-direction: column
       height: auto
       padding: 1em 3em
-    .file-path
+    .file-name
       border-width: 0 1px 1px
     .file-icon
       height: 1.5em
@@ -243,10 +243,10 @@ $file-path-max-width: 16em !default
     &.is-large
       .file-icon .fa
         font-size: 35px
-    &.has-path
+    &.has-name
       .file-cta
         border-radius: $file-radius $file-radius 0 0
-      .file-path
+      .file-name
         border-radius: 0 0 $file-radius $file-radius
         border-width: 0 1px 1px
 
@@ -261,14 +261,14 @@ $file-path-max-width: 16em !default
     .file-cta
       background-color: darken($file-cta-background-color, 2.5%)
       color: $file-cta-hover-color
-    .file-path
+    .file-name
-      border-color: darken($file-path-border-color, 2.5%)
+      border-color: darken($file-name-border-color, 2.5%)
   &:active
     .file-cta
       background-color: darken($file-cta-background-color, 5%)
       color: $file-cta-active-color
-    .file-path
+    .file-name
-      border-color: darken($file-path-border-color, 5%)
+      border-color: darken($file-name-border-color, 5%)
 
 .file-input
   height: 0.01em
@@ -279,7 +279,7 @@ $file-path-max-width: 16em !default
   width: 0.01em
 
 .file-cta,
-.file-path
+.file-name
   +control
   border-color: $file-border-color
   border-radius: $file-radius
@@ -292,12 +292,12 @@ $file-path-max-width: 16em !default
   background-color: $file-cta-background-color
   color: $file-cta-color
 
-.file-path
+.file-name
-  border-color: $file-path-border-color
+  border-color: $file-name-border-color
-  border-style: $file-path-border-style
+  border-style: $file-name-border-style
-  border-width: $file-path-border-width
+  border-width: $file-name-border-width
   display: block
-  max-width: $file-path-max-width
+  max-width: $file-name-max-width
   overflow: hidden
   text-align: left
   text-overflow: ellipsis