feat(@clayui/language-picker): LPD-45714 Does not use ClayButton to avoid the btn class and update the styles

Author: veroglez

packages/clay-language-picker/package.json

@@ -24,7 +24,6 @@
 		"react"
 	],
 	"dependencies": {
-		"@clayui/button": "^3.116.0",
 		"@clayui/core": "^3.124.0",
 		"@clayui/icon": "^3.111.0",
 		"@clayui/label": "^3.111.0",

packages/clay-language-picker/src/__tests__/__snapshots__/index.tsx.snap

@@ -7,7 +7,7 @@ exports[`ClayLanguagePicker renders 1`] = `
     aria-expanded="false"
     aria-haspopup="listbox"
     aria-label="Select a language, current language: English (United States)."
-    class="form-control-select btn btn-secondary"
+    class="form-control form-control-select form-control-select-secondary"
     role="combobox"
     tabindex="0"
     type="button"
@@ -24,11 +24,7 @@ exports[`ClayLanguagePicker renders 1`] = `
         />
       </svg>
     </span>
-    <span
-      class="font-weight-normal mr-2"
-    >
-      en-US
-    </span>
+    en-US
   </button>
 </div>
 `;
@@ -40,7 +36,7 @@ exports[`ClayLanguagePicker renders a class name for the trigger 1`] = `
     aria-expanded="false"
     aria-haspopup="listbox"
     aria-label="Select a language, current language: English (United States)."
-    class="trigger-class form-control-select btn btn-secondary"
+    class="trigger-class form-control form-control-select form-control-select-secondary"
     role="combobox"
     tabindex="0"
     type="button"
@@ -57,11 +53,7 @@ exports[`ClayLanguagePicker renders a class name for the trigger 1`] = `
         />
       </svg>
     </span>
-    <span
-      class="font-weight-normal mr-2"
-    >
-      en-US
-    </span>
+    en-US
   </button>
 </div>
 `;
@@ -73,7 +65,7 @@ exports[`ClayLanguagePicker renders a small picker 1`] = `
     aria-expanded="false"
     aria-haspopup="listbox"
     aria-label="Select a language, current language: English (United States)."
-    class="form-control-select btn btn-sm btn-secondary"
+    class="form-control form-control-select form-control-select-secondary form-control-sm"
     role="combobox"
     tabindex="0"
     type="button"
@@ -90,11 +82,7 @@ exports[`ClayLanguagePicker renders a small picker 1`] = `
         />
       </svg>
     </span>
-    <span
-      class="font-weight-normal mr-2"
-    >
-      en-US
-    </span>
+    en-US
   </button>
 </div>
 `;
@@ -106,7 +94,7 @@ exports[`ClayLanguagePicker renders hidding the trigger text 1`] = `
     aria-expanded="false"
     aria-haspopup="listbox"
     aria-label="Select a language, current language: English (United States)."
-    class="form-control-select hidden-label btn btn-secondary"
+    class="form-control form-control-select form-control-select-secondary hidden-label"
     role="combobox"
     tabindex="0"
     type="button"
@@ -134,7 +122,7 @@ exports[`ClayLanguagePicker renders the picker with id 1`] = `
     aria-expanded="false"
     aria-haspopup="listbox"
     aria-label="Select a language, current language: English (United States)."
-    class="form-control-select btn btn-secondary"
+    class="form-control form-control-select form-control-select-secondary"
     id="pickerId"
     role="combobox"
     tabindex="0"
@@ -152,11 +140,7 @@ exports[`ClayLanguagePicker renders the picker with id 1`] = `
         />
       </svg>
     </span>
-    <span
-      class="font-weight-normal mr-2"
-    >
-      en-US
-    </span>
+    en-US
   </button>
 </div>
 `;
@@ -168,7 +152,7 @@ exports[`ClayLanguagePicker renders with custom labels 1`] = `
     aria-expanded="false"
     aria-haspopup="listbox"
     aria-label="Trigger Label"
-    class="form-control-select btn btn-secondary"
+    class="form-control form-control-select form-control-select-secondary"
     role="combobox"
     tabindex="0"
     type="button"
@@ -185,11 +169,7 @@ exports[`ClayLanguagePicker renders with custom labels 1`] = `
         />
       </svg>
     </span>
-    <span
-      class="font-weight-normal mr-2"
-    >
-      en-US
-    </span>
+    en-US
   </button>
 </div>
 `;
@@ -201,7 +181,7 @@ exports[`ClayLanguagePicker renders with translations 1`] = `
     aria-expanded="false"
     aria-haspopup="listbox"
     aria-label="Select a language, current language: English (United States)."
-    class="form-control-select btn btn-secondary"
+    class="form-control form-control-select form-control-select-secondary"
     role="combobox"
     tabindex="0"
     type="button"
@@ -218,11 +198,7 @@ exports[`ClayLanguagePicker renders with translations 1`] = `
         />
       </svg>
     </span>
-    <span
-      class="font-weight-normal mr-2"
-    >
-      en-US
-    </span>
+    en-US
   </button>
 </div>
 `;

packages/clay-language-picker/src/index.tsx

@@ -3,7 +3,6 @@
  * SPDX-License-Identifier: BSD-3-Clause
  */
 
-import ClayButton from '@clayui/button';
 import {Option, Picker} from '@clayui/core';
 import ClayIcon from '@clayui/icon';
 import ClayLabel from '@clayui/label';
@@ -167,19 +166,18 @@ const Trigger = React.forwardRef<HTMLButtonElement>(
 		ref
 	) => {
 		return (
-			<ClayButton
+			<button
 				{...otherProps}
 				aria-label={ariaLabelTrigger}
 				className={classNames(
 					classNamesTrigger,
-					'form-control-select',
+					'form-control form-control-select form-control-select-secondary',
 					{
+						'form-control-sm': small,
 						'hidden-label': hideTriggerText,
 					}
 				)}
-				displayType="secondary"
 				ref={ref}
-				size={small ? 'sm' : undefined}
 			>
 				<span className="inline-item-before">
 					<ClayIcon
@@ -188,12 +186,8 @@ const Trigger = React.forwardRef<HTMLButtonElement>(
 					/>
 				</span>
 
-				{!hideTriggerText ? (
-					<span className="font-weight-normal mr-2">
-						{selectedLocale.label}
-					</span>
-				) : null}
-			</ClayButton>
+				{!hideTriggerText ? selectedLocale.label : null}
+			</button>
 		);
 	}
 );