feat: buttons

Kong · Dec 28, 2023 · 7c8457c · 7c8457c
1 parent 680f028
commit 7c8457c
Show file tree

Hide file tree

Showing 5 changed files with 82 additions and 36 deletions.
diff --git a/src/assets/_mixins.scss b/src/assets/_mixins.scss
@@ -1,9 +1,9 @@
-@mixin icon-button {
+@mixin toolbar-button {
   align-items: center;
   background-color: var(--kui-color-background-transparent, $kui-color-background-transparent);
   border: var(--kui-border-width-20, $kui-border-width-20) solid
     var(--kui-color-border-transparent, $kui-color-border-transparent);
-  border-radius: var(--kui-border-radius-40, $kui-border-radius-40);
+  border-radius: var(--kui-border-radius-20, $kui-border-radius-20);
   color: var(--kui-color-text-neutral, $kui-color-text-neutral);
   cursor: pointer;
   display: inline-flex;

diff --git a/src/components/MarkdownContent.vue b/src/components/MarkdownContent.vue
@@ -137,7 +137,7 @@ $header-anchor-offset-top: calc(var(--kui-space-80, $kui-space-80) + 2px);
 
     // Styles for fenced code block copy button in `src/composables/useMarkdownIt.ts`
     .kong-markdown-code-block-copy {
-      @include icon-button;
+      @include toolbar-button;
       color: var(--kui-color-text-neutral-weak, $kui-color-text-neutral-weak);
       position: absolute;
       right: var(--kui-space-20, $kui-space-20);

diff --git a/src/components/toolbar/IconButton.vue b/src/components/toolbar/IconButton.vue
diff --git a/src/components/toolbar/MarkdownToolbar.vue b/src/components/toolbar/MarkdownToolbar.vue
@@ -43,7 +43,7 @@
               :text="option.label"
             />
           </template>
-          <IconButton
+          <ToolbarButton
             :aria-label="option.label"
             :data-testid="`format-option-${option.action}`"
             :tabindex="0"
@@ -54,7 +54,7 @@
               class="button-icon"
               :size="KUI_ICON_SIZE_40"
             />
-          </IconButton>
+          </ToolbarButton>
         </InfoTooltip>
 
         <div class="toolbar-divider" />
@@ -67,7 +67,7 @@
           <template #tooltip>
             {{ option.label }}
           </template>
-          <IconButton
+          <ToolbarButton
             :aria-label="option.label"
             :data-testid="`template-option-${option.action}`"
             :tabindex="0"
@@ -78,7 +78,7 @@
               class="button-icon"
               :size="KUI_ICON_SIZE_40"
             />
-          </IconButton>
+          </ToolbarButton>
         </InfoTooltip>
       </template>
 
@@ -94,7 +94,7 @@
         <template #tooltip>
           {{ fullscreen ? 'Exit Fullscreen' : 'Enter Fullscreen' }}
         </template>
-        <IconButton
+        <ToolbarButton
           :aria-label="fullscreen ? 'Exit Fullscreen' : 'Enter Fullscreen'"
           data-testid="toggle-fullscreen"
           :tabindex="0"
@@ -105,7 +105,7 @@
             class="button-icon"
             :size="KUI_ICON_SIZE_40"
           />
-        </IconButton>
+        </ToolbarButton>
       </InfoTooltip>
 
       <InfoTooltip
@@ -115,7 +115,7 @@
         <template #tooltip>
           {{ htmlPreview ? 'Toggle markdown Preview' : 'Toggle HTML Preview' }}
         </template>
-        <IconButton
+        <ToolbarButton
           :aria-label="htmlPreview ? 'Toggle markdown Preview' : 'Toggle HTML Preview'"
           data-testid="toggle-html-preview"
           :tabindex="0"
@@ -126,7 +126,7 @@
             class="button-icon"
             :size="KUI_ICON_SIZE_40"
           />
-        </IconButton>
+        </ToolbarButton>
       </InfoTooltip>
     </div>
     <div class="toolbar-right">
@@ -142,20 +142,23 @@
       <template
         v-if="editable && ['edit', 'split', 'preview'].includes(mode)"
       >
-        <button
+        <ToolbarButton
           data-testid="cancel"
+          :icon="false"
           :tabindex="0"
           @click="cancelEdit"
         >
           Cancel
-        </button>
-        <button
+        </ToolbarButton>
+        <ToolbarButton
+          appearance="primary"
           data-testid="save"
+          :icon="false"
           :tabindex="0"
           @click="saveChanges"
         >
           Save
-        </button>
+        </ToolbarButton>
       </template>
     </div>
   </div>
@@ -169,7 +172,7 @@ import { useMediaQuery } from '@vueuse/core'
 import { TOOLBAR_HEIGHT } from '@/constants'
 import { KUI_BREAKPOINT_PHABLET, KUI_ICON_SIZE_40 } from '@kong/design-tokens'
 import type { MarkdownMode, FormatOption, TemplateOption, InlineFormat, MarkdownTemplate } from '@/types'
-import IconButton from '@/components/toolbar/IconButton.vue'
+import ToolbarButton from '@/components/toolbar/ToolbarButton.vue'
 import InfoTooltip from '@/components/toolbar/InfoTooltip.vue'
 import TooltipShortcut from '@/components/toolbar/TooltipShortcut.vue'
 import { BoldIcon, ItalicIcon, UnderlineIcon, StrikethroughIcon, /* SubscriptIcon, SuperscriptIcon, MarkIcon, */ CodeIcon, CodeblockIcon, TableIcon, TasklistIcon, ListUnorderedIcon, ListOrderedIcon, MarkdownIcon, HtmlIcon, BlockquoteIcon, ExpandIcon, CollapseIcon } from '@kong/icons'

diff --git a/src/components/toolbar/ToolbarButton.vue b/src/components/toolbar/ToolbarButton.vue
@@ -0,0 +1,63 @@
+<template>
+  <button
+    class="toolbar-button"
+    :class="[{ 'has-text': !icon }, appearance]"
+  >
+    <slot name="default" />
+  </button>
+</template>
+
+<script setup lang="ts">
+import type { PropType } from 'vue'
+
+defineProps({
+  /** Does the button only contain an icon. Defaults to true */
+  icon: {
+    type: Boolean,
+    default: true,
+  },
+  appearance: {
+    type: String as PropType<'primary' | 'secondary'>,
+    default: 'secondary',
+  },
+})
+</script>
+
+<style lang="scss" scoped>
+@import "../../assets/mixins";
+
+.toolbar-button {
+  @include toolbar-button;
+
+  &:disabled, &[disabled] {
+    // If the button is disabled, force-hide any tooltips
+    + :deep(.tooltip-content) {
+      opacity: 0 !important;
+    }
+  }
+
+  &.has-text {
+    border-color: var(--kui-color-border, $kui-color-border);
+    border-width: var(--kui-border-width-20, $kui-border-width-20);
+    padding: var(--kui-space-10, $kui-space-10) var(--kui-space-40, $kui-space-40);
+
+    &.primary {
+      background-color: var(--kui-color-background-primary, $kui-color-background-primary);
+      border-color: var(--kui-color-border, $kui-color-border-primary);
+      color: var(--kui-color-text-inverse, $kui-color-text-inverse);
+
+      &:hover:not(:disabled):not(:focus):not(:active) {
+        background-color: var(--kui-color-background-primary-strong, $kui-color-background-primary-strong);
+      }
+
+      &:focus {
+        background-color: var(--kui-color-background-primary-strong, $kui-color-background-primary-strong);
+      }
+
+      &:active {
+        background-color: var(--kui-color-background-primary-stronger, $kui-color-background-primary-stronger);
+      }
+    }
+  }
+}
+</style>