ui: CSS Upgrade (action-group,form-elements,sliding-toggle,breadcrumbs)

This includes an update of our CSS npm module. The majority of this is just moving files from one folder to another. 1. %breadrumbs: As well as moving we've added 'milestone' breadcrumbs 2. %checkbox-group: Moved 3. %radio-group: Moved 4. %sliding-toggle: Moved (used to be called just %toggle) 5. %form-elements: Moved and added a new %inline-alert for form field messaging (see Structure design system) 6. %action-group is now a composition of %menu-panel, %toggle-button, plus edits to existing style to bring the %action-groups inline with the dropdowns from Structure). %action-group also includes a composed %confirmation-alert that is yet to be include. This will be compiled out until we integrate it. We've also removed some of our old icon placeholders as the above work seased to use some of them. Now we done this I'd say all in all over half of our CSS components now use the CSS npm module. The CSS specific to Consul UI also uses much of this CSS module by way of helper placeholders such as our %frames.
hashicorp · Nov 19, 2019 · d377121 · d377121
1 parent 4e183a7
commit d377121
Show file tree

Hide file tree

Showing 41 changed files with 629 additions and 140 deletions.
diff --git a/ui-v2/app/components/tabular-collection.js b/ui-v2/app/components/tabular-collection.js
@@ -82,7 +82,7 @@ const change = function(e) {
         const dom = get(this, 'dom');
 
         const $tr = dom.closest('tr', e.currentTarget);
-        const $group = dom.sibling(e.currentTarget, 'ul');
+        const $group = dom.sibling(e.currentTarget, 'div');
         const groupRect = $group.getBoundingClientRect();
         const groupBottom = groupRect.top + $group.clientHeight;
 

diff --git a/ui-v2/app/styles/base/components/action-group/index.scss b/ui-v2/app/styles/base/components/action-group/index.scss
@@ -1,7 +1,18 @@
 @import '../toggle-button/index';
+@import '../menu-panel/index';
+@import '../confirmation-alert/index';
 @import './skin';
 @import './layout';
 
-%action-group label:first-of-type {
+%action-group > div {
+  @extend %menu-panel;
+}
+%action-group > label:first-of-type {
   @extend %toggle-button;
 }
+%action-group .confirmation-alert {
+  @extend %confirmation-alert;
+}
+%action-group .type-delete {
+  @extend %internal-button-dangerous;
+}
diff --git a/ui-v2/app/styles/base/components/action-group/layout.scss b/ui-v2/app/styles/base/components/action-group/layout.scss
@@ -4,79 +4,54 @@
   width: 30px;
   height: 30px;
 }
-%action-group label span {
+%action-group > div {
+  transition: min-height 150ms;
+  min-height: 0;
+  width: 192px;
+}
+%action-group .confirmation-alert {
+  position: absolute;
+  top: 0;
+  left: 100%;
+  width: 100%;
+}
+%action-group > label span {
   display: none;
 }
-%action-group label {
+%action-group > label {
   display: block;
   height: 100%;
 }
-%action-group label:last-of-type {
+%action-group > label:last-of-type {
   position: absolute;
   width: 100%;
   z-index: -1;
   top: 0;
 }
-%action-group-action {
-  width: 170px;
-  padding: 10px 10px;
-  text-align: left;
-}
-/* this is actually the group */
-%action-group ul {
-  position: absolute;
-  padding: 1px;
-}
-%action-group li > * {
-  @extend %action-group-action;
-}
-%action-group ul::before {
-  position: absolute;
-  content: '';
-  display: block;
-  width: 10px;
-  height: 10px;
-}
-%action-group ul:not(.left) {
-  right: 0px;
-}
-%action-group ul:not(.left)::before {
-  right: 9px;
-}
-%action-group ul.left {
-  left: 0px;
-}
-%action-group ul.left::before {
-  left: 9px;
-}
-%action-group ul:not(.above) {
-  top: 23px;
-}
-%action-group ul:not(.above)::before {
-  top: -6px;
-  transform: rotate(45deg);
-}
-%action-group ul.above {
-  bottom: 23px;
-}
-%action-group ul.above::before {
-  bottom: -6px;
-  transform: rotate(225deg);
-}
-%action-group li {
-  position: relative;
-  z-index: 1;
-}
 %action-group input[type='radio'],
-%action-group input[type='radio'] ~ ul,
+%action-group input[type='radio'] ~ div,
 %action-group input[type='radio'] ~ .with-confirmation > ul {
   display: none;
 }
-%action-group input[type='radio']:checked ~ ul,
+%action-group input[type='radio']:checked ~ div,
 %action-group input[type='radio']:checked ~ .with-confirmation > ul {
   display: block;
 }
 /*TODO: If anything this is %toggle-button*/
 %action-group input[type='radio']:checked ~ label[for='actions_close'] {
   z-index: 1;
 }
+%action-group input[type='checkbox'] {
+  @extend %action-group-confirm-toggle;
+}
+%action-group-confirm-toggle {
+  display: none;
+}
+%action-group-confirm-toggle + div > ul,
+%action-group-confirm-toggle + div > ul + div {
+  transition: transform 150ms;
+}
+%action-group-confirm-toggle:checked + div > ul,
+%action-group-confirm-toggle:checked + div > ul + div {
+  transform: translateX(-100%);
+}
diff --git a/ui-v2/app/styles/base/components/action-group/skin.scss b/ui-v2/app/styles/base/components/action-group/skin.scss
@@ -2,38 +2,11 @@
   /* frame-gray */
   background-color: $gray-050;
 }
-%action-group label,
-%action-group-action {
+%action-group > label {
   cursor: pointer;
 }
-%action-group label:first-of-type::after {
+%action-group > label:first-of-type::after {
   @extend %with-more-horizontal-icon;
   @extend %as-pseudo;
   opacity: 0.7;
 }
-%action-group ul {
-  border: $decor-border-100;
-  border-radius: $decor-radius-100;
-  box-shadow: 0 2px 7px rgba(0, 0, 0, 0.21);
-}
-%action-group ul::before {
-  border-top: $decor-border-100;
-  border-left: $decor-border-100;
-}
-%action-group ul,
-%action-group ul::before {
-  border-color: $color-action;
-}
-%action-group-action {
-  background-color: $white;
-}
-%action-group-action:hover {
-  @extend %frame-blue-800;
-}
-%action-group ul,
-%action-group ul::before {
-  background-color: $white;
-}
-%action-group li {
-  list-style-type: none;
-}
diff --git a/ui-v2/app/styles/base/components/breadcrumbs/index.scss b/ui-v2/app/styles/base/components/breadcrumbs/index.scss
@@ -6,3 +6,18 @@
 %breadcrumbs strong {
   @extend %breadcrumb-selected;
 }
+%breadcrumbs-milestone {
+  @extend %breadcrumbs;
+}
+%breadcrumbs-milestone li:first-child > * {
+  @extend %breadcrumb-milestone;
+}
+%breadcrumbs-filesystem {
+  @extend %breadcrumbs;
+}
+%breadcrumbs-filesystem li:not(:first-child) > * {
+  @extend %breadcrumb-path;
+}
+%breadcrumbs-filesystem li:first-child > * {
+  @extend %breadcrumb-folder;
+}
diff --git a/ui-v2/app/styles/base/components/breadcrumbs/skin.scss b/ui-v2/app/styles/base/components/breadcrumbs/skin.scss
@@ -2,10 +2,25 @@
   list-style-type: none;
 }
 %breadcrumb::before {
-  content: '❮';
   line-height: 1;
   font-size: 0.7em;
-  margin-top: 0.1em;
+  margin-top: 0.2em;
+}
+%breadcrumb::before {
+  content: '❮';
+}
+%breadcrumb-milestone::before {
+  content: '❮❮';
+}
+%breadcrumb-path::before {
+  content: '/';
+}
+%breadcrumb-folder::before {
+  position: relative;
+  top: 2px;
+  margin-top: -4px;
+  @extend %with-folder-outline-color-icon;
+  @extend %as-pseudo;
 }
 %breadcrumb {
   color: $color-action;

diff --git a/ui-v2/app/styles/base/components/buttons/layout.scss b/ui-v2/app/styles/base/components/buttons/layout.scss
@@ -38,3 +38,9 @@
   padding-top: calc(0.35em - 1px) !important;
   height: 2.3em !important;
 }
+%internal-button {
+  padding: 0.75rem 1rem;
+  text-align: center;
+  display: inline-block;
+  box-sizing: border-box;
+}
diff --git a/ui-v2/app/styles/base/components/buttons/skin.scss b/ui-v2/app/styles/base/components/buttons/skin.scss
@@ -1,10 +1,12 @@
 /* decor */
-%button {
+%button,
+%internal-button {
   @extend %user-select-none;
   cursor: pointer;
   white-space: nowrap;
 }
-%button:disabled {
+%button:disabled,
+%internal-button:disabled {
   cursor: default;
   box-shadow: none;
 }
@@ -92,3 +94,21 @@
 %dangerous-button:hover:active {
   @extend %frame-red-900;
 }
+
+%internal-button-dangerous {
+  @extend %frame-red-300;
+}
+%internal-button-dangerous-intent {
+  @extend %frame-red-700;
+}
+%internal-button-intent {
+  background-color: $gray-100;
+}
+%internal-button:focus,
+%internal-button:hover {
+  @extend %internal-button-intent;
+}
+%internal-button-dangerous:focus,
+%internal-button-dangerous:hover {
+  @extend %internal-button-dangerous-intent;
+}
diff --git a/ui-v2/app/styles/base/components/checkbox-group/index.scss b/ui-v2/app/styles/base/components/checkbox-group/index.scss
@@ -0,0 +1,2 @@
+@import './skin';
+@import './layout';
diff --git a/ui-v2/app/styles/base/components/checkbox-group/layout.scss b/ui-v2/app/styles/base/components/checkbox-group/layout.scss
@@ -0,0 +1,14 @@
+/* TODO: This is positioning the group */
+/* probably should be in a special %form class*/
+%checkbox-group {
+  @extend %form-row;
+}
+%checkbox-group span {
+  display: inline-block;
+  margin-left: 10px;
+  min-width: 50px;
+}
+%checkbox-group label {
+  margin-right: 10px;
+  white-space: nowrap;
+}
diff --git a/ui-v2/app/styles/base/components/checkbox-group/skin.scss b/ui-v2/app/styles/base/components/checkbox-group/skin.scss
@@ -0,0 +1,3 @@
+%checkbox-group label {
+  cursor: pointer;
+}
diff --git a/ui-v2/app/styles/base/components/confirmation-alert/index.scss b/ui-v2/app/styles/base/components/confirmation-alert/index.scss
@@ -0,0 +1,6 @@
+@import './skin';
+@import './layout';
+
+%confirmation-alert > ul > li > * {
+  @extend %internal-button;
+}
diff --git a/ui-v2/app/styles/base/components/confirmation-alert/layout.scss b/ui-v2/app/styles/base/components/confirmation-alert/layout.scss
@@ -0,0 +1,14 @@
+%confirmation-alert > div {
+  padding: 1rem;
+}
+%confirmation-alert > ul {
+  display: flex;
+  margin: 0;
+  padding: 4px;
+}
+%confirmation-alert > ul > li {
+  width: 50%;
+}
+%confirmation-alert > ul > li > * {
+  width: 100%;
+}
diff --git a/ui-v2/app/styles/base/components/confirmation-alert/skin.scss b/ui-v2/app/styles/base/components/confirmation-alert/skin.scss
@@ -0,0 +1,26 @@
+%confirmation-alert {
+  background-color: $white;
+}
+
+%confirmation-alert > div {
+  background-color: $yellow-050;
+  border-top-left-radius: $decor-radius-200;
+  border-top-right-radius: $decor-radius-200;
+}
+%confirmation-alert > ul {
+  list-style: none;
+}
+%confirmation-alert > ul > li > * {
+  cursor: pointer;
+}
+%confirmation-alert > ul > li > *:hover,
+%confirmation-alert > ul > li > *:focus {
+  background-color: $gray-100;
+}
+%confirmation-alert > ul > .dangerous > * {
+  @extend %frame-red-300;
+}
+%confirmation-alert > ul > .dangerous > *:hover,
+%confirmation-alert > ul > .dangerous > *:focus {
+  @extend %frame-red-700;
+}
diff --git a/ui-v2/app/styles/base/components/form-elements/index.scss b/ui-v2/app/styles/base/components/form-elements/index.scss
@@ -0,0 +1,27 @@
+@import './skin';
+@import './layout';
+/* TODO: This is positioning the element */
+/* probably should be in a special %form class*/
+%form-element {
+  @extend %form-row;
+}
+%form-element > span {
+  @extend %form-element-label;
+}
+%form-element > em {
+  @extend %form-element-note;
+}
+%form-element-error > strong {
+  @extend %inline-alert-error;
+}
+%form-element [type='text'],
+%form-element [type='password'],
+%form-element textarea {
+  @extend %form-element-text-input;
+}
+%form-element-text-input:hover {
+  @extend %form-element-text-input-hover;
+}
+%form-element-text-input:focus {
+  @extend %form-element-text-input-focus;
+}