docs(picker): add wrapping side label to sb

adobe · Feb 7, 2024 · 2684376 · 2684376
1 parent 5d4cc47
commit 2684376
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 0 deletions.
diff --git a/components/picker/stories/picker.stories.js b/components/picker/stories/picker.stories.js
@@ -198,6 +198,17 @@ const ChromaticPickerGroup = ({
 					placeholder: "Select Your State Or Province"
 				})}
 			</div>
+			<div>
+				${Template({
+					labelPosition: "left",
+					...args,
+					isOpen: false,
+					withSwitch: true,
+					fieldLabelStyle: {'max-width': '90px'},
+					label: "Enter country, text should wrap",
+					placeholder: "Select Your State Or Province"
+				})}
+			</div>
 			<div>
 				${Template({
 						labelPosition: "left",
@@ -208,6 +219,18 @@ const ChromaticPickerGroup = ({
 						isQuiet: true,
 					})}
 			</div>
+			<div>
+				${Template({
+					labelPosition: "left",
+					...args,
+					isOpen: false,
+					withSwitch: true,
+					isQuiet: true,
+					fieldLabelStyle: {'max-width': '90px'},
+					label: "Enter country, text should wrap",
+					placeholder: "Select Your State Or Province"
+				})}
+			</div>
 		</div>
 	`;
 };

diff --git a/components/picker/stories/template.js b/components/picker/stories/template.js
@@ -106,6 +106,8 @@ export const Template = ({
 	isDisabled = false,
 	isReadOnly = false,
 	withSwitch = false,
+	fieldLabelStyle = {},
+	fieldLabelText,
 	customClasses = [],
 	customStyles = {},
 	customPopoverStyles = {},
@@ -144,6 +146,7 @@ export const Template = ({
 					size,
 					label,
 					isDisabled,
+					style: fieldLabelStyle,
 					alignment: labelPosition,
 			  })
 			: ""}