Merge pull request #5926 from pat270/LPD-41942

feat(@clayui/css): LPD-41942 Picker (dropdown-menu-select) change max-height to 7 items
liferay · Jan 23, 2025 · 6a50d0c · 6a50d0c
2 parents 0777d79 + 305dbeb
commit 6a50d0c
Show file tree

Hide file tree

Showing 3 changed files with 77 additions and 2 deletions.
diff --git a/packages/clay-core/stories/LanguagePicker.stories.tsx b/packages/clay-core/stories/LanguagePicker.stories.tsx
@@ -61,9 +61,78 @@ Default.args = {
 	small: false,
 };
 
+const localesLong = [
+	{
+		id: 'en_US',
+		label: 'en-US',
+		name: 'English (United States)',
+		symbol: 'en-us',
+	},
+	{
+		id: 'ar_SA',
+		label: 'ar-SA',
+		name: 'Arabic (Saudi Arabia)',
+		symbol: 'ar-sa',
+	},
+	{
+		id: 'ca_ES',
+		label: 'ca-ES',
+		name: 'Catalan (Spain)',
+		symbol: 'ca-es',
+	},
+	{
+		id: 'cs-CZ',
+		label: 'cs-CZ',
+		name: 'Czech (Czech Republic)',
+		symbol: 'cs-cz',
+	},
+	{
+		id: 'da-DK',
+		label: 'da-DK',
+		name: 'Danish (Denmark)',
+		symbol: 'da-dk',
+	},
+	{
+		id: 'de-AT',
+		label: 'de-AT',
+		name: 'Geman (Austria)',
+		symbol: 'de-at',
+	},
+	{
+		id: 'de-CH',
+		label: 'de-CH',
+		name: 'German (Switzerland)',
+		symbol: 'de-ch',
+	},
+	{
+		id: 'de-DE',
+		label: 'de-DE',
+		name: 'German (Germany)',
+		symbol: 'de-de',
+	},
+	{
+		id: 'el-GR',
+		label: 'el-GR',
+		name: 'Greek (Greece)',
+		symbol: 'el-gr',
+	},
+	{
+		id: 'en-AU',
+		label: 'en-AU',
+		name: 'English (Australia)',
+		symbol: 'en-au',
+	},
+	{
+		id: 'nl_NL',
+		label: 'nl-NL',
+		name: 'Dutch (Netherlands)',
+		symbol: 'nl-nl',
+	},
+];
+
 export const LanguagePickerWithTranslations = (args: any) => {
 	const [selectedLocaleId, setSelectedLocaleId] = useState<any>(
-		locales[0]!.id
+		localesLong[0]!.id
 	);
 	const translations = {
 		'ca-ES': {total: 4, translated: 2},
@@ -74,7 +143,7 @@ export const LanguagePickerWithTranslations = (args: any) => {
 		<LanguagePicker
 			hideTriggerText={args.hideTriggerText}
 			id="languagePicker"
-			locales={locales}
+			locales={localesLong}
 			onSelectedLocaleChange={setSelectedLocaleId}
 			selectedLocaleId={selectedLocaleId}
 			small={args.small}

diff --git a/packages/clay-css/src/scss/cadmin/variables/_dropdowns.scss b/packages/clay-css/src/scss/cadmin/variables/_dropdowns.scss
@@ -890,6 +890,9 @@ $cadmin-dropdown-menu-palette: map-deep-merge(
 					right: 8px,
 				),
 			),
+			inline-scroller: (
+				max-height: 224px,
+			),
 		),
 		'.dropdown-menu-select.dropdown-menu-height-lg': (
 			inline-scroller: (

diff --git a/packages/clay-css/src/scss/variables/_dropdowns.scss b/packages/clay-css/src/scss/variables/_dropdowns.scss
@@ -1041,6 +1041,9 @@ $dropdown-menu-palette: map-deep-merge(
 					right: 0.5rem,
 				),
 			),
+			inline-scroller: (
+				max-height: 224px,
+			),
 		),
 		'.dropdown-menu-select.dropdown-menu-height-lg': (
 			inline-scroller: (