Skip to content

Commit

Permalink
feat(ui): use design system in builder - WF-127
Browse files Browse the repository at this point in the history
  • Loading branch information
madeindjs committed Dec 9, 2024
1 parent 99fcb0d commit e1322cd
Show file tree
Hide file tree
Showing 22 changed files with 429 additions and 451 deletions.
33 changes: 25 additions & 8 deletions src/ui/src/builder/BuilderModal.vue
Original file line number Diff line number Diff line change
@@ -1,7 +1,12 @@
<!-- eslint-disable @typescript-eslint/ban-types -->
<template>
<Teleport to="#modal">
<div class="BuilderModal" tabindex="-1" @keydown="handleKeydown">
<div
class="BuilderModal"
:class="{ 'BuilderModal--overflow': allowOverflow }"
tabindex="-1"
@keydown="handleKeydown"
>
<div class="main">
<div class="titleContainer">
<i v-if="icon" class="material-symbols-outlined">{{
Expand Down Expand Up @@ -38,19 +43,24 @@

<script setup lang="ts">
import WdsButton from "@/wds/WdsButton.vue";
import { toRefs } from "vue";
import { PropType, toRefs } from "vue";

export type ModalAction = {
desc: string;
fn: (..._args: unknown[]) => unknown;
};

const props = defineProps<{
modalTitle: string;
icon?: string;
closeAction: ModalAction;
menuActions?: ModalAction[];
}>();
const props = defineProps({
modalTitle: { type: String, required: true },
icon: { type: String, required: false, default: undefined },
closeAction: { type: Object as PropType<ModalAction>, required: true },
menuActions: {
type: Array as PropType<ModalAction[]>,
required: false,
default: undefined,
},
allowOverflow: { type: Boolean, required: false },
});

const { modalTitle, icon, closeAction, menuActions } = toRefs(props);

Expand Down Expand Up @@ -82,6 +92,10 @@ const handleKeydown = (ev: KeyboardEvent) => {
box-shadow: 0px 3px 40px 0px rgba(172, 185, 220, 0.4);
}

.BuilderModal--overflow .main {
overflow: unset;
}

.titleContainer {
border-bottom: 1px solid var(--builderSubtleSeparatorColor);
padding: 8px 8px 8px 16px;
Expand All @@ -100,6 +114,9 @@ const handleKeydown = (ev: KeyboardEvent) => {
max-height: 60vh;
overflow: auto;
}
.BuilderModal--overflow .slotContainer {
overflow: unset;
}

.actionContainer {
border-top: 1px solid var(--builderSubtleSeparatorColor);
Expand Down
44 changes: 12 additions & 32 deletions src/ui/src/builder/BuilderSelect.vue
Original file line number Diff line number Diff line change
@@ -1,9 +1,5 @@
<template>
<div
ref="trigger"
class="BuilderSelect"
:class="{ 'BuilderSelect--embedded': variant === 'embedded' }"
>
<div ref="trigger" class="BuilderSelect">
<button
class="BuilderSelect__trigger"
role="button"
Expand Down Expand Up @@ -57,14 +53,6 @@ const props = defineProps({
defaultIcon: { type: String, required: false, default: undefined },
hideIcons: { type: Boolean, required: false },
enableSearch: { type: Boolean, required: false },
/**
* Customize the appareance of the selector.
* In embeded mode, we remove the padding and the border around the trigger. Usefull when the selector is embed into a field wrapper.
*/
variant: {
type: String as PropType<"normal" | "embedded">,
default: "normal",
},
});
const currentValue = defineModel({ type: String, required: false });
Expand Down Expand Up @@ -125,26 +113,23 @@ function onSelect(value: string) {
.BuilderSelect__trigger {
display: flex;
height: 32px;
align-items: center;
gap: 8px;
height: 40px;
width: 100%;
padding: 8.5px 12px 8.5px 12px;
gap: 8px;
border: 1px solid var(--separatorColor);
border-radius: 8px;
align-items: center;
padding: 8px;
font-weight: 400;
color: #3b3b3b;
background: #ffffff;
}
font-size: 0.875rem;
.BuilderSelect__trigger {
/* reset button */
border: none;
cursor: pointer;
color: var(--primaryTextColor);
background: transparent;
font-size: 0.75rem;
display: flex;
align-items: center;
cursor: pointer;
}
.BuilderSelect__trigger__label {
text-overflow: ellipsis;
Expand All @@ -162,9 +147,4 @@ function onSelect(value: string) {
color: #000000e6;
cursor: pointer;
}
.BuilderSelect--embedded .BuilderSelect__trigger {
padding: 0;
height: 18px;
}
</style>
5 changes: 1 addition & 4 deletions src/ui/src/builder/settings/BuilderFieldsAlign.vue
Original file line number Diff line number Diff line change
Expand Up @@ -264,12 +264,9 @@ onBeforeUnmount(() => {
@import "../sharedStyles.css";
.chipStackContainer {
padding: 12px;
margin-top: 4px;
padding-bottom: 12px;
}
.main {
border-top: 1px solid var(--builderSeparatorColor);
padding: 12px;
margin-top: 4px;
}
</style>
14 changes: 10 additions & 4 deletions src/ui/src/builder/settings/BuilderFieldsColor.vue
Original file line number Diff line number Diff line change
Expand Up @@ -145,12 +145,18 @@ onBeforeUnmount(() => {
@import "../sharedStyles.css";
.chipStackContainer {
padding: 12px;
margin-top: 4px;
padding-bottom: 12px;
}
.main {
border-top: 1px solid var(--builderSeparatorColor);
padding: 12px;
margin-top: 4px;
}
input[type="color"] {
width: 100%;
height: 34px;
border-radius: 8px;
border: 1px solid var(--separatorColor);
display: block;
height: 40px;
}
</style>
12 changes: 5 additions & 7 deletions src/ui/src/builder/settings/BuilderFieldsKeyValue.vue
Original file line number Diff line number Diff line change
Expand Up @@ -192,15 +192,13 @@ onMounted(async () => {
@import "../sharedStyles.css";
.chipStackContainer {
padding: 12px;
margin-top: 4px;
padding-bottom: 12px;
border-bottom: 1px solid var(--builderSeparatorColor);
margin-bottom: 8px;
}
.staticList {
padding: 12px;
border-bottom: 1px solid var(--builderSeparatorColor);
padding: 8.5px 12px 8.5px 12px;
border: 1px solid var(--builderSeparatorColor);
border-radius: 8px;
}
.staticList:empty::before {
Expand All @@ -227,7 +225,7 @@ onMounted(async () => {
}
.formAdd {
padding: 12px;
margin-top: 8px;
}
.BuilderTemplateInput {
Expand Down
1 change: 0 additions & 1 deletion src/ui/src/builder/settings/BuilderFieldsObject.vue
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,6 @@ const templateField = computed(() => {
@import "../sharedStyles.css";
.BuilderFieldsObject {
padding: 16px 12px 12px 12px;
font-size: inherit;
}
</style>
Loading

0 comments on commit e1322cd

Please sign in to comment.