added buttons to pattern library

- resolves #8661
wagtail · Aug 30, 2022 · 849d4d7 · 849d4d7
1 parent 1d5824d
commit 849d4d7
Show file tree

Hide file tree

Showing 3 changed files with 209 additions and 0 deletions.
diff --git a/CHANGELOG.txt b/CHANGELOG.txt
@@ -11,6 +11,7 @@ Changelog
  * Allow setting default attributes on image tags (Jake Howard)
  * Optimise the performance of the Wagtail userbar to remove duplicated queries, improving page loads when viewing live pages while signed in (Jake Howard)
  * Remove legacy `unbutton` styling for buttons (Paarth Agarwal)
+ * Add button variations to the pattern library (Paarth Agarwal)
  * Fix: Prevent `PageQuerySet.not_public` from returning all pages when no page restrictions exist (Mehrdad Moradizadeh)
 
 

diff --git a/docs/releases/4.1.md b/docs/releases/4.1.md
@@ -19,6 +19,7 @@ Wagtail 4.1 is designated a Long Term Support (LTS) release. Long Term Support r
  * Allow setting default attributes on image tags [](adding_default_attributes_to_images) (Jake Howard)
  * Optimise the performance of the Wagtail userbar to remove duplicated queries, improving page loads when viewing live pages while signed in (Jake Howard)
  * Remove legacy `unbutton` styling for buttons (Paarth Agarwal)
+ * Add button variations to the pattern library (Paarth Agarwal)
 
 ### Bug fixes
 

diff --git a/wagtail/admin/templates/wagtailadmin/shared/button.stories.tsx b/wagtail/admin/templates/wagtailadmin/shared/button.stories.tsx
@@ -0,0 +1,207 @@
+import React from 'react';
+
+export default {
+  title: 'Shared / Buttons',
+};
+
+const Template = ({ url }) => (
+  <section id="buttons">
+    <h2>Buttons</h2>
+
+    <h3>Basic buttons</h3>
+    <a href={url} className="button">
+      button link
+    </a>
+    <button type="button" className="button">
+      button element
+    </button>
+
+    <h3>Secondary buttons</h3>
+    <a href={url} className="button button-secondary">
+      button link
+    </a>
+    <button type="button" className="button button-secondary">
+      button element
+    </button>
+
+    <h3>Small buttons</h3>
+    <a href={url} className="button button-small">
+      button link
+    </a>
+    <button type="button" className="button button-small">
+      button element
+    </button>
+
+    <h4>Secondary buttons</h4>
+    <a href={url} className="button button-small button-secondary">
+      button link
+    </a>
+    <button type="button" className="button button-small button-secondary">
+      button element
+    </button>
+
+    <h3>Disabled buttons</h3>
+    <a href={url} className="button disabled">
+      button link
+    </a>
+    <button type="button" className="button button-small disabled">
+      button element
+    </button>
+
+    <h3>Bi-color icon buttons with text</h3>
+    <a href={url} className="button bicolor button--icon">
+      <span className="icon-wrapper">
+        <svg className="icon icon-plus icon" aria-hidden="true">
+          <use href="#icon-plus" />
+        </svg>
+      </span>
+      button link
+    </a>
+    <button type="button" className="button bicolor button--icon">
+      <span className="icon-wrapper">
+        <svg className="icon icon-plus icon" aria-hidden="true">
+          <use href="#icon-plus" />
+        </svg>
+      </span>
+      button element
+    </button>
+
+    <h4>(small)</h4>
+    <a href={url} className="button button-small bicolor button--icon">
+      <span className="icon-wrapper">
+        <svg className="icon icon-plus icon" aria-hidden="true">
+          <use href="#icon-plus" />
+        </svg>
+      </span>
+      button link
+    </a>
+    <button type="button" className="button button-small bicolor button--icon">
+      <span className="icon-wrapper">
+        <svg className="icon icon-plus icon" aria-hidden="true">
+          <use href="#icon-plus" />
+        </svg>
+      </span>
+      button element
+    </button>
+
+    <h3>Icon buttons without text</h3>
+    <a href={url} className="button text-replace button--icon">
+      <svg className="icon icon-cog icon" aria-hidden="true">
+        <use href="#icon-cog" />
+      </svg>
+      button link
+    </a>
+    <button type="button" className="button text-replace button--icon">
+      <svg className="icon icon-cog icon" aria-hidden="true">
+        <use href="#icon-cog" />
+      </svg>
+      button element
+    </button>
+
+    <h4>(small)</h4>
+    <a href={url} className="button button-small text-replace button--icon">
+      <svg className="icon icon-cog icon" aria-hidden="true">
+        <use href="#icon-cog" />
+      </svg>
+      button link
+    </a>
+    <button
+      type="button"
+      className="button button-small text-replace button--icon"
+    >
+      <svg className="icon icon-cog icon" aria-hidden="true">
+        <use href="#icon-cog" />
+      </svg>
+      button element
+    </button>
+
+    <h3>Colour signifiers</h3>
+
+    <h4>Positive</h4>
+    <a href={url} className="button yes">
+      yes
+    </a>
+    <a href={url} className="button button-small yes">
+      yes
+    </a>
+
+    <h4>Negative</h4>
+    <a href={url} className="button no">
+      No
+    </a>
+    <a href={url} className="button button-small no">
+      No
+    </a>
+
+    <h3>
+      Buttons with internal loading indicators (currently only{' '}
+      <code>button</code> supported)
+    </h3>
+    <button type="button" className="button button-longrunning">
+      <svg className="icon icon-spinner icon" aria-hidden="true">
+        <use href="#icon-spinner" />
+      </svg>
+      Click me
+    </button>
+
+    <h4>Secondary</h4>
+    <button
+      type="button"
+      className="button button-secondary button-longrunning"
+    >
+      <svg className="icon icon-spinner icon" aria-hidden="true">
+        <use href="#icon-spinner" />
+      </svg>
+      Click me
+    </button>
+
+    <h4>Small</h4>
+    <button type="button" className="button button-small button-longrunning">
+      <svg className="icon icon-spinner icon" aria-hidden="true">
+        <use href="#icon-spinner" />
+      </svg>
+      Click me
+    </button>
+
+    <h4>Buttons where the text is replaced on click</h4>
+    <button
+      type="button"
+      className="button button-longrunning"
+      data-clicked-text="Test"
+    >
+      <svg className="icon icon-spinner icon" aria-hidden="true">
+        <use href="#icon-spinner" />
+      </svg>
+      <em>Click me</em>
+    </button>
+    <button
+      type="button"
+      className="button disabled button-longrunning--active"
+    >
+      <svg className="icon icon-spinner icon" aria-hidden="true">
+        <use href="#icon-spinner" />
+      </svg>
+      <span>Test</span>
+    </button>
+
+    <h3>Mixtures</h3>
+    <a href={url} className="button button--icon text-replace white">
+      <svg className="icon icon-cog icon" aria-hidden="true">
+        <use href="#icon-cog" />
+      </svg>
+      A link button
+    </a>
+    <a href={url} className="button button--icon bicolor disabled">
+      <span className="icon-wrapper">
+        <svg className="icon icon-tick icon" aria-hidden="true">
+          <use href="#icon-tick" />
+        </svg>
+      </span>
+      button link
+    </a>
+  </section>
+);
+
+export const All = Template.bind({});
+
+All.args = { url: window.location.toString() };