mirror of
https://github.com/Abdulazizzn/n8n-enterprise-unlocked.git
synced 2025-12-18 02:21:13 +00:00
✨ Implement design system (#2050)
* split up main, sass imports, import new nds * migrate most buttons * update sizes based on feedback * update copy buttons * update executions list * fix issues * force message box buttons * update warning color * update more buttons * wrap message box buttons * update last component * lint fixes * add build report step * breakout imports * set package.json * fix notification bug * clean up imports * use build directories directly * update imports * remove xl size * update number inputs * fix input width * update line height, fix icon bug * fix up editor * fix spacing between buttons * Reset line height * revert changes to this * revert changes * clean up button sizes * change to outline * update select height * update tooltip * remove build report step * clean up impl * remove regenerator runtime * add design system repo * apply editorconfig * apply editor config prettier * lint issue * switch to tabs * switch to single space * update eslintrc * remove git modules * update sass package * support dart sass * add build * update dependency * update contributing.md * set repo * update versions * add tslint step * update spacing to spaces, add dev step * add test step * add test step * update browser lint rc * remove .github * delete .gitignore * set comment for icons * remove preview link * update button interface * update types * set types * clean up intro * update intro * remove assets * move into preview * remove headline comment * reduce theme build * loading executions * match deps versions * match deps versions * fix lint issues * fix lint issues * update callback * disable codacy for docs.css * fix storybook issues * add design system to docker image * update spacing around delete sort button * set line height to stop juggling headline * update sizes * clean up vars * fix scss issues * update button vars * add shade color * fix button without click * fix buttons bug * fix bug with executions list * clean up theme * update link styling * fix typo * run prettier * 🎨 code format * 🎨 code format * 🔥 remove empty files * ✨ N8n 2284 new inputs (#2075) * implement inputs * prettier fixes * revert unnessary change * move input components and tooltip * remove form elements * move select * update input placements * update sizes * update credentails * clean up select size * fix caret issue * update inputs * clean up select * fix tags dropdown border * clean up tags input * fix workflow name bug * clean up select here * add sizes template * fix option caret * fix input sizes * update date input size * remove tags input override * update prop * update input size * center run data inputs * update disabled colors * update execution header * update scrollbar * update text area spacing * fix items in header * update run data tooltip * remove popover * update prefix positions * add filterable demo * address design issues * fix input issues, flip boolean input to text * update input sufffix colors * remove override * speed up switch, fix toggle spacing issue * update icon * remove icon classes * clean up inputs * clean up inputs with icons * update input spacing again * update suffix position * build * Add support for xlarge inputs * fix input issues * fix input issue * update listeners * update number inputs for settings * update append/prepend spacing * clean up inputs, set expression input as text * fix type errors * fix workflow number input * fix tags dropdown bug * fix bugs * fix menu item bug * remove font weight from link element * remove default * fix select option * fix contrast issues * allow overflow x for multi selects * fix icon * update options select * fix issue that resolves expression to null * update how actions are centered * fix up selects * update selects to support limiting size * update option styles * ⚡ Apply suggestions BHesseldieck Co-authored-by: Ben Hesseldieck <1849459+BHesseldieck@users.noreply.github.com> * 🎨 code format Co-authored-by: Jan <janober@users.noreply.github.com> Co-authored-by: Ben Hesseldieck <1849459+BHesseldieck@users.noreply.github.com> Co-authored-by: Ben Hesseldieck <b.hesseldieck@gmail.com> * ⏪ Revert "🔥 remove empty files" This reverts commit e91ace4e52403f4a6b00b7be68b86fc48b7d8fef. * ⚡ Remove private from n8n-design-system package * 🎨 Change to spaces to stay consistent with editorconfig & others package files * ⚡ Fix year in license Co-authored-by: Ben Hesseldieck <1849459+BHesseldieck@users.noreply.github.com> Co-authored-by: Ben Hesseldieck <b.hesseldieck@gmail.com> Co-authored-by: Jan <janober@users.noreply.github.com> Co-authored-by: Jan Oberhauser <jan.oberhauser@gmail.com>
This commit is contained in:
Mutasem Aldmour
299
packages/design-system/src/components/N8nButton/Button.vue
Normal file
299
packages/design-system/src/components/N8nButton/Button.vue
Normal file
@@ -0,0 +1,299 @@
|
||||
<template functional>
|
||||
<component
|
||||
:is="$options.components.ElButton"
|
||||
:plain="props.type === 'outline'"
|
||||
:disabled="props.disabled"
|
||||
:size="props.size"
|
||||
:loading="props.loading"
|
||||
:title="props.title || props.label"
|
||||
:class="$style[$options.getClass(props)]"
|
||||
:round="!props.circle && props.round"
|
||||
:circle="props.circle"
|
||||
:style="$options.styles(props)"
|
||||
@click="(e) => listeners.click && listeners.click(e)"
|
||||
>
|
||||
<span :class="$style.icon" v-if="props.loading || props.icon">
|
||||
<component
|
||||
:is="$options.components.N8nSpinner"
|
||||
v-if="props.loading"
|
||||
:size="props.iconSize"
|
||||
/>
|
||||
<component
|
||||
:is="$options.components.N8nIcon"
|
||||
v-else-if="props.icon"
|
||||
:icon="props.icon"
|
||||
:size="props.iconSize"
|
||||
/>
|
||||
</span>
|
||||
<span v-if="props.label">{{ props.label }}</span>
|
||||
</component>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import N8nIcon from '../N8nIcon';
|
||||
import N8nSpinner from '../N8nSpinner';
|
||||
import ElButton from 'element-ui/lib/button';
|
||||
|
||||
export default {
|
||||
name: 'n8n-button',
|
||||
props: {
|
||||
label: {
|
||||
type: String,
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
},
|
||||
type: {
|
||||
type: String,
|
||||
default: 'primary',
|
||||
validator: (value: string): boolean =>
|
||||
['primary', 'outline', 'light', 'text'].indexOf(value) !== -1,
|
||||
},
|
||||
theme: {
|
||||
type: String,
|
||||
validator: (value: string): boolean =>
|
||||
['success', 'warning', 'danger'].indexOf(value) !== -1,
|
||||
},
|
||||
size: {
|
||||
type: String,
|
||||
default: 'medium',
|
||||
validator: (value: string): boolean =>
|
||||
['small', 'medium', 'large'].indexOf(value) !== -1,
|
||||
},
|
||||
loading: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
icon: {
|
||||
type: String,
|
||||
},
|
||||
iconSize: {
|
||||
type: String,
|
||||
},
|
||||
round: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
circle: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
float: {
|
||||
type: String,
|
||||
validator: (value: string): boolean =>
|
||||
['left', 'right'].indexOf(value) !== -1,
|
||||
},
|
||||
fullWidth: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
components: {
|
||||
ElButton,
|
||||
N8nSpinner,
|
||||
N8nIcon,
|
||||
},
|
||||
styles: (props: {
|
||||
fullWidth?: boolean;
|
||||
float?: string;
|
||||
}): { float?: string; width?: string } => {
|
||||
return {
|
||||
...(props.float ? { float: props.float } : {}),
|
||||
...(props.fullWidth ? { width: '100%' } : {}),
|
||||
};
|
||||
},
|
||||
getClass(props: { type: string; theme?: string }): string {
|
||||
return props.type === 'text'
|
||||
? 'text'
|
||||
: `${props.type}-${props.theme || 'primary'}`;
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" module>
|
||||
@function lightness($h, $s, $l, $lightness) {
|
||||
@return hsl(var(#{$h}), var(#{$s}), calc(var(#{$l}) + #{$lightness}));
|
||||
}
|
||||
|
||||
.button {
|
||||
> i {
|
||||
display: none;
|
||||
}
|
||||
|
||||
> span {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
span + span {
|
||||
margin-left: var(--spacing-3xs);
|
||||
}
|
||||
}
|
||||
|
||||
$active-shade-percent: 10%;
|
||||
$color-primary-shade: lightness(
|
||||
--color-primary-h,
|
||||
--color-primary-s,
|
||||
--color-primary-l,
|
||||
-($active-shade-percent)
|
||||
);
|
||||
|
||||
$color-success-shade: lightness(
|
||||
--color-success-h,
|
||||
--color-success-s,
|
||||
--color-success-l,
|
||||
-($active-shade-percent)
|
||||
);
|
||||
|
||||
$color-warning-shade: lightness(
|
||||
--color-warning-h,
|
||||
--color-warning-s,
|
||||
--color-warning-l,
|
||||
-($active-shade-percent)
|
||||
);
|
||||
|
||||
$color-danger-shade: lightness(
|
||||
--color-danger-h,
|
||||
--color-danger-s,
|
||||
--color-danger-l,
|
||||
-($active-shade-percent)
|
||||
);
|
||||
|
||||
.primary-primary {
|
||||
composes: button;
|
||||
}
|
||||
|
||||
.primary-success {
|
||||
composes: button;
|
||||
--button-background-color: var(--color-success);
|
||||
--button-color: var(--color-text-xlight);
|
||||
--button-border-color: var(--color-success);
|
||||
--button-active-color: var(--color-text-xlight);
|
||||
--button-active-border-color: #{$color-success-shade};
|
||||
--button-active-background-color: #{$color-success-shade};
|
||||
}
|
||||
|
||||
.primary-warning {
|
||||
composes: button;
|
||||
--button-background-color: var(--color-warning);
|
||||
--button-color: var(--color-text-xlight);
|
||||
--button-border-color: var(--color-warning);
|
||||
--button-active-color: var(--color-text-xlight);
|
||||
--button-active-border-color: #{$color-warning-shade};
|
||||
--button-active-background-color: #{$color-warning-shade};
|
||||
}
|
||||
|
||||
.primary-danger {
|
||||
composes: button;
|
||||
--button-background-color: var(--color-danger);
|
||||
--button-color: var(--color-text-xlight);
|
||||
--button-border-color: var(--color-danger);
|
||||
--button-active-color: var(--color-text-xlight);
|
||||
--button-active-border-color: #{$color-danger-shade};
|
||||
--button-active-background-color: #{$color-danger-shade};
|
||||
}
|
||||
|
||||
.outline {
|
||||
--button-background-color: var(--color-foreground-xlight);
|
||||
--button-disabled-background-color: var(--color-foreground-xlight);
|
||||
--button-active-background-color: var(--color-foreground-xlight);
|
||||
}
|
||||
|
||||
.outline-primary {
|
||||
composes: button;
|
||||
composes: outline;
|
||||
--button-color: var(--color-primary);
|
||||
--button-active-border-color: #{$color-primary-shade};
|
||||
--button-active-color: #{$color-primary-shade};
|
||||
}
|
||||
|
||||
.outline-success {
|
||||
composes: button;
|
||||
composes: outline;
|
||||
--button-color: var(--color-success);
|
||||
--button-border-color: var(--color-success);
|
||||
--button-active-color: #{$color-success-shade};
|
||||
--button-active-border-color: #{$color-success-shade};
|
||||
}
|
||||
|
||||
.outline-warning {
|
||||
composes: button;
|
||||
composes: outline;
|
||||
--button-color: var(--color-warning);
|
||||
--button-border-color: var(--color-warning);
|
||||
--button-active-color: #{$color-warning-shade};
|
||||
--button-active-border-color: #{$color-warning-shade};
|
||||
}
|
||||
|
||||
.outline-danger {
|
||||
composes: button;
|
||||
composes: outline;
|
||||
--button-color: var(--color-danger);
|
||||
--button-border-color: var(--color-danger);
|
||||
--button-active-color: #{$color-danger-shade};
|
||||
--button-active-border-color: #{$color-danger-shade};
|
||||
}
|
||||
|
||||
.light-primary {
|
||||
composes: button;
|
||||
--button-color: var(--color-primary);
|
||||
--button-border-color: var(--color-primary-tint-2);
|
||||
--button-background-color: var(--color-primary-tint-2);
|
||||
--button-active-background-color: var(--color-primary-tint-2);
|
||||
--button-active-color: #{$color-primary-shade};
|
||||
--button-active-border-color: #{$color-primary-shade};
|
||||
}
|
||||
|
||||
.light-success {
|
||||
composes: button;
|
||||
--button-color: var(--color-success);
|
||||
--button-border-color: var(--color-success-tint-1);
|
||||
--button-background-color: var(--color-success-tint-1);
|
||||
--button-active-background-color: var(--color-success-tint-1);
|
||||
--button-active-color: #{$color-success-shade};
|
||||
--button-active-border-color: #{$color-success-shade};
|
||||
}
|
||||
|
||||
.light-warning {
|
||||
composes: button;
|
||||
--button-color: var(--color-warning);
|
||||
--button-border-color: var(--color-warning-tint-2);
|
||||
--button-background-color: var(--color-warning-tint-2);
|
||||
--button-active-background-color: var(--color-warning-tint-2);
|
||||
--button-active-color: #{$color-warning-shade};
|
||||
--button-active-border-color: #{$color-warning-shade};
|
||||
}
|
||||
|
||||
.light-danger {
|
||||
composes: button;
|
||||
--button-color: var(--color-danger);
|
||||
--button-border-color: var(--color-danger-tint-1);
|
||||
--button-background-color: var(--color-danger-tint-1);
|
||||
--button-active-background-color: var(--color-danger-tint-1);
|
||||
--button-active-color: #{$color-danger-shade};
|
||||
--button-active-border-color: #{$color-danger-shade};
|
||||
}
|
||||
|
||||
.text {
|
||||
composes: button;
|
||||
--button-color: var(--color-text-light);
|
||||
--button-border-color: transparent;
|
||||
--button-background-color: transparent;
|
||||
--button-active-background-color: transparent;
|
||||
--button-active-color: var(--color-primary);
|
||||
--button-active-border-color: transparent;
|
||||
}
|
||||
|
||||
.icon {
|
||||
display: inline-flex;
|
||||
|
||||
svg {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user