docs(v1-components): Storybook control buttons were migrated to UiButton

Author: cmath10

packages/v1-components/storybook/stories/UiAlert.closable.example.vue

@@ -7,16 +7,17 @@
             @hidden="onHidden"
         />
 
-        <button type="button" @click="shown = true">
+        <UiButton appearance="secondary" @click="shown = true">
             Show alert
-        </button>
+        </UiButton>
     </div>
 </template>
 
 <script lang="ts" setup>
 import { ref } from 'vue'
 
 import UiAlert from '@/host/components/alert/UiAlert.vue'
+import UiButton from '@/host/components/button/UiButton.vue'
 
 const shown = ref(true)
 
@@ -27,20 +28,11 @@ const onHidden = () => {
 
 <style lang="less" module>
 @import (reference) '../../assets/stylesheets/geometry.less';
-@import (reference) '../../assets/stylesheets/palette.less';
 @import (reference) '../../assets/stylesheets/variables.less';
 
 .container {
   display: grid;
   gap: @spacing-xs;
-}
-
-:global(button) {
-  width: fit-content;
-  border: 1px solid @grey-500;
-  border-radius: @border-radius-sm;
-  background: #fff;
-  padding: @spacing-xxs @spacing-xs;
-  cursor: pointer;
+  justify-items: start;
 }
 </style>

packages/v1-components/storybook/stories/UiCollapse.basic.example.vue

@@ -1,8 +1,8 @@
 <template>
     <div style="display: grid; gap: 12px; width: 420px;">
-        <button type="button" @click="expanded = !expanded">
+        <UiButton appearance="secondary" @click="expanded = !expanded">
             {{ expanded ? 'Hide details' : 'Show details' }}
-        </button>
+        </UiButton>
 
         <UiCollapse :expanded="expanded">
             <div style="border: 1px solid #d5dbe3; border-radius: 8px; background: #f7f9fc; padding: 12px;">
@@ -15,6 +15,7 @@
 <script setup lang="ts">
 import { ref } from 'vue'
 
+import UiButton from '@/host/components/button/UiButton.vue'
 import UiCollapse from '@/host/components/collapse/UiCollapse.vue'
 
 const expanded = ref(false)

packages/v1-components/storybook/stories/UiCollapse.dispose.example.vue

@@ -1,8 +1,8 @@
 <template>
     <div style="display: grid; gap: 12px; width: 420px;">
-        <button type="button" @click="expanded = !expanded">
+        <UiButton appearance="secondary" @click="expanded = !expanded">
             {{ expanded ? 'Unmount content' : 'Mount content' }}
-        </button>
+        </UiButton>
 
         <UiCollapse
             :expanded="expanded"
@@ -18,6 +18,7 @@
 <script setup lang="ts">
 import { ref } from 'vue'
 
+import UiButton from '@/host/components/button/UiButton.vue'
 import UiCollapse from '@/host/components/collapse/UiCollapse.vue'
 
 const expanded = ref(true)

packages/v1-components/storybook/stories/UiCollapse.stories.ts

@@ -3,6 +3,7 @@ import type { UiCollapseProperties } from '@/common/components/collapse'
 
 import { computed, ref, watch } from 'vue'
 
+import UiButton from '@/host/components/button/UiButton.vue'
 import UiCollapse from '@/host/components/collapse/UiCollapse.vue'
 
 import { COLLAPSE_BEHAVIOUR } from '@/common/components/collapse'
@@ -34,6 +35,7 @@ const meta = {
 
   render: (args: UiCollapseProperties) => ({
     components: {
+      UiButton,
       UiCollapse,
     },
 
@@ -54,9 +56,9 @@ const meta = {
 
     template: `
       <div style="width: 520px; display: grid; gap: 12px;">
-          <button type="button" @click="expanded = !expanded">
+          <UiButton appearance="secondary" @click="expanded = !expanded">
               {{ expanded ? 'Hide content' : 'Show content' }}
-          </button>
+          </UiButton>
 
           <UiCollapse
               :expanded="expanded"

packages/v1-components/storybook/stories/UiCollapseBox.stories.ts

@@ -3,6 +3,7 @@ import type { UiCollapseBoxProperties } from '@/common/components/collapse-box'
 
 import { computed, ref, watch } from 'vue'
 
+import UiButton from '@/host/components/button/UiButton.vue'
 import UiCollapseBox from '@/host/components/collapse-box/UiCollapseBox.vue'
 import UiCollapseGroup from '@/host/components/collapse-box/UiCollapseGroup.vue'
 
@@ -54,6 +55,7 @@ const meta = {
 
   render: (args: UiCollapseBoxProperties) => ({
     components: {
+      UiButton,
       UiCollapseBox,
       IconSettingsOutlined,
     },
@@ -102,9 +104,13 @@ const meta = {
               </template>
 
               <template #footer-content>
-                  <button type="button" @click="expanded = false">
+                  <UiButton
+                      appearance="secondary"
+                      style="flex: none; align-self: flex-start;"
+                      @click="expanded = false"
+                  >
                       Collapse
-                  </button>
+                  </UiButton>
               </template>
           </UiCollapseBox>
       </div>

packages/v1-components/storybook/stories/UiInfobox.closable.example.vue

@@ -8,19 +8,21 @@
             Use closable mode when info can be dismissed by the user.
         </UiInfobox>
 
-        <button
+        <UiButton
             v-if="!shown"
-            type="button"
+            appearance="secondary"
+            style="justify-self: start; width: fit-content;"
             @click="shown = true"
         >
             Show again
-        </button>
+        </UiButton>
     </div>
 </template>
 
 <script setup lang="ts">
 import { ref } from 'vue'
 
+import UiButton from '@/host/components/button/UiButton.vue'
 import UiInfobox from '@/host/components/infobox/UiInfobox.vue'
 
 const shown = ref(true)

packages/v1-components/storybook/stories/UiInfobox.controlled.example.vue

@@ -1,17 +1,22 @@
 <template>
     <div style="display: grid; gap: 8px; width: 680px;">
         <div style="display: flex; gap: 8px;">
-            <button type="button" @click="shown = !shown">
+            <UiButton
+                appearance="secondary"
+                style="flex: none; align-self: flex-start;"
+                @click="shown = !shown"
+            >
                 {{ shown ? 'Hide' : 'Show' }}
-            </button>
+            </UiButton>
 
-            <button
-                type="button"
+            <UiButton
+                appearance="secondary"
+                style="flex: none; align-self: flex-start;"
                 :disabled="!expandable"
                 @click="expanded = !expanded"
             >
                 {{ expanded ? 'Collapse' : 'Expand' }}
-            </button>
+            </UiButton>
         </div>
 
         <UiInfobox
@@ -28,6 +33,7 @@
 <script setup lang="ts">
 import { ref } from 'vue'
 
+import UiButton from '@/host/components/button/UiButton.vue'
 import UiInfobox from '@/host/components/infobox/UiInfobox.vue'
 
 const shown = ref(true)

packages/v1-components/storybook/stories/UiSwitch.controlled.example.vue

@@ -13,13 +13,21 @@
         </div>
 
         <div :class="$style['controls']">
-            <button type="button" @click="value = true">
+            <UiButton
+                appearance="secondary"
+                style="flex: none; align-self: flex-start;"
+                @click="value = true"
+            >
                 Set on
-            </button>
+            </UiButton>
 
-            <button type="button" @click="value = false">
+            <UiButton
+                appearance="secondary"
+                style="flex: none; align-self: flex-start;"
+                @click="value = false"
+            >
                 Set off
-            </button>
+            </UiButton>
         </div>
 
         <div>
@@ -31,6 +39,7 @@
 <script lang="ts" setup>
 import { ref } from 'vue'
 
+import UiButton from '@/host/components/button/UiButton.vue'
 import UiSwitch from '@/host/components/switch/UiSwitch.vue'
 
 const value = ref(false)
@@ -61,13 +70,5 @@ const value = ref(false)
 .controls {
   display: inline-flex;
   gap: @spacing-xs;
-
-  :global(button) {
-    border: 1px solid @grey-500;
-    border-radius: @border-radius-sm;
-    background: #fff;
-    padding: @spacing-xxs @spacing-xs;
-    cursor: pointer;
-  }
 }
 </style>