fix(p-button): delete fontWeight, outline and update styleType (#…

…114) * fix(p-button): delete `fontWeight`, `outline` and update `styleType` - delete `fontWeight`, `outline` - update `styleType` - change from `icon` to `iconLeft` and `iconRight` * chore: delete deprecated `PLoadingButton` * fix: update components which using `PButton` * fix: update storybooks using `PButton` * fix(p-button): add `iconLeft`, `iconRight` to storybook * chore: edit minor
cloudforet-io · Oct 31, 2022 · 4d9af9b · 4d9af9b
1 parent 0719047
commit 4d9af9b
Show file tree

Hide file tree

Showing 37 changed files with 198 additions and 367 deletions.
diff --git a/src/data-display/cards/list-card/PListCard.stories.mdx b/src/data-display/cards/list-card/PListCard.stories.mdx
@@ -197,7 +197,7 @@ If you give ```false``` to ```header``` props and don't give ```header``` slot,
             components: { PListCard, PButton },
             template: `
     <div class="h-full w-full overflow p-8" style="height: 200px;">
-         <p-button class="mb-4" icon="ic_refresh"
+         <p-button class="mb-4" icon-left="ic_refresh"
                    @click="updateItems"
          >
              Refresh
@@ -245,7 +245,7 @@ If you give ```false``` to ```header``` props and don't give ```header``` slot,
             components: { PListCard, PButton },
             template: `
     <div class="h-full w-full overflow p-8" style="height: 200px;">
-         <p-button class="mb-4" icon="ic_refresh"
+         <p-button class="mb-4" icon-left="ic_refresh"
                    @click="updateItems"
          >
              Refresh

