Merge branch 'master' into feature/undo-redo

* master: fix: Update padding for resource filters dropdown (#4751) fix: Update workflow save button type and design and share button type (#4752) fix: Update owner badge padding (no-changelog) (#4749) fix: Remove background for resource ownership selector (#4748) fix: Update size of select components in filters dropdown (#4747)
n8n-io · Nov 29, 2022 · 3a1aa22 · 3a1aa22
2 parents 027e143 + aff8cd9
commit 3a1aa22
Show file tree

Hide file tree

Showing 10 changed files with 19 additions and 17 deletions.
diff --git a/packages/design-system/src/components/N8nBadge/Badge.vue b/packages/design-system/src/components/N8nBadge/Badge.vue
@@ -70,6 +70,6 @@ export default Vue.extend({
 	border-radius: var(--border-radius-base);
 	color: var(--color-text-light);
 	border-color: var(--color-text-light);
-	padding: 1px var(--spacing-4xs);
+	padding: 1px var(--spacing-5xs);
 }
 </style>
diff --git a/packages/design-system/src/components/N8nBadge/__tests__/__snapshots__/Badge.spec.ts.snap b/packages/design-system/src/components/N8nBadge/__tests__/__snapshots__/Badge.spec.ts.snap
@@ -1,7 +1,7 @@
 // Vitest Snapshot v1
 
-exports[`components > N8nBadge > props > should render default theme correctly 1`] = `"<span class=\\"n8n-badge _default_1xljn_9 _badge_1xljn_1\\"><n8n-text-stub bold=\\"true\\" size=\\"large\\" compact=\\"true\\" tag=\\"span\\"><n8n-text-stub size=\\"medium\\" tag=\\"span\\">Default badge</n8n-text-stub></n8n-text-stub></span>"`;
+exports[`components > N8nBadge > props > should render default theme correctly 1`] = `"<span class=\\"n8n-badge _default_1j57f_9 _badge_1j57f_1\\"><n8n-text-stub bold=\\"true\\" size=\\"large\\" compact=\\"true\\" tag=\\"span\\"><n8n-text-stub size=\\"medium\\" tag=\\"span\\">Default badge</n8n-text-stub></n8n-text-stub></span>"`;
 
-exports[`components > N8nBadge > props > should render secondary theme correctly 1`] = `"<span class=\\"n8n-badge _secondary_1xljn_25 _badge_1xljn_1\\"><n8n-text-stub size=\\"medium\\" compact=\\"true\\" tag=\\"span\\"><n8n-text-stub size=\\"medium\\" tag=\\"span\\">Secondary badge</n8n-text-stub></n8n-text-stub></span>"`;
+exports[`components > N8nBadge > props > should render secondary theme correctly 1`] = `"<span class=\\"n8n-badge _secondary_1j57f_25 _badge_1j57f_1\\"><n8n-text-stub size=\\"medium\\" compact=\\"true\\" tag=\\"span\\"><n8n-text-stub size=\\"medium\\" tag=\\"span\\">Secondary badge</n8n-text-stub></n8n-text-stub></span>"`;
 
-exports[`components > N8nBadge > props > should render with default values correctly 1`] = `"<span class=\\"n8n-badge _default_1xljn_9 _badge_1xljn_1\\"><n8n-text-stub size=\\"small\\" compact=\\"true\\" tag=\\"span\\"><n8n-text-stub size=\\"medium\\" tag=\\"span\\">A Badge</n8n-text-stub></n8n-text-stub></span>"`;
+exports[`components > N8nBadge > props > should render with default values correctly 1`] = `"<span class=\\"n8n-badge _default_1j57f_9 _badge_1j57f_1\\"><n8n-text-stub size=\\"small\\" compact=\\"true\\" tag=\\"span\\"><n8n-text-stub size=\\"medium\\" tag=\\"span\\">A Badge</n8n-text-stub></n8n-text-stub></span>"`;
diff --git a/packages/design-system/src/components/N8nMenu/Menu.vue b/packages/design-system/src/components/N8nMenu/Menu.vue
@@ -150,7 +150,7 @@ export default Vue.extend({
 	height: 100%;
 	display: flex;
 	flex-direction: column;
-	background-color: var(--color-background-xlight);
+	background-color: var(--menu-background, var(--color-background-xlight));
 }
 
 .menuContent {

diff --git a/packages/design-system/src/css/select.scss b/packages/design-system/src/css/select.scss
@@ -28,10 +28,9 @@
 
 	.el-select__tags + .el-input {
 		input {
-			box-sizing: content-box;
-			padding: 0;
-			text-indent: var(--spacing-xs);
-			width: calc(100% - 2px);
+			box-sizing: border-box;
+			padding: 0 0 0 var(--spacing-2xs);
+			text-indent: 0;
 		}
 	}
 
@@ -92,7 +91,7 @@
 		border: none;
 		outline: none;
 		padding: 0;
-		margin-left: 15px;
+		margin-left: var(--spacing-2xs);
 		color: var.$select-multiple-input-color;
 		font-size: var.$select-font-size;
 		appearance: none;

diff --git a/packages/editor-ui/src/components/MainHeader/WorkflowDetails.vue b/packages/editor-ui/src/components/MainHeader/WorkflowDetails.vue
@@ -69,15 +69,15 @@
 				</span>
 				<enterprise-edition :features="[EnterpriseEditionFeature.WorkflowSharing]">
 					<n8n-button
-						type="tertiary"
+						type="secondary"
 						class="mr-2xs"
 						@click="onShareButtonClick"
 					>
 						{{ $locale.baseText('workflowDetails.share') }}
 					</n8n-button>
 				</enterprise-edition>
 				<SaveButton
-					type="secondary"
+					type="primary"
 					:saved="!this.isDirty && !this.isNewWorkflow"
 					:disabled="isWorkflowSaving"
 					data-test-id="workflow-save-button"

diff --git a/packages/editor-ui/src/components/SaveButton.vue b/packages/editor-ui/src/components/SaveButton.vue
@@ -70,6 +70,7 @@ export default Vue.extend({
 	font-weight: 600;
 	line-height: 12px;
 	text-align: center;
-	padding: var(--spacing-2xs) var(--spacing-xs);
+	padding: var(--spacing-2xs) var(--spacing-2xs);
+	min-width: 53px;
 }
 </style>
diff --git a/packages/editor-ui/src/components/forms/ResourceFiltersDropdown.vue b/packages/editor-ui/src/components/forms/ResourceFiltersDropdown.vue
@@ -38,7 +38,7 @@
 					:users="ownedByUsers"
 					:currentUserId="usersStore.currentUser.id"
 					:value="value.ownedBy"
-					size="small"
+					size="medium"
 					@input="setKeyValue('ownedBy', $event)"
 				/>
 			</enterprise-edition>
@@ -54,7 +54,7 @@
 					:users="sharedWithUsers"
 					:currentUserId="usersStore.currentUser.id"
 					:value="value.sharedWith"
-					size="small"
+					size="medium"
 					@input="setKeyValue('sharedWith', $event)"
 				/>
 			</enterprise-edition>
@@ -163,6 +163,7 @@ export default Vue.extend({
 
 .filters-dropdown {
 	width: 280px;
+	padding-bottom: var(--spacing-s);
 }
 
 .filters-dropdown-footer {

diff --git a/packages/editor-ui/src/components/forms/ResourceOwnershipSelect.ee.vue b/packages/editor-ui/src/components/forms/ResourceOwnershipSelect.ee.vue
@@ -54,6 +54,7 @@ export default Vue.extend({
 
 <style lang="scss" scoped>
 .menu-container {
+	--menu-background: transparent;
 	--menu-padding: 0;
 }
 </style>
diff --git a/packages/editor-ui/src/views/CredentialsView.vue b/packages/editor-ui/src/views/CredentialsView.vue
@@ -23,7 +23,7 @@
 				/>
 				<n8n-select
 					:value="filters.type"
-					size="small"
+					size="medium"
 					multiple
 					filterable
 					ref="typeInput"

diff --git a/packages/editor-ui/src/views/WorkflowsView.vue b/packages/editor-ui/src/views/WorkflowsView.vue
@@ -62,7 +62,7 @@
 					color="text-base"
 					class="mb-3xs"
 				/>
-				<n8n-select :value="filters.status" @input="setKeyValue('status', $event)" size="small">
+				<n8n-select :value="filters.status" @input="setKeyValue('status', $event)" size="medium">
 					<n8n-option
 						v-for="option in statusFilterOptions"
 						:key="option.label"