From 9f6cda1b66e9e68d4b02f845da10f9b95435d0eb Mon Sep 17 00:00:00 2001
From: Dominik Piatek <dominik.piatek@ably.io>
Date: Thu, 12 May 2022 10:39:05 +0100
Subject: [PATCH 1/2] Remove pi-inline-code in favour of ui-inline-code

The former was only used because we didn't yet have an official inline style.
---
 preview/app/javascript/styles/application.css         | 6 ------
 preview/app/views/components/icon/_arguments.html.erb | 2 +-
 preview/app/views/pages/index.html.erb                | 2 +-
 3 files changed, 2 insertions(+), 8 deletions(-)

diff --git a/preview/app/javascript/styles/application.css b/preview/app/javascript/styles/application.css
index 5dcc521d6..95bc80771 100644
--- a/preview/app/javascript/styles/application.css
+++ b/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);
diff --git a/preview/app/views/components/icon/_arguments.html.erb b/preview/app/views/components/icon/_arguments.html.erb
index a92c97857..7aab91c2c 100644
--- a/preview/app/views/components/icon/_arguments.html.erb
+++ b/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>
diff --git a/preview/app/views/pages/index.html.erb b/preview/app/views/pages/index.html.erb
index 2b7f54f51..bcbf5ccad 100644
--- a/preview/app/views/pages/index.html.erb
+++ b/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" />

From ad1f0c84183a21eb40ea3365ed7dca7775844c54 Mon Sep 17 00:00:00 2001
From: Dominik Piatek <dominik.piatek@ably.io>
Date: Thu, 12 May 2022 10:39:56 +0100
Subject: [PATCH 2/2] Add textarea styles

---
 preview/app/views/pages/index.html.erb | 12 ++++++++++++
 src/core/styles/forms.css              | 14 ++++++++++++++
 2 files changed, 26 insertions(+)

diff --git a/preview/app/views/pages/index.html.erb b/preview/app/views/pages/index.html.erb
index bcbf5ccad..8d534bf21 100644
--- a/preview/app/views/pages/index.html.erb
+++ b/preview/app/views/pages/index.html.erb
@@ -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>
 
diff --git a/src/core/styles/forms.css b/src/core/styles/forms.css
index e4c201368..43e7989c6 100644
--- a/src/core/styles/forms.css
+++ b/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;
+  }
 }