Merge pull request #1220 from sonatype/RSC-1795_small-button

RSC-1795 add small button modifier class

Author: Qiming-C

gallery/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sonatype/react-shared-components-gallery",
-  "version": "12.18.3",
+  "version": "12.18.4",
   "description": "Gallery application to demonstrate usage and look of Sonatype shared UI components",
   "main": "src/main.ts",
   "scripts": {

gallery/src/styles/NxBtn/NxBtnLinkExample.html

@@ -11,10 +11,14 @@
   <a href="#/" class="nx-btn">Secondary</a>
   <a href="#/" class="nx-btn nx-btn--tertiary">Tertiary</a>
   <a href="#/" class="nx-btn nx-btn--error">Error</a>
+  <a href="#/" class="nx-btn nx-btn--small">Small</a>
 </div>
 <div class="nx-btn-bar">
   <a href="#/" class="nx-btn nx-btn--primary disabled">Primary Disabled</a>
   <a href="#/" class="nx-btn disabled">Secondary Disabled</a>
   <a href="#/" class="nx-btn nx-btn--tertiary disabled">Tertiary Disabled</a>
   <a href="#/" class="nx-btn nx-btn--error disabled">Error Disabled</a>
 </div>
+<div class="nx-btn-bar">
+  <a href="#/" class="nx-btn nx-btn--small disabled">Small Disabled</a>
+</div>

gallery/src/styles/NxBtn/NxBtnPage.tsx

@@ -14,7 +14,8 @@ const nxBtnPrimaryCode = require('./NxBtnPrimaryExample.html'),
     nxBtnTertiaryCode = require('./NxBtnTertiaryExample.html'),
     nxBtnErrorCode = require('./NxBtnErrorExample.html'),
     nxBtnIconCode = require('./NxBtnIconExample.html'),
-    nxBtnLinkCode = require('./NxBtnLinkExample.html');
+    nxBtnLinkCode = require('./NxBtnLinkExample.html'),
+    nxBtnSmallCode = require('./NxBtnSmallExample.html');
 
 const NxBtnPage = () =>
   <>
@@ -62,6 +63,15 @@ const NxBtnPage = () =>
               <NxTable.Cell>Modifier on <NxCode>.nx-btn</NxCode></NxTable.Cell>
               <NxTable.Cell>Makes the button a "tertiary" button</NxTable.Cell>
             </NxTable.Row>
+            <NxTable.Row>
+              <NxTable.Cell><NxCode>nx-btn--small</NxCode></NxTable.Cell>
+              <NxTable.Cell>Modifier on <NxCode>.nx-btn</NxCode></NxTable.Cell>
+              <NxTable.Cell>
+                Small Buttons are typically used in situations where patterns that contain a button are repeated
+                (Tables, Cards, etc). This is done in order to reduce user overwhelm, as well as the page height
+                used.
+              </NxTable.Cell>
+            </NxTable.Row>
             <NxTable.Row>
               <NxTable.Cell><NxCode>nx-btn--error</NxCode></NxTable.Cell>
               <NxTable.Cell>Modifier on <NxCode>.nx-btn</NxCode></NxTable.Cell>
@@ -145,6 +155,14 @@ const NxBtnPage = () =>
       error buttons. Note that the standard disabled styles override the error styles.
     </GalleryExampleTile>
 
+    <GalleryExampleTile title="Small"
+                        htmlExample={nxBtnSmallCode}
+                        codeExamples={nxBtnSmallCode}>
+      A demonstration of buttons using the <NxCode>nx-btn--small</NxCode> modifier, which can be combined with any
+      button variant (primary, secondary, tertiary, error, icon-only). This example shows various combinations including
+      disabled states. Note that the standard disabled styles override the error styles.
+    </GalleryExampleTile>
+
     <GalleryExampleTile title="Buttons with Icons"
                         htmlExample={nxBtnIconCode}
                         codeExamples={nxBtnIconCode}>

gallery/src/styles/NxBtn/NxBtnSmallExample.html

@@ -0,0 +1,25 @@
+<!--
+
+    Copyright (c) 2019-present Sonatype, Inc.
+    This program and the accompanying materials are made available under
+    the terms of the Eclipse Public License 2.0 which accompanies this
+    distribution and is available at https://www.eclipse.org/legal/epl-2.0/.
+
+-->
+<div id="nx-button-small-example">
+  <div class="nx-btn-bar">
+    <button class="nx-btn nx-btn--primary nx-btn--small">Primary button</button>
+    <button class="nx-btn nx-btn--secondary nx-btn--small">Secondary button</button>
+    <button class="nx-btn nx-btn--tertiary nx-btn--small">Tertiary button</button>
+    <button class="nx-btn nx-btn--error nx-btn--small">Error button</button>
+    <button class="nx-btn nx-btn--small" disabled>Small button disabled</button>
+  </div>
+  <div class="nx-btn-bar">
+    <button class="nx-btn nx-btn--tertiary nx-btn--small" id="nx-button-small-icon-button">
+      <span>Button with icon</span><!--
+    --><svg class="nx-icon" style="height: 1em; width: 1em;" viewBox="-1 -1 2 2">
+        <rect width="2" height="2" x="-1" y="-1"/>
+      </svg>
+    </button>
+  </div>
+</div>