fix(dropdown): update classnames

Kajabi · Nov 10, 2022 · 1509adc · 1509adc
1 parent 3f0cea5
commit 1509adc
Show file tree

Hide file tree

Showing 6 changed files with 33 additions and 28 deletions.
diff --git a/docs/app/views/examples/components/button/_preview.html.erb b/docs/app/views/examples/components/button/_preview.html.erb
@@ -331,14 +331,14 @@ demo_configs = [
   } %>
 </div>
 
-<h4>Disclosure Button - Icon Only</h4>
+<h4>Rich Text Editor Button</h4>
 <%= md("
   The disclosure button allows for an icon affordance.
 ", use_sage_type: true) %>
 <div>
   <%= sage_component SageButton, {
+    css_classes: "sage-btn--rich-text",
     value: "Add item",
-    disclosure: true,
     icon: { name: "add", style: "only" },
     attributes: {
       href: "#",
@@ -348,12 +348,13 @@ demo_configs = [
     style: "secondary",
   } %>
 </div>
-<h4>Disclosure Button - Icon Only small</h4>
+<h4>Rich Text Editor Disclosure Button</h4>
 <%= md("
   The disclosure button allows for an icon affordance to exist with hidden text.
 ", use_sage_type: true) %>
 <div>
   <%= sage_component SageButton, {
+    css_classes: "sage-btn--rich-text",
     value: "Add item",
     disclosure: true,
     small: true,

diff --git a/docs/app/views/examples/components/dropdown/_preview.html.erb b/docs/app/views/examples/components/dropdown/_preview.html.erb
@@ -113,7 +113,7 @@ custom_items = [
       disclosure: true,
       style: "secondary",
       value: "Text",
-      css_classes: "sage-btn--rich-text-disclosure",
+      css_classes: "sage-btn--rich-text",
     } %>
   <% end %>
 <% end %>
@@ -126,7 +126,7 @@ custom_items = [
       icon: { name: "align-left", style: "only" },
       style: "secondary",
       value: "Add An Element",
-      css_classes: "sage-btn--rich-text-disclosure",
+      css_classes: "sage-btn--rich-text",
     } %>
   <% end %>
 <% end %>

diff --git a/packages/sage-assets/lib/stylesheets/components/_button.scss b/packages/sage-assets/lib/stylesheets/components/_button.scss
@@ -422,30 +422,34 @@ $-btn-loading-min-height: rem(36px);
     &[class*="icon-only"].sage-btn--small::after {
       right: rem(12px);
     }
+  }
 
-    &.sage-btn--rich-text-disclosure {
-      padding: rem(10px) rem(32px) rem(10px) rem(8px);
-      border-radius: 6px;
-      border-width: 0;
+  &.sage-btn--rich-text {
+    padding: rem(8px) rem(32px) rem(8px) rem(8px);
+    border-radius: 6px;
+    border-width: 0;
 
-      &::after {
-        right: 7px;
-        font-size: 12px;
-      }
+    &::after {
+      right: 7px;
+      font-size: 12px;
+    }
 
-      &:hover {
-        background-color: sage-color(grey, 300);
-      }
+    &:hover {
+      background-color: sage-color(grey, 300);
+    }
 
-      &.sage-btn--selected {
-        color: sage-color(white);
-        background-color: sage-color(charcoal, 400);
+    &.sage-btn--selected {
+      color: sage-color(white);
+      background-color: sage-color(charcoal, 400);
 
-        &::after {
-          color: sage-color(white);
-        }
+      &::after {
+        color: sage-color(white);
       }
     }
+
+    &:not(.sage-btn--subtle):not(.sage-btn--disclosure) {
+      padding: rem(7px);
+    }
   }
 
   // NOTE: Icon generation consolidated in `core/_icons.scss`
@@ -672,7 +676,7 @@ a.sage-btn {
           background-color: $value;
         }
       }
-  
+
       &:focus,
       &:active {
         border-color: transparent;

diff --git a/packages/sage-assets/lib/stylesheets/core/mixins/_sage.scss b/packages/sage-assets/lib/stylesheets/core/mixins/_sage.scss
@@ -135,7 +135,7 @@
           padding: rem(12px) sage-spacing(sm) rem(12px) rem(12px);
         }
 
-        &.sage-btn--rich-text-disclosure {
+        &.sage-btn--rich-text {
           padding: rem(10px) rem(12px) rem(10px) rem(8px);
           border-radius: 6px;
 

diff --git a/packages/sage-react/lib/Button/Button.story.jsx b/packages/sage-react/lib/Button/Button.story.jsx
@@ -92,14 +92,14 @@ Disclosure.args = {
 export const RichTextEditorWordsAndArrow = Template.bind({});
 RichTextEditorWordsAndArrow.args = {
   children: 'Text',
-  className: 'sage-btn--rich-text-disclosure',
+  className: 'sage-btn--rich-text',
   disclosure: true,
   color: Button.COLORS.SECONDARY
 };
 
 export const RichTextEditorIconAndArrow = Template.bind({});
 RichTextEditorIconAndArrow.args = {
-  className: 'sage-btn--rich-text-disclosure',
+  className: 'sage-btn--rich-text',
   disclosure: true,
   icon: SageTokens.ICONS.REMOVE,
   iconOnly: true,

diff --git a/packages/sage-react/lib/Dropdown/Dropdown.story.jsx b/packages/sage-react/lib/Dropdown/Dropdown.story.jsx
@@ -113,7 +113,7 @@ export const RichTextEditor = (args) => (
   <ToolbarDropdown
     options={defaultOptionsItems}
     isPinned={args.isPinned}
-    triggerClassnames="sage-btn--rich-text-disclosure"
+    triggerClassnames="sage-btn--rich-text"
     triggerButtonSubtle={false}
   />
 );
@@ -132,7 +132,7 @@ RichTextEditor.decorators = [
 
 export const RichTextEditorIconOnly = (args) => (
   <RichTextEditorDropdown
-    triggerClassnames="sage-btn--rich-text-disclosure"
+    triggerClassnames="sage-btn--rich-text"
     triggerButtonSubtle={false}
     options={defaultOptionsItems}
     isPinned={args.isPinned}