Fixed Input styles for Storybook web

janis-commerce · Aug 16, 2023 · c5b4e27 · c5b4e27
1 parent 1b21312
commit c5b4e27
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 3 deletions.
diff --git a/.ondevice/storybook.requires.js b/.ondevice/storybook.requires.js
@@ -14,7 +14,7 @@ global.STORIES = [
     directory: "./storybook/stories",
     files: "**/*.stories.?(ts|tsx|js|jsx)",
     importPathMatcher:
-      "^\\.[\\\\/](?:storybook\\/stories(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.(?:ts|tsx|js|jsx)?)$",
+      "^\\.[\\\\/](?:storybook[\\\\/]stories(?:[\\\\/](?!\\.)(?:(?:(?!(?:^|[\\\\/])\\.).)*?)[\\\\/]|[\\\\/]|$)(?!\\.)(?=.)[^\\\\/]*?\\.stories\\.(?:ts|tsx|js|jsx)?)$",
   },
 ];
 
@@ -49,6 +49,7 @@ const getStories = () => {
   return {
     "./storybook/stories/Avatar/Avatar.stories.js": require("../storybook/stories/Avatar/Avatar.stories.js"),
     "./storybook/stories/CheckBox/CheckBox.stories.js": require("../storybook/stories/CheckBox/CheckBox.stories.js"),
+    "./storybook/stories/DesignStystem/Colors.stories.js": require("../storybook/stories/DesignStystem/Colors.stories.js"),
     "./storybook/stories/Image/Image.stories.js": require("../storybook/stories/Image/Image.stories.js"),
     "./storybook/stories/Input/Input.stories.js": require("../storybook/stories/Input/Input.stories.js"),
     "./storybook/stories/Loading/Loading.stories.js": require("../storybook/stories/Loading/Loading.stories.js"),

diff --git a/src/components/Input/index.tsx b/src/components/Input/index.tsx
@@ -86,7 +86,7 @@ const Input = React.forwardRef<TextInput, InputProps>(
 		};
 
 		const hasMessage = !!statusMessage;
-		const isLabelVisible = inputState === 'focus' && !value;
+		const isLabelVisible = !disabled && !readOnly && inputState === 'focus' && !value;
 
 		const validBorderColor = getBorderColor({inputState, hasMessage, status, inputColor});
 		const validLabelColor = getLabelColor({
@@ -115,7 +115,7 @@ const Input = React.forwardRef<TextInput, InputProps>(
 				letterSpacing: 0,
 				lineHeight: 19,
 				position: 'absolute',
-				bottom: raiseLabel({disabled, hasMessage, inputState}) ? 25 : 5,
+				bottom: raiseLabel({disabled, hasMessage, inputState}) ? 25 : 0,
 			},
 			input: {
 				color: validInputTextColor,