Merge pull request #183 from ably/add-textarea-css

Add textarea styles

preview/app/javascript/styles/application.css

@@ -71,12 +71,6 @@
 }
 
 @layer components {
-  .pi-inline-code {
-    font-size: 0.9375rem;
-    padding: 0 0.125rem;
-    @apply font-mono text-cool-black bg-cool-black text-white whitespace-nowrap;
-  }
-
   .pi-checkered-bg {
     --size: 0.25rem;
     --double: calc(var(--size) * 2);

preview/app/views/components/icon/_arguments.html.erb

@@ -1,5 +1,5 @@
 <div class="max-w-screen-md font-sans font-light">
-  <p class="text-p2 text-cool-black mb-32">Display icons. Uses <code class="pi-inline-code">&lt;use&gt;</code> to insert SVG's. Assumes the spritesheet is already present on the page (this can be done with <code class="pi-inline-code">core/load-sprites.js</code>). Takes the following arguments:</p>
+  <p class="text-p2 text-cool-black mb-32">Display icons. Uses <code class="ui-inline-code">&lt;use&gt;</code> to insert SVG's. Assumes the spritesheet is already present on the page (this can be done with <code class="ui-inline-code">core/load-sprites.js</code>). Takes the following arguments:</p>
 
   <%= render(ParameterTableComponent.new(component_parameters, framework)) %>
 </div>

preview/app/views/pages/index.html.erb

@@ -155,7 +155,7 @@
           <h2 class="text-h1 font-medium mb-40">Typography</h2>
 
           <p class="ui-text-p1 mb-32">Type definitions do not include margin as it can be contextual. Figma and the below list include recommended margins.</p>
-          <p class="ui-text-p1 mb-32">The below list is created with ui-text-* helpers which include properties beyond the the standard <code class="pi-inline-code">font-size</code> and <code class="pi-inline-code">line-height</code> that text-* includes.</p>
+          <p class="ui-text-p1 mb-32">The below list is created with ui-text-* helpers which include properties beyond the the standard <code class="ui-inline-code">font-size</code> and <code class="ui-inline-code">line-height</code> that text-* includes.</p>
 
           <div class="mb-40">
             <hr class="m-0" />
@@ -376,6 +376,18 @@
             </div>
           </div>
 
+          <h3 class="text-h2 font-medium mb-24">Textarea</h3>
+
+          <div class="mb-40">
+            <label class="ui-text-p1 block mb-24" for="example-text-area">This is how a label for the textarea looks like. Control the size of the area with the <code class="ui-inline-code">rows</code> attribute.</label>
+            <textarea
+              id="example-text-area"
+              class="ui-textarea"
+              rows="2"
+              placeholder="The <textarea> HTML element represents a multi-line plain-text editing control, useful when you want to allow users to enter a sizeable amount of free-form text, for example a comment on a review or feedback form."></textarea>
+            <p class="ui-text-p3 text-dark-grey">Example of additional text beneath the textarea.</p>
+          </div>
+
           <div class="mb-40">
             <h4 class="text-h3 font-medium mb-16">Example HTML</h4>
 

src/core/styles/forms.css

@@ -47,4 +47,18 @@
   .ui-checkbox-input:checked + .ui-checkbox-styled svg {
     @apply block;
   }
+
+  .ui-textarea {
+    @apply font-sans font-light text-cool-black text-p1;
+    @apply p-input mb-16;
+    @apply bg-light-grey border-mid-grey transition-input border rounded block w-full;
+    @apply hover:bg-white hover:shadow-input hover:border-transparent;
+    @apply focus:bg-white focus:shadow-input focus:border-transparent focus:outline-gui-focus;
+  }
+
+  .ui-textarea::placeholder {
+    /* CSS vars don't work in ::placeholder in Webkit :( */
+    /* color: var(--text-dark-grey); */
+    color: #76767c;
+  }
 }