From eb53df5a892a0b507c72079592fb86cc421882f3 Mon Sep 17 00:00:00 2001
From: Carol Soliman <17387510+carsoli@users.noreply.github.com>
Date: Thu, 23 Jun 2022 14:02:11 +0000
Subject: [PATCH 1/3] refact(mixins): move scrollbar mixin to kotti-style used
 by more than just the kotti-fields now

---
 .../components/CommentInlineEdit.vue          |  2 +-
 .../kotti-field-select/components/Options.vue |  2 +-
 .../kotti-field-text-area/KtFieldTextArea.vue |  5 ++--
 .../kotti-ui/source/kotti-field/mixins.scss   | 27 ------------------
 .../kotti-ui/source/kotti-style/_mixins.scss  | 28 +++++++++++++++++++
 .../kotti-ui/source/kotti-style/index.scss    |  1 +
 6 files changed, 34 insertions(+), 31 deletions(-)
 create mode 100644 packages/kotti-ui/source/kotti-style/_mixins.scss

diff --git a/packages/kotti-ui/source/kotti-comment/components/CommentInlineEdit.vue b/packages/kotti-ui/source/kotti-comment/components/CommentInlineEdit.vue
index bcc72c6af7..ad24df30f7 100644
--- a/packages/kotti-ui/source/kotti-comment/components/CommentInlineEdit.vue
+++ b/packages/kotti-ui/source/kotti-comment/components/CommentInlineEdit.vue
@@ -75,7 +75,7 @@ export default defineComponent<{
 </script>
 
 <style lang="scss" scoped>
-@import '../../kotti-field/mixins';
+@import '../../kotti-style/_mixins.scss';
 
 .kt-comment-inline-edit {
 	position: relative;
diff --git a/packages/kotti-ui/source/kotti-field-select/components/Options.vue b/packages/kotti-ui/source/kotti-field-select/components/Options.vue
index 1e7fe6627c..41197b3b6e 100644
--- a/packages/kotti-ui/source/kotti-field-select/components/Options.vue
+++ b/packages/kotti-ui/source/kotti-field-select/components/Options.vue
@@ -220,7 +220,7 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-@import '../../kotti-field/mixins.scss';
+@import '../../kotti-style/_mixins.scss';
 
 .kt-field-select__options {
 	position: relative;
diff --git a/packages/kotti-ui/source/kotti-field-text-area/KtFieldTextArea.vue b/packages/kotti-ui/source/kotti-field-text-area/KtFieldTextArea.vue
index 1d3c1dce09..bbdee128e4 100644
--- a/packages/kotti-ui/source/kotti-field-text-area/KtFieldTextArea.vue
+++ b/packages/kotti-ui/source/kotti-field-text-area/KtFieldTextArea.vue
@@ -60,8 +60,9 @@ export default defineComponent<KottiFieldTextArea.PropsInternal>({
 })
 </script>
 
-<style lang="scss">
-@import '../kotti-field/mixins';
+<style lang="scss" scoped>
+@import '../kotti-style/_mixins.scss';
+@import '../kotti-field/mixins.scss';
 
 .kt-field-text-area {
 	$vertical-padding: 0.6em;
diff --git a/packages/kotti-ui/source/kotti-field/mixins.scss b/packages/kotti-ui/source/kotti-field/mixins.scss
index 8e231ad832..7dbf12e81e 100644
--- a/packages/kotti-ui/source/kotti-field/mixins.scss
+++ b/packages/kotti-ui/source/kotti-field/mixins.scss
@@ -391,34 +391,7 @@
 	}
 }
 
-@mixin prettify-scrollbar {
-	&::-webkit-scrollbar {
-		opacity: 0;
-	}
-
-	scrollbar-width: thin;
-	scrollbar-color: var(--ui-background) var(--ui-background);
-
-	&:active,
-	&:hover {
-		scrollbar-color: var(--ui-03) var(--ui-background);
-		transition: scrollbar-color var(--transition-medium) ease-out;
-
-		&::-webkit-scrollbar {
-			width: 5px;
-			height: 5px;
-			opacity: 1;
-			transition: opacity var(--transition-medium) ease-out;
-		}
 
-		&::-webkit-scrollbar-thumb {
-			cursor: all-scroll;
-
-			background-color: var(--ui-03);
-			border-radius: var(--field-border-radius);
-		}
-	}
-}
 
 @mixin sizes {
 	$fontSizes: (
diff --git a/packages/kotti-ui/source/kotti-style/_mixins.scss b/packages/kotti-ui/source/kotti-style/_mixins.scss
new file mode 100644
index 0000000000..c600e834a5
--- /dev/null
+++ b/packages/kotti-ui/source/kotti-style/_mixins.scss
@@ -0,0 +1,28 @@
+@mixin prettify-scrollbar {
+	&::-webkit-scrollbar {
+		opacity: 0;
+	}
+
+	scrollbar-width: thin;
+	scrollbar-color: var(--ui-background) var(--ui-background);
+
+	&:active,
+	&:hover {
+		scrollbar-color: var(--ui-03) var(--ui-background);
+		transition: scrollbar-color var(--transition-medium) ease-out;
+
+		&::-webkit-scrollbar {
+			width: 5px;
+			height: 5px;
+			opacity: 1;
+			transition: opacity var(--transition-medium) ease-out;
+		}
+
+		&::-webkit-scrollbar-thumb {
+			cursor: all-scroll;
+
+			background-color: var(--ui-03);
+			border-radius: var(--field-border-radius);
+		}
+	}
+}
diff --git a/packages/kotti-ui/source/kotti-style/index.scss b/packages/kotti-ui/source/kotti-style/index.scss
index 60de719f9a..e374779064 100644
--- a/packages/kotti-ui/source/kotti-style/index.scss
+++ b/packages/kotti-ui/source/kotti-style/index.scss
@@ -12,6 +12,7 @@
 // Utility classes
 @import 'utilities';
 @import 'media';
+@import 'mixins';
 
 // Layout
 @import 'layout';

From 54d4152d9f501b2bfc0f30ec732498c7e6f99eaf Mon Sep 17 00:00:00 2001
From: Carol Soliman <17387510+carsoli@users.noreply.github.com>
Date: Thu, 23 Jun 2022 14:33:57 +0000
Subject: [PATCH 2/3] feat(635): support isExpanded prop to allow expansion by
 default

---
 .../pages/usage/components/drawer.vue         | 34 +++++++++++--------
 .../kotti-ui/source/kotti-drawer/KtDrawer.vue | 23 +++++++++----
 .../kotti-ui/source/kotti-drawer/types.ts     |  1 +
 3 files changed, 36 insertions(+), 22 deletions(-)

diff --git a/packages/documentation/pages/usage/components/drawer.vue b/packages/documentation/pages/usage/components/drawer.vue
index c85d44da6c..7e9603870a 100644
--- a/packages/documentation/pages/usage/components/drawer.vue
+++ b/packages/documentation/pages/usage/components/drawer.vue
@@ -9,10 +9,6 @@ It is best to place secondary functionality or information into the drawer, and
 
 ![Structure](~/assets/img/drawer_structure.png)
 
-- **Drawer:** The size of drawer depends on information density.
-- **Handle:** By clicking the handles, the drawer can be `Expanded` to display more information.
-- **Background:** The background should be black `#000000` with `46%` opacity.
-
 ## Size
 
 <div class="element-example">
@@ -54,6 +50,24 @@ It is best to place secondary functionality or information into the drawer, and
 	</KtDrawer>
 </div>
 
+## Expansion
+
+<div class="element-example" >
+	<KtButton type="primary" class="mr-16px" @click="showDefaultExpanded=true" label="Show Expanded-by-default Drawer" />
+	<KtDrawer v-if="showDefaultExpanded" isExpanded @close="showDefaultExpanded=false">
+		<div slot="drawer-header">
+			<h2>Default Size Drawer</h2>
+		</div>
+		<div slot="drawer-body">
+			<p>This drawer is expanded by default.</p>
+		</div>
+		<div slot="drawer-footer">
+			<KtButton @click="showDefaultExpanded=false" class="w-100" label="Close Drawer" />
+		</div>
+	</KtDrawer>
+
+</div>
+
 There are different ways to customize the width of the drawer.
 
 Each drawer has a default state and a wide state, the transition can be triggered by clicking on the arrow at the edge of the drawer.
@@ -125,17 +139,6 @@ When the `disallowCloseOutside` flag is set, it prevents the user from accidenta
 </div>
 
 </ShowCase>
-
-## Usage
-
-### Attributes
-
-| Attribute              | Description                                | Type      | Accepted values | Default |
-| :--------------------- | :----------------------------------------- | :-------- | :-------------- | :------ |
-| `disallowCloseOutside` | closed drawer when click outside of drawer | `Boolean` | —               | `true`  |
-| `defaultWidth`         | width when drawer is closed                | `String`  | CSS width       | —       |
-| `expandWidth`          | width when drawer is expanded              | `String`  | CSS width       | —       |
-| `isWide`               | wide drawer                                | `Boolean` | —               | `false` |
 </template>
 
 <script lang="ts">
@@ -155,6 +158,7 @@ export default defineComponent({
 		return {
 			component: KtDrawer,
 			customizeWidthDrawer: false,
+			showDefaultExpanded: false,
 			showDrawer: false,
 			showWideDrawer: false,
 		}
diff --git a/packages/kotti-ui/source/kotti-drawer/KtDrawer.vue b/packages/kotti-ui/source/kotti-drawer/KtDrawer.vue
index d7f8a5e350..6cb7654eaa 100644
--- a/packages/kotti-ui/source/kotti-drawer/KtDrawer.vue
+++ b/packages/kotti-ui/source/kotti-drawer/KtDrawer.vue
@@ -12,7 +12,7 @@
 					<slot name="drawer-footer" />
 				</div>
 				<div class="kt-drawer__handle" @click="onDrawerHandleClick">
-					<i v-if="isExpanded" class="yoco" v-text="Yoco.Icon.CHEVRON_RIGHT" />
+					<i v-if="_isExpanded" class="yoco" v-text="Yoco.Icon.CHEVRON_RIGHT" />
 					<i v-else class="yoco" v-text="Yoco.Icon.CHEVRON_LEFT" />
 				</div>
 			</div>
@@ -22,7 +22,7 @@
 
 <script lang="ts">
 import { Yoco } from '@3yourmind/yoco'
-import { computed, defineComponent, ref } from '@vue/composition-api'
+import { computed, defineComponent, ref, watch } from '@vue/composition-api'
 
 import { makeProps } from '../make-props'
 
@@ -32,22 +32,31 @@ export default defineComponent<KottiDrawer.PropsInternal>({
 	name: 'KtDrawer',
 	props: makeProps(KottiDrawer.propsSchema),
 	setup(props, { emit }) {
-		const isExpanded = ref(false)
+		const _isExpanded = ref(false)
+		watch(
+			() => props.isExpanded,
+			(shouldExpand) => {
+				_isExpanded.value = shouldExpand
+			},
+			{ immediate: true },
+		)
 
 		return {
+			_isExpanded,
 			drawerClass: computed(() => ({
 				'kt-drawer__container': true,
-				'kt-drawer__container--is-expanded': isExpanded.value,
+				'kt-drawer__container--is-expanded': _isExpanded.value,
 				'kt-drawer__container--is-wide': props.isWide,
 			})),
 			drawerWidth: computed(() => {
 				return props.defaultWidth === null || props.expandWidth === null
 					? {}
-					: { width: isExpanded.value ? props.expandWidth : props.defaultWidth }
+					: {
+							width: _isExpanded.value ? props.expandWidth : props.defaultWidth,
+					  }
 			}),
-			isExpanded,
 			onDrawerHandleClick: () => {
-				isExpanded.value = !isExpanded.value
+				_isExpanded.value = !_isExpanded.value
 			},
 			onOutsideDrawerClick: () => {
 				if (!props.disallowCloseOutside) {
diff --git a/packages/kotti-ui/source/kotti-drawer/types.ts b/packages/kotti-ui/source/kotti-drawer/types.ts
index c04d4bf55b..a96dca7a95 100644
--- a/packages/kotti-ui/source/kotti-drawer/types.ts
+++ b/packages/kotti-ui/source/kotti-drawer/types.ts
@@ -5,6 +5,7 @@ export namespace KottiDrawer {
 		defaultWidth: z.string().nullable().default(null),
 		disallowCloseOutside: z.boolean().default(false),
 		expandWidth: z.string().nullable().default(null),
+		isExpanded: z.boolean().default(false),
 		isWide: z.boolean().default(false),
 	})
 

From 7adaca5a4c1799e6e973d9b6759f5a88e91ce2bf Mon Sep 17 00:00:00 2001
From: Carol Soliman <17387510+carsoli@users.noreply.github.com>
Date: Thu, 23 Jun 2022 14:57:27 +0000
Subject: [PATCH 3/3] refact(KtDrawer): simplify padding/margin logic use
 variables for transitions

---
 packages/kotti-ui/source/kotti-drawer/KtDrawer.vue | 13 ++++++-------
 packages/kotti-ui/source/kotti-field/mixins.scss   |  2 --
 2 files changed, 6 insertions(+), 9 deletions(-)

diff --git a/packages/kotti-ui/source/kotti-drawer/KtDrawer.vue b/packages/kotti-ui/source/kotti-drawer/KtDrawer.vue
index 6cb7654eaa..8bac783c4a 100644
--- a/packages/kotti-ui/source/kotti-drawer/KtDrawer.vue
+++ b/packages/kotti-ui/source/kotti-drawer/KtDrawer.vue
@@ -78,6 +78,7 @@ export default defineComponent<KottiDrawer.PropsInternal>({
 
 <style lang="scss" scoped>
 @import '../kotti-style/_variables.scss';
+@import '../kotti-style/_mixins.scss';
 
 .kt-drawer {
 	&__mask {
@@ -89,7 +90,7 @@ export default defineComponent<KottiDrawer.PropsInternal>({
 		width: 100%;
 		height: 100%;
 		background-color: rgba(0, 0, 0, 0.5);
-		transition: opacity 0.5s ease;
+		transition: opacity var(--transition-long) ease;
 	}
 
 	&__container {
@@ -101,11 +102,9 @@ export default defineComponent<KottiDrawer.PropsInternal>({
 		width: var(--kt-drawer-default-width);
 		height: 100%;
 		padding: var(--unit-6);
-		padding-left: var(--unit-8);
-		overflow-y: auto;
 		background-color: var(--ui-background);
 		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.33);
-		transition: all 0.3s ease;
+		transition: all var(--transition-long) ease;
 
 		&--is-expanded {
 			width: 50%;
@@ -142,9 +141,9 @@ export default defineComponent<KottiDrawer.PropsInternal>({
 	}
 
 	&__body {
+		@include prettify-scrollbar;
 		flex: 1 1 auto;
-		padding: 0 0.8rem;
-		margin: 0 -0.8rem 0.8rem -0.8rem;
+		padding-bottom: var(--unit-4);
 		overflow-y: auto;
 	}
 
@@ -158,7 +157,7 @@ export default defineComponent<KottiDrawer.PropsInternal>({
 
 	&-enter {
 		opacity: 0;
-		transition: opacity 0.5s;
+		transition: opacity var(--transition-long);
 	}
 
 	&-leave-active {
diff --git a/packages/kotti-ui/source/kotti-field/mixins.scss b/packages/kotti-ui/source/kotti-field/mixins.scss
index 7dbf12e81e..d8cec0d0d2 100644
--- a/packages/kotti-ui/source/kotti-field/mixins.scss
+++ b/packages/kotti-ui/source/kotti-field/mixins.scss
@@ -391,8 +391,6 @@
 	}
 }
 
-
-
 @mixin sizes {
 	$fontSizes: (
 		'small': var(--font-size-small),