Merge pull request #6375 from Sage/FE-5882-loaderbar-height-fix

fix(loaderbar): loaderBar height fix
Sage · Nov 3, 2023 · f4e9275 · f4e9275
2 parents 8fcc359 + dbb52df
commit f4e9275
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 2 deletions.
diff --git a/src/components/loader-bar/loader-bar-test.stories.tsx b/src/components/loader-bar/loader-bar-test.stories.tsx
@@ -1,10 +1,13 @@
 import React from "react";
+import { ComponentStory } from "@storybook/react";
 import LoaderBar, { LoaderBarProps } from ".";
 import { LOADER_BAR_SIZES } from "./loader-bar.config";
+import Box from "../box";
+import Typography from "../typography";
 
 export default {
   title: "Loader Bar/Test",
-  includeStories: ["DefaultStory"],
+  includeStories: ["DefaultStory", "LoaderBarWithMinHeight"],
   parameters: {
     info: { disable: true },
     chromatic: {
@@ -30,3 +33,19 @@ DefaultStory.storyName = "default";
 export const LoaderBarComponentTest = (props: LoaderBarProps) => {
   return <LoaderBar mt={2} size="medium" {...props} />;
 };
+
+export const LoaderBarWithMinHeight: ComponentStory<typeof LoaderBar> = () => {
+  return (
+    <Box p={3}>
+      <Box backgroundColor="#e0e0e0" minHeight="50px">
+        <Typography>Small bar</Typography>
+      </Box>
+      <LoaderBar m={0} size="small" />
+    </Box>
+  );
+};
+
+LoaderBarWithMinHeight.parameters = {
+  chromatic: { disableSnapshot: false },
+  controls: { disable: true },
+};
diff --git a/src/components/loader-bar/loader-bar.style.ts b/src/components/loader-bar/loader-bar.style.ts
@@ -36,7 +36,6 @@ const innerBarAnimation = keyframes`
 
 const StyledLoaderBar = styled.div<StyledLoaderBarProps>`
   ${({ size }) => css`
-    display: inline-block;
     border-radius: var(--borderRadius400);
     height: ${getHeight(size)};
     width: 100%;