[UI Framework] Add ActionItem and MenuButton components. (#10114)

Backports PR #10113 **Commit 1:** Add ActionItem and MenuButton components. * Original sha: ab3f812aab * Authored by CJ Cenizal <cj@cenizal.com> on 2017-01-26T00:16:42Z
2025-04-24 01:38:56 -04:00 · 2017-01-30 20:19:49 -05:00 · 2017-01-30 20:19:49 -05:00 · c443b20b56
commit c443b20b56
parent 2dec109e58
20 changed files with 396 additions and 6 deletions
--- a/ui_framework/components/action_item/_action_item.scss
+++ b/ui_framework/components/action_item/_action_item.scss
@ -0,0 +1,5 @@
+.kuiActionItem {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
--- a/ui_framework/components/action_item/_index.scss
+++ b/ui_framework/components/action_item/_index.scss
@ -0,0 +1 @@
+@import "action_item";
--- a/ui_framework/components/index.scss
+++ b/ui_framework/components/index.scss
@ -235,6 +235,7 @@ body {
  font-family: $font;
 }

+@import "action_item/index";
@import "bar/index";
@import "button/index";
@import "event/index";
@ -246,6 +247,7 @@ body {
@import "loading_items/index";
@import "local_nav/index";
@import "menu/index";
+@import "menu_button/index";
@import "micro_button/index";
@import "modal/index";
@import "no_items/index";
--- a/ui_framework/components/menu_button/_index.scss
+++ b/ui_framework/components/menu_button/_index.scss
@ -0,0 +1,2 @@
+@import "menu_button";
+@import "menu_button_group";
--- a/ui_framework/components/menu_button/_menu_button.scss
+++ b/ui_framework/components/menu_button/_menu_button.scss
@ -0,0 +1,87 @@
+/**
+ * 1. Setting to inline-block guarantees the same height when applied to both
+ *    button elements and anchor tags.
+ * 2. Disable for Angular.
+ * 3. Make the button just tall enough to fit inside an Option Layout.
+ */
+.kuiMenuButton {
+  display: inline-block; /* 1 */
+  appearance: none;
+  cursor: pointer;
+  padding: 2px 10px; /* 3 */
+  font-size: 12px;
+  font-weight: 400;
+  line-height: $lineHeight;
+  text-decoration: none;
+  border: none;
+  border-radius: $buttonBorderRadius;
+
+  &:disabled {
+    cursor: default;
+    pointer-events: none; /* 2 */
+  }
+
+  &:active:enabled {
+    transform: translateY(1px);
+  }
+
+  &:focus {
+    @include focus;
+  }
+}
+
+.kuiMenuButton--iconText {
+  .kuiMenuButton__icon {
+    &:first-child {
+      margin-right: 4px;
+    }
+
+    &:last-child {
+      margin-left: 4px;
+    }
+  }
+}
+
+/**
+ * 1. Override Bootstrap.
+ */
+.kuiMenuButton--basic {
+  color: #5a5a5a;
+  background-color: #ffffff;
+
+  // Goes before hover, so that hover can override it.
+  &:focus {
+    color: #5a5a5a !important; /* 1 */
+  }
+
+  &:hover:enabled,
+  &:active:enabled {
+    background-color: #F2F2F2;
+  }
+
+  &:disabled {
+    color: #9B9B9B;
+  }
+}
+
+/**
+ * 1. Override Bootstrap.
+ */
+.kuiMenuButton--danger {
+  color: #D76051;
+  background-color: #ffffff;
+
+  &:hover:enabled,
+  &:active:enabled {
+    color: #FFFFFF !important; /* 1 */
+    background-color: #D76051;
+  }
+
+  &:disabled {
+    color: #9B9B9B;
+  }
+
+  &:focus {
+    @include focus($focusDangerColor);
+  }
+}
--- a/ui_framework/components/menu_button/_menu_button_group.scss
+++ b/ui_framework/components/menu_button/_menu_button_group.scss
@ -0,0 +1,7 @@
+.kuiMenuButtonGroup {
+  display: flex;
+
+  .kuiMenuButton + .kuiMenuButton {
+    margin-left: 4px;
+  }
+}
--- a/ui_framework/dist/ui_framework.css
+++ b/ui_framework/dist/ui_framework.css
@ -29,6 +29,20 @@
 body {
  font-family: "Open Sans", Helvetica, Arial, sans-serif; }

+.kuiActionItem {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+      -ms-flex-align: center;
+          align-items: center;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+      -ms-flex-pack: justify;
+          justify-content: space-between; }
+
 .kuiBar {
  display: -webkit-box;
  display: -webkit-flex;
@ -540,14 +554,23 @@ body {
  border-color: rgba(63, 168, 199, 0.25);
  /* 1 */ }

+/**
+ * 1. TODO: Pick a hex value instead of making these colors translucent.
+ */
 .kuiInfoPanel--success {
  border-color: rgba(65, 117, 5, 0.25);
  /* 1 */ }

+/**
+ * 1. TODO: Pick a hex value instead of making these colors translucent.
+ */
 .kuiInfoPanel--warning {
-  border-color: rgba(255, 172, 21, 0.25);
+  border-color: rgba(236, 152, 0, 0.25);
  /* 1 */ }

+/**
+ * 1. TODO: Pick a hex value instead of making these colors translucent.
+ */
 .kuiInfoPanel--error {
  border-color: rgba(216, 96, 81, 0.25);
  /* 1 */ }
@ -1000,6 +1023,90 @@ body {
  .kuiMenuItem + .kuiMenuItem {
    border-top: 1px solid #E4E4E4; }

+/**
+ * 1. Setting to inline-block guarantees the same height when applied to both
+ *    button elements and anchor tags.
+ * 2. Disable for Angular.
+ * 3. Make the button just tall enough to fit inside an Option Layout.
+ */
+.kuiMenuButton {
+  display: inline-block;
+  /* 1 */
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  cursor: pointer;
+  padding: 2px 10px;
+  /* 3 */
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 1.5;
+  text-decoration: none;
+  border: none;
+  border-radius: 4px; }
+  .kuiMenuButton:disabled {
+    cursor: default;
+    pointer-events: none;
+    /* 2 */ }
+  .kuiMenuButton:active:enabled {
+    -webkit-transform: translateY(1px);
+            transform: translateY(1px); }
+  .kuiMenuButton:focus {
+    z-index: 1;
+    /* 1 */
+    outline: none !important;
+    /* 2 */
+    box-shadow: 0 0 0 1px #ffffff, 0 0 0 2px #6EADC1;
+    /* 3 */ }
+
+.kuiMenuButton--iconText .kuiMenuButton__icon:first-child {
+  margin-right: 4px; }
+
+.kuiMenuButton--iconText .kuiMenuButton__icon:last-child {
+  margin-left: 4px; }
+
+/**
+ * 1. Override Bootstrap.
+ */
+.kuiMenuButton--basic {
+  color: #5a5a5a;
+  background-color: #ffffff; }
+  .kuiMenuButton--basic:focus {
+    color: #5a5a5a !important;
+    /* 1 */ }
+  .kuiMenuButton--basic:hover:enabled, .kuiMenuButton--basic:active:enabled {
+    background-color: #F2F2F2; }
+  .kuiMenuButton--basic:disabled {
+    color: #9B9B9B; }
+
+/**
+ * 1. Override Bootstrap.
+ */
+.kuiMenuButton--danger {
+  color: #D76051;
+  background-color: #ffffff; }
+  .kuiMenuButton--danger:hover:enabled, .kuiMenuButton--danger:active:enabled {
+    color: #FFFFFF !important;
+    /* 1 */
+    background-color: #D76051; }
+  .kuiMenuButton--danger:disabled {
+    color: #9B9B9B; }
+  .kuiMenuButton--danger:focus {
+    z-index: 1;
+    /* 1 */
+    outline: none !important;
+    /* 2 */
+    box-shadow: 0 0 0 1px #ffffff, 0 0 0 2px #ff523c;
+    /* 3 */ }
+
+.kuiMenuButtonGroup {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex; }
+  .kuiMenuButtonGroup .kuiMenuButton + .kuiMenuButton {
+    margin-left: 4px; }
+
 .kuiMicroButton {
  display: inline-block;
  /* 1 */
--- a/ui_framework/doc_site/src/services/routes/routes.js
+++ b/ui_framework/doc_site/src/services/routes/routes.js
@ -1,6 +1,9 @@

 import Slugify from '../string/slugify';

+import ActionItemExample
+  from '../../views/action_item/action_item_example.jsx';
+
 import BarExample
  from '../../views/bar/bar_example.jsx';

@ -31,6 +34,9 @@ import LocalNavExample
 import MenuExample
  from '../../views/menu/menu_example.jsx';

+import MenuButtonExample
+  from '../../views/menu_button/menu_button_example.jsx';
+
 import MicroButtonExample
  from '../../views/micro_button/micro_button_example.jsx';

@ -60,6 +66,9 @@ import VerticalRhythmExample

 // Component route names should match the component name exactly.
 const components = [{
+  name: 'ActionItem',
+  component: ActionItemExample,
+}, {
  name: 'Bar',
  component: BarExample,
 }, {
@ -89,6 +98,9 @@ const components = [{
 }, {
  name: 'Menu',
  component: MenuExample,
+}, {
+  name: 'MenuButton',
+  component: MenuButtonExample,
 }, {
  name: 'MicroButton',
  component: MicroButtonExample,
--- a/ui_framework/doc_site/src/views/action_item/action_item.html
+++ b/ui_framework/doc_site/src/views/action_item/action_item.html
@ -0,0 +1,14 @@
+<div class="kuiActionItem">
+  <p class="kuiText">Item</p>
+  <div class="kuiMenuButtonGroup">
+    <button class="kuiMenuButton kuiMenuButton--basic">
+      Acknowledge
+    </button>
+    <button class="kuiMenuButton kuiMenuButton--basic">
+      Silence
+    </button>
+    <button class="kuiMenuButton kuiMenuButton--danger">
+      Delete
+    </button>
+  </div>
+</div>
--- a/ui_framework/doc_site/src/views/action_item/action_item_example.jsx
+++ b/ui_framework/doc_site/src/views/action_item/action_item_example.jsx
@ -0,0 +1,15 @@
+import React from 'react';
+
+import {
+  createExample,
+} from '../../services';
+
+export default createExample([{
+  title: 'ActionItem',
+  html: require('./action_item.html'),
+  hasDarkTheme: false,
+}, {
+  title: 'ActionItems in Menu',
+  html: require('./action_items_in_menu.html'),
+  hasDarkTheme: false,
+}]);
--- a/ui_framework/doc_site/src/views/action_item/action_items_in_menu.html
+++ b/ui_framework/doc_site/src/views/action_item/action_items_in_menu.html
@ -0,0 +1,52 @@
+<div class="kuiMenu kuiMenu--contained">
+  <div class="kuiMenuItem">
+    <div class="kuiActionItem">
+      <p class="kuiText">Item A</p>
+      <div class="kuiMenuButtonGroup">
+        <button class="kuiMenuButton kuiMenuButton--basic">
+          Acknowledge
+        </button>
+        <button class="kuiMenuButton kuiMenuButton--basic">
+          Silence
+        </button>
+        <button class="kuiMenuButton kuiMenuButton--danger">
+          Delete
+        </button>
+      </div>
+    </div>
+  </div>
+
+  <div class="kuiMenuItem">
+    <div class="kuiActionItem">
+      <p class="kuiText">Item B</p>
+      <div class="kuiMenuButtonGroup">
+        <button class="kuiMenuButton kuiMenuButton--basic">
+          Acknowledge
+        </button>
+        <button class="kuiMenuButton kuiMenuButton--basic">
+          Silence
+        </button>
+        <button class="kuiMenuButton kuiMenuButton--danger">
+          Delete
+        </button>
+      </div>
+    </div>
+  </div>
+
+  <div class="kuiMenuItem">
+    <div class="kuiActionItem">
+      <p class="kuiText">Item C</p>
+      <div class="kuiMenuButtonGroup">
+        <button class="kuiMenuButton kuiMenuButton--basic">
+          Acknowledge
+        </button>
+        <button class="kuiMenuButton kuiMenuButton--basic">
+          Silence
+        </button>
+        <button class="kuiMenuButton kuiMenuButton--danger">
+          Delete
+        </button>
+      </div>
+    </div>
+  </div>
+</div>
--- a/ui_framework/doc_site/src/views/button/button_group_united.html
+++ b/ui_framework/doc_site/src/views/button/button_group_united.html
@ -15,10 +15,10 @@
 <div class="kuiButtonGroup kuiButtonGroup--united">
  <button class="kuiButton kuiButton--basic kuiButton--iconText">
    <span class="kuiButton__icon kuiIcon fa-chevron-left"></span>
-    Back
+    <span>Back</span>
  </button>
  <button class="kuiButton kuiButton--basic kuiButton--iconText">
-    Next
+    <span>Next</span>
    <span class="kuiButton__icon kuiIcon fa-chevron-right"></span>
  </button>
 </div>
--- a/ui_framework/doc_site/src/views/button/button_with_icon.html
+++ b/ui_framework/doc_site/src/views/button/button_with_icon.html
@ -1,6 +1,13 @@
 <button class="kuiButton kuiButton--basic kuiButton--iconText">
  <span class="kuiButton__icon kuiIcon fa-gear"></span>
-  Settings
+  <span>Settings</span>
+</button>
+
+<hr class="guideBreak">
+
+<button class="kuiButton kuiButton--basic kuiButton--iconText">
+  <span>Next</span>
+  <span class="kuiButton__icon kuiIcon fa-chevron-right"></span>
 </button>

 <hr class="guideBreak">
--- a/ui_framework/doc_site/src/views/event/event_example.jsx
+++ b/ui_framework/doc_site/src/views/event/event_example.jsx
@ -18,4 +18,4 @@ export default createExample([{
  ),
  html: require('./event_menu.html'),
  hasDarkTheme: false,
-},]);
+}]);
--- a/ui_framework/doc_site/src/views/event/event_menu.html
+++ b/ui_framework/doc_site/src/views/event/event_menu.html
@ -53,4 +53,3 @@
    </div>
  </div>
 </div>
-
--- a/ui_framework/doc_site/src/views/menu_button/menu_button_basic.html
+++ b/ui_framework/doc_site/src/views/menu_button/menu_button_basic.html
@ -0,0 +1,9 @@
+<button class="kuiMenuButton kuiMenuButton--basic">
+  Basic button
+</button>
+
+<hr class="guideBreak">
+
+<button disabled class="kuiMenuButton kuiMenuButton--basic">
+  Basic button, disabled
+</button>
--- a/ui_framework/doc_site/src/views/menu_button/menu_button_danger.html
+++ b/ui_framework/doc_site/src/views/menu_button/menu_button_danger.html
@ -0,0 +1,9 @@
+<button class="kuiMenuButton kuiMenuButton--danger">
+  Danger button
+</button>
+
+<hr class="guideBreak">
+
+<button disabled class="kuiMenuButton kuiMenuButton--danger">
+  Danger button, disabled
+</button>
--- a/ui_framework/doc_site/src/views/menu_button/menu_button_example.jsx
+++ b/ui_framework/doc_site/src/views/menu_button/menu_button_example.jsx
@ -0,0 +1,26 @@
+import React from 'react';
+
+import {
+  createExample,
+} from '../../services';
+
+export default createExample([{
+  title: 'Basic MenuButton',
+  html: require('./menu_button_basic.html'),
+  hasDarkTheme: false,
+}, {
+  title: 'Danger MenuButton',
+  html: require('./menu_button_danger.html'),
+  hasDarkTheme: false,
+}, {
+  title: 'MenuButton with Icon',
+  description: (
+    <p>You can use a MenuButton with an Icon, with or without text.</p>
+  ),
+  html: require('./menu_button_with_icon.html'),
+  hasDarkTheme: false,
+}, {
+  title: 'MenuButtonGroup',
+  html: require('./menu_button_group.html'),
+  hasDarkTheme: false,
+}]);
--- a/ui_framework/doc_site/src/views/menu_button/menu_button_group.html
+++ b/ui_framework/doc_site/src/views/menu_button/menu_button_group.html
@ -0,0 +1,19 @@
+<div class="kuiMenuButtonGroup">
+  <button class="kuiMenuButton kuiMenuButton--basic">
+    Acknowledge
+  </button>
+  <button class="kuiMenuButton kuiMenuButton--basic">
+    Duplicate
+  </button>
+  <button class="kuiMenuButton kuiMenuButton--danger">
+    Delete
+  </button>
+</div>
+
+<hr class="guideBreak">
+
+<div class="kuiMenuButtonGroup">
+  <button class="kuiMenuButton kuiMenuButton--basic">
+    Button group with one button
+  </button>
+</div>
--- a/ui_framework/doc_site/src/views/menu_button/menu_button_with_icon.html
+++ b/ui_framework/doc_site/src/views/menu_button/menu_button_with_icon.html
@ -0,0 +1,17 @@
+<button class="kuiMenuButton kuiMenuButton--basic kuiMenuButton--iconText">
+  <span class="kuiMenuButton__icon kuiIcon fa-gear"></span>
+  <span>Settings</span>
+</button>
+
+<hr class="guideBreak">
+
+<button class="kuiMenuButton kuiMenuButton--basic kuiMenuButton--iconText">
+  <span>Next</span>
+  <span class="kuiMenuButton__icon kuiIcon fa-chevron-right"></span>
+</button>
+
+<hr class="guideBreak">
+
+<button class="kuiMenuButton kuiMenuButton--basic">
+  <span class="kuiMenuButton__icon kuiIcon fa-gear"></span>
+</button>