FLOW-1162 scrollbar issue fixed in chrome v121 (#225)

ollionorg · Jan 25, 2024 · 8a613f4 · 8a613f4
1 parent 686e38a
commit 8a613f4
Show file tree

Hide file tree

Showing 6 changed files with 29 additions and 15 deletions.
diff --git a/packages/flow-core/CHANGELOG.md b/packages/flow-core/CHANGELOG.md
@@ -2,6 +2,20 @@
 
 # Change Log
 
+## [2.7.8] - 2024-01-25
+
+### Improvements
+
+- Added `show-scrollbar` property to `f-div`.
+
+### Bug Fixes
+
+- Updated `f-div` to accommodate changes in Chrome v121, which now supports the `scrollbar-width` property. Default behavior adjusted accordingly.
+
+### Note
+
+- Removed `hide-scrollbar` property from `f-div`. Existing usage won't cause any issues.
+
 ## [2.7.7] - 2024-01-22
 
 ### Improvements

diff --git a/packages/flow-core/package.json b/packages/flow-core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ollion/flow-core",
-  "version": "2.7.7",
+  "version": "2.7.8",
   "description": "Core package of flow design system",
   "module": "dist/flow-core.es.js",
   "main": "dist/flow-core.cjs.js",

diff --git a/packages/flow-core/src/components/f-div/f-div-global.scss b/packages/flow-core/src/components/f-div/f-div-global.scss
@@ -122,12 +122,13 @@ f-div {
 		z-index: 1001; /* set a higher z-index for the highlighted div to place it above the overlay */
 	}
 
-	&[hide-scrollbar] {
-		-ms-overflow-style: none; /* Internet Explorer 10+ */
-		scrollbar-width: none; /* Firefox */
+	&[show-scrollbar] {
+		scrollbar-width: thin;
 
 		&::-webkit-scrollbar {
-			display: none; /* Safari and Chrome */
+			display: block;
+			width: 6px;
+			height: 6px;
 		}
 	}
 	// iterating over states and appyling respective css

diff --git a/packages/flow-core/src/components/f-div/f-div.ts b/packages/flow-core/src/components/f-div/f-div.ts
@@ -222,8 +222,8 @@ export class FDiv extends FRoot {
 	/**
 	 * @attribute set true when to hide scrollbar
 	 */
-	@property({ reflect: true, type: Boolean, attribute: "hide-scrollbar" })
-	hideScrollbar?: boolean = false;
+	@property({ reflect: true, type: Boolean, attribute: "show-scrollbar" })
+	showScrollbar?: boolean = false;
 
 	/**
 	 * @attribute Overflow property defines the behavior of the overflowing elements inside a f-div

diff --git a/packages/flow-core/src/mixins/scss/_mixins.scss b/packages/flow-core/src/mixins/scss/_mixins.scss
@@ -7,15 +7,14 @@
 
 @mixin scrollbar() {
 	&::-webkit-scrollbar {
-		width: 6px;
-		height: 6px;
+		display: none;
 	}
 	&::-webkit-scrollbar-track {
 		-webkit-box-shadow: inset 0 0 2px transparent;
 		background-color: transparent;
 	}
 	scrollbar-color: var(--color-neutral-default) transparent;
-	scrollbar-width: thin;
+	scrollbar-width: none;
 	&::-webkit-scrollbar-thumb {
 		background-color: var(--color-neutral-default);
 	}

diff --git a/stories/flow-core/f-div.stories.ts b/stories/flow-core/f-div.stories.ts
@@ -1348,10 +1348,10 @@ export const Selected = {
 	name: "selected"
 };
 
-export const HideScrollbar = {
+export const ShowScrollbar = {
 	render: () =>
 		html` <f-text state="secondary"
-				>default behaviour when content overflows, it shows scrollbar</f-text
+				>default behaviour when content overflows, scrollbar is hidden</f-text
 			>
 			<f-div gap="medium" direction="column" padding="medium" height="200px" direction="row">
 				<f-text
@@ -1384,11 +1384,11 @@ export const HideScrollbar = {
 			<br /><br />
 			<f-divider></f-divider>
 			<br /><br />
-			<f-text>hide-scrollbar is set (Note: Users can still scroll through the content.)</f-text>
+			<f-text>show-scrollbar is set (Note: Users can still scroll through the content.)</f-text>
 			<f-div
 				gap="medium"
 				direction="column"
-				hide-scrollbar
+				show-scrollbar
 				padding="medium"
 				height="200px"
 				direction="row"
@@ -1421,7 +1421,7 @@ export const HideScrollbar = {
 				>
 			</f-div>`,
 
-	name: "hide-scrollbar"
+	name: "show-scrollbar"
 };
 
 export const Loading = {