diff --git a/src/data-display/popover/PPopover.stories.mdx b/src/data-display/popover/PPopover.stories.mdx
@@ -22,7 +22,7 @@ export const Template = (args, { argTypes }) => ({
             <p-popover :position="proxyPosition" :isVisible="proxyIsVisible"
                        :ignore-target-click="ignoreTargetClick" :trigger="trigger">
                 <div v-if="defaultSlot" v-html="defaultSlot" />
-                <p-button v-else style-type="primary" :outline="true" @click="handleClick">default</p-button>
+                <p-button v-else @click="handleClick">default</p-button>
                 <template #content>
                     <div v-if="contentRefSlot" v-html="contentRefSlot" />
                     <div v-else>
@@ -67,7 +67,7 @@ export const Template = (args, { argTypes }) => ({
             <b>click (default)</b>
             <br/>
             <p-popover>
-                <p-button style-type="primary" :outline="true">default</p-button>
+                <p-button>default</p-button>
                 <template #content>
                     <p style="margin-top:12px">content slot</p>
                 </template>
@@ -77,7 +77,7 @@ export const Template = (args, { argTypes }) => ({
             <b>hover</b>
             <br/>
             <p-popover trigger="hover">
-                <p-button style-type="primary" :outline="true">default</p-button>
+                <p-button>default</p-button>
                 <template #content>
                     <p style="margin-top:12px">content slot</p>
                 </template>

diff --git a/src/data-display/tables/definition-table/PDefinitionTable.stories.mdx b/src/data-display/tables/definition-table/PDefinitionTable.stories.mdx
@@ -221,7 +221,7 @@ It uses the [Definition component](?path=/docs/data-display-tables-definition-ta
         :data="data"
     >
         <template #extra="{label}">
-            <div class="text-peacock mr-4 w-full text-right"><p-button style-type="secondary" size="sm">Edit</p-button></div>
+            <div class="text-peacock mr-4 w-full text-right"><p-button style-type="highlight" size="sm">Edit</p-button></div>
         </template>
     </p-definition-table>
     <p class="my-4 text-lg font-bold">Slot: loading</p>
@@ -408,7 +408,7 @@ fields: [
         block
     >
         <template #extra>
-            <p-button style-type="secondary" size="sm">Edit</p-button>
+            <p-button style-type="highlight" size="sm">Edit</p-button>
         </template>
     </p-definition-table>
     <p class="text-xl my-4">Make specific row(field)'s value column expand</p>
@@ -417,7 +417,7 @@ fields: [
         :data="data"
     >
         <template #extra>
-            <p-button style-type="secondary" size="sm">Edit</p-button>
+            <p-button style-type="highlight" size="sm">Edit</p-button>
         </template>
     </p-definition-table>
 </div>

diff --git a/src/data-display/tables/definition-table/definition/PDefinition.stories.mdx b/src/data-display/tables/definition-table/definition/PDefinition.stories.mdx
@@ -240,7 +240,7 @@ export const Template = (args, { argTypes }) => ({
             :data="data"
         >
             <template #extra>
-                <p-button style-type="secondary" size="sm">Edit</p-button>
+                <p-button style-type="highlight" size="sm">Edit</p-button>
             </template>
         </p-definition>
         <p-definition
@@ -250,7 +250,7 @@ export const Template = (args, { argTypes }) => ({
             block
         >
             <template #extra>
-                <p-button style-type="secondary" size="sm">Edit</p-button>
+                <p-button style-type="highlight" size="sm">Edit</p-button>
             </template>
         </p-definition>
     </tbody>
@@ -400,7 +400,7 @@ export const Template = (args, { argTypes }) => ({
             data="Slot: extra"
         >
             <template #extra>
-                <p-button style-type="secondary" size="sm">Edit</p-button>
+                <p-button style-type="highlight" size="sm">Edit</p-button>
             </template>
         </p-definition>
     </tbody>

diff --git a/src/data-display/tables/toolbox-table/PToolboxTable.stories.mdx b/src/data-display/tables/toolbox-table/PToolboxTable.stories.mdx
@@ -142,7 +142,7 @@ This component is merged component of [Toolbox component](?path=/docs/navigation
             <p class="mb-4 text-xl font-bold">Slot: toolbox-left</p>
             <p-toolbox-table :fields="fields" :items="items">
             <template #toolbox-left>
-                <p-button style-type="secondary1">Button</p-button>
+                <p-button style-type="secondary">Button</p-button>
             </template>
             </p-toolbox-table>
         </div>

diff --git a/src/data-display/titles/panel-top/PPanelTop.stories.mdx b/src/data-display/titles/panel-top/PPanelTop.stories.mdx
@@ -96,7 +96,7 @@ export const Template = (args, { argTypes }) => ({
         <p-panel-top title="Panel Top" useTotalCount :totalCount="18">
             <template #extra>
                 <div class="w-full text-right mr-4">
-                    <p-button style-type="secondary" size="sm">Create</p-button>
+                    <p-button size="sm">Create</p-button>
                 </div>
             </template>
         </p-panel-top>

diff --git a/src/data-display/tree/PTree.stories.mdx b/src/data-display/tree/PTree.stories.mdx
@@ -21,19 +21,19 @@ export const ExpertTemplate = (args, { argTypes }) => ({
     template: `
         <div class="h-full w-full p-4 overflow-auto">
             <div class="mb-4">
-                <p-button style-type="primary1" @click="refresh">Refresh</p-button>
-                <p-button style-type="secondary" @click="add">Add node to root</p-button>
-                <p-button style-type="safe" @click="onClickEdit">
+                <p-button style-type="substitutive" @click="refresh">Refresh</p-button>
+                <p-button style-type="highlight" @click="add">Add node to root</p-button>
+                <p-button style-type="positive" @click="onClickEdit">
                     {{editMode ? 'Done' : 'Edit' }}
                 </p-button>
-                <p-button style-type="primary" @click="find">Find node</p-button>
+                <p-button @click="find">Find node</p-button>
                 <div class="mt-4">
                     <p-text-input v-model="target"/>
-                    <p-button style-type="secondary1" @click="fetchAndFind">Fetch and find node</p-button>
+                    <p-button style-type="secondary" @click="fetchAndFind">Fetch and find node</p-button>
                 </div>
                 <div class="mt-4">
                     <p-text-input v-model="editText"/>
-                    <p-button style-type="alert" @click="updateData">Update selected node</p-button>
+                    <p-button style-type="negative-primary" @click="updateData">Update selected node</p-button>
                 </div>
             </div>
             <p-tree :edit-options="editOptions"

diff --git a/src/feedbacks/loading/data-loader/PDataLoader.stories.mdx b/src/feedbacks/loading/data-loader/PDataLoader.stories.mdx
@@ -52,7 +52,7 @@ When you simply want to control whether an empty screen is shown or not, you can
             components: { PDataLoader, PButton },
             template: `
 <div class="w-full">
-    <p-button class="mb-2" style-type="primary" :outline="true" @click="fetchData">Reload Data</p-button>
+    <p-button class="mb-2" @click="fetchData">Reload Data</p-button>
     <p-data-loader :loading="loading" :data="data"
         class="p-3 bg-gray-100 border border-gray-200"
         style="width: 100%; height: 300px;"
@@ -97,7 +97,7 @@ When you simply want to control whether an empty screen is shown or not, you can
             components: { PDataLoader, PButton },
             template: `
 <div class="w-full">
-    <p-button class="mb-2" style-type="primary" :outline="true" @click="fetchData">{{data.length ? 'Empty Data' : 'Load Data'}}</p-button>
+    <p-button class="mb-2" @click="fetchData">{{data.length ? 'Empty Data' : 'Load Data'}}</p-button>
     <p-data-loader :loading="loading" :data="data" disable-empty-case
         class="p-3 bg-gray-100 border border-gray-200"
         style="width: 100%; height: 300px;"
@@ -196,7 +196,7 @@ When you simply want to control whether an empty screen is shown or not, you can
             components: { PDataLoader, PButton },
             template: `
 <div class="w-full">
-    <p-button class="mb-2" style-type="primary" :outline="true" @click="fetchData">Reload Data</p-button>
+    <p-button class="mb-2" @click="fetchData">Reload Data</p-button>
     <p-data-loader :loading="loading" :data="data" :min-loading-time="1000"
         class="p-3 bg-gray-100 border border-gray-200"
         style="width: 100%; height: 300px;"
@@ -242,7 +242,7 @@ When you simply want to control whether an empty screen is shown or not, you can
             components: { PDataLoader, PButton },
             template: `
 <div class="w-full">
-    <p-button class="mb-2" style-type="primary" :outline="true" @click="fetchData">Reload Data (data loading time: 1500)</p-button>
+    <p-button class="mb-2" @click="fetchData">Reload Data (data loading time: 1500)</p-button>
     <div class="grid grid-cols-2">
         <div class="mx-2">
             <p class="font-lg font-bold my-4">Lazy Loading(time: 1000)</p>
@@ -389,7 +389,7 @@ e.g. `gray.900`
             components: { PDataLoader, PButton },
             template: `
 <div class="w-full">
-    <p-button class="flex-shrink-0 mb-2" style-type="primary" :outline="true" @click="fetchData">Refresh</p-button>
+    <p-button class="flex-shrink-0 mb-2" @click="fetchData">Refresh</p-button>
     <div class="grid grid-cols-2">
         <div class="mx-2">
             <p class="font-lg font-bold my-4">normal</p>

diff --git a/src/feedbacks/loading/lazy-img/PLazyImg.stories.mdx b/src/feedbacks/loading/lazy-img/PLazyImg.stories.mdx
@@ -126,7 +126,7 @@ export const Template = (args, { argTypes }) => ({
             },
             template: `
     <div class="flex items-center">
-        <p-button class="mr-4" style-type="primary" @click="getData">Load Image</p-button>
+        <p-button class="mr-4" @click="getData">Load Image</p-button>
         <p-lazy-img :src="src"
             :loading="loading"
         />

diff --git a/src/feedbacks/modals/button-modal/PButtonModal.stories.mdx b/src/feedbacks/modals/button-modal/PButtonModal.stories.mdx
@@ -18,7 +18,7 @@ export const Template = (args, {argTypes} ) => ({
     props: Object.keys(argTypes),
     components: { PButtonModal, PButton, PSelectDropdown },
     template: `<div>
-                <p-button :styleType="themeColor" @click="launchModal">Launch a modal</p-button>
+                <p-button @click="launchModal">Launch a modal</p-button>
                 <p-button-modal :visible.sync="modalVisible"
                                 :size="size"
                                 :backdrop="backdrop"

diff --git a/src/feedbacks/modals/button-modal/PButtonModal.vue b/src/feedbacks/modals/button-modal/PButtonModal.vue
@@ -42,7 +42,7 @@
                             <p-button
                                 v-if="footerResetButtonVisible"
                                 class="modal-button reset-button"
-                                style-type="gray-border"
+                                style-type="tertiary"
                                 :disabled="loading"
                                 @click="onResetClick"
                             >
@@ -64,7 +64,7 @@
                                 v-if="!hideFooterConfirmButton"
                                 class="modal-button confirm-button"
                                 :class="{'no-cancel-button': hideFooterCloseButton}"
-                                :style-type="themeColor"
+                                :style-type="buttonThemeColor"
                                 :loading="loading"
                                 :disabled="disabled"
                                 @click="onConfirmClick"
@@ -92,6 +92,7 @@ import { SizeMapping } from '@/feedbacks/modals/type';
 import '@/feedbacks/modals/modal.pcss';
 import PLottie from '@/foundation/lottie/PLottie.vue';
 import PButton from '@/inputs/buttons/button/PButton.vue';
+import { BUTTON_STYLE } from '@/inputs/buttons/button/type';
 import PIconButton from '@/inputs/buttons/icon-button/PIconButton.vue';
 import { makeProxy } from '@/util/composition-helpers';
 
@@ -181,6 +182,15 @@ export default defineComponent<ButtonModalProps>({
                 if (props.size) res.push(props.size);
                 return res;
             }),
+            buttonThemeColor: computed(() => {
+                if (props.themeColor === 'primary1') return BUTTON_STYLE.substitutive;
+                if (props.themeColor === 'gray900') return BUTTON_STYLE.tertiary;
+                if (props.themeColor === 'secondary') return BUTTON_STYLE.highlight;
+                if (props.themeColor === 'safe') return BUTTON_STYLE.positive;
+                if (props.themeColor === 'alert') return BUTTON_STYLE['negative-primary'];
+                if (['primary2', 'secondary1'].includes(props.themeColor)) return BUTTON_STYLE.secondary;
+                return BUTTON_STYLE.primary;
+            }),
         });
         const dialogClassObject = computed(() => [
             props.size,
@@ -343,13 +353,12 @@ export default defineComponent<ButtonModalProps>({
 .modal-primary { @mixin modal-color theme('colors.primary'); }
 .modal-primary-dark { @mixin modal-color theme('colors.primary-dark'); }
 .modal-primary1 { @mixin modal-color theme('colors.primary1'); }
-.modal-primary2 { @mixin modal-color theme('colors.primary2'); }
+.modal-primary2 { @mixin modal-color theme('colors.primary'); }
 .modal-secondary { @mixin modal-color theme('colors.secondary'); }
-.modal-secondary1 { @mixin modal-color theme('colors.secondary1'); }
+.modal-secondary1 { @mixin modal-color theme('colors.primary'); }
 .modal-safe { @mixin modal-color theme('colors.gray.900'); }
 .modal-alert { @mixin modal-color theme('colors.alert'); }
 .modal-gray900 { @mixin modal-color theme('colors.gray.900'); }
-.modal-gray { @mixin modal-color theme('colors.gray.default'); }
 
 @screen mobile {
     .modal-mask {

diff --git a/src/feedbacks/modals/button-modal/type.ts b/src/feedbacks/modals/button-modal/type.ts
@@ -17,7 +17,6 @@ export const THEME_COLORS = [
     'safe',
     'alert',
     'gray900',
-    'gray',
 ] as const;
 
 export type ModalThemeColor = typeof THEME_COLORS[number];

diff --git a/src/feedbacks/modals/icon-modal/PIconModal.stories.ts b/src/feedbacks/modals/icon-modal/PIconModal.stories.ts
@@ -22,7 +22,7 @@ export const iconModal = () => ({
     components: { PIconModal, PButton },
     template: `
         <div>
-            <p-button styleType="primary" @click="onClickOpen">Open Modal</p-button>
+            <p-button style-type="primary" @click="onClickOpen">Open Modal</p-button>
             <p-icon-modal
                 :visible.sync="loading"
                 :icon-name="iconName"
@@ -70,7 +70,7 @@ export const iconModalMdType = () => ({
     components: { PIconModal, PButton },
     template: `
         <div>
-            <p-button styleType="primary" @click="onClickOpen">Open Modal</p-button>
+            <p-button @click="onClickOpen">Open Modal</p-button>
             <p-icon-modal
                 :visible.sync="loading"
                 :icon-name="iconName"

diff --git a/src/feedbacks/modals/icon-modal/PIconModal.vue b/src/feedbacks/modals/icon-modal/PIconModal.vue
@@ -31,7 +31,7 @@
                             <slot name="body" />
                         </div>
                         <p-button
-                            :style-type="buttonType" :outline="outline"
+                            :style-type="buttonType"
                             @click="onClickButton"
                         >
                             {{ buttonText }}
@@ -98,7 +98,7 @@ export default {
         },
         buttonType: {
             type: String,
-            default: 'gray900',
+            default: 'tertiary',
         },
         outline: {
             type: Boolean,

diff --git a/src/feedbacks/notification/PNotificationBar.stories.mdx b/src/feedbacks/notification/PNotificationBar.stories.mdx
@@ -103,7 +103,7 @@ export const Template = (args, { argTypes }) => ({
     components: { PNotificationBar, PButton },
     template: `
         <div class="w-full h-full">
-            <p-button :style-type="visible ? 'primary' : 'secondary'"
+            <p-button :style-type="visible ? 'primary' : 'highlight'"
                       @click="visible = !visible;">
                 {{visible ? 'close' : 'open' }}
             </p-button>

diff --git a/src/index.ts b/src/index.ts
@@ -31,7 +31,6 @@ export { default as PToastAlert } from './feedbacks/alert/toast/PToastAlert.vue'
 export { default as PAnchor } from './inputs/anchors/PAnchor.vue';
 export { default as PCopyButton } from './inputs/buttons/copy-button/PCopyButton.vue';
 export { default as PIconButton } from './inputs/buttons/icon-button/PIconButton.vue';
-export { default as PLoadingButton } from './others/deprecated/loading-button/PLoadingButton.vue';
 export { default as PToggleButton } from './inputs/buttons/toggle-button/PToggleButton.vue';
 export { default as PCard } from './data-display/cards/card/PCard.vue';
 export { default as PCardItem } from './others/deprecated/card-item/PCardItem.vue';