diff --git a/packages/components/src/custom-select-control-v2/legacy-component/index.tsx b/packages/components/src/custom-select-control-v2/legacy-component/index.tsx
index 672ebe5b1f7742..d12d1d1e7e87ac 100644
--- a/packages/components/src/custom-select-control-v2/legacy-component/index.tsx
+++ b/packages/components/src/custom-select-control-v2/legacy-component/index.tsx
@@ -66,7 +66,10 @@ function CustomSelectControl( props: LegacyCustomSelectProps ) {
const withHint = (
{ name }
-
+
{ __experimentalHint }
@@ -79,12 +82,13 @@ function CustomSelectControl( props: LegacyCustomSelectProps ) {
children={ __experimentalHint ? withHint : name }
style={ style }
className={ clsx(
- // Legacy classnames
- 'components-custom-select-control__item',
- className,
- {
- 'has-hint': !! __experimentalHint,
- }
+ // TODO: Legacy classname. Add V1 styles are removed from the codebase
+ // 'components-custom-select-control__item',
+ className
+ // TODO: Legacy classname. Add V1 styles are removed from the codebase
+ // {
+ // 'has-hint': __experimentalHint,
+ // }
) }
/>
);
@@ -101,7 +105,10 @@ function CustomSelectControl( props: LegacyCustomSelectProps ) {
return (
{ currentValue }
-
+
{ currentHint?.__experimentalHint }
@@ -132,7 +139,8 @@ function CustomSelectControl( props: LegacyCustomSelectProps ) {
size={ translatedSize }
store={ store }
className={ clsx(
- 'components-custom-select-control',
+ // TODO: Legacy classname. Add V1 styles are removed from the codebase
+ // 'components-custom-select-control',
classNameProp
) }
isLegacy
diff --git a/packages/components/src/custom-select-control-v2/styles.ts b/packages/components/src/custom-select-control-v2/styles.ts
index 27e6031b4260ba..7da4fa3a922a09 100644
--- a/packages/components/src/custom-select-control-v2/styles.ts
+++ b/packages/components/src/custom-select-control-v2/styles.ts
@@ -102,27 +102,23 @@ export const SelectPopover = styled( Ariakit.SelectPopover )`
`;
export const SelectItem = styled( Ariakit.SelectItem )`
- // Necessary to override V1 styles passed via the legacy
- // '.components-custom-select-control__item' class
- && {
- cursor: default;
- display: flex;
- align-items: center;
- justify-content: space-between;
- padding: ${ ITEM_PADDING };
- font-size: ${ CONFIG.fontSize };
- // TODO: reassess line-height for non-legacy v2
- line-height: 28px;
- scroll-margin: ${ space( 1 ) };
- user-select: none;
-
- &[aria-disabled='true'] {
- cursor: not-allowed;
- }
+ cursor: default;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: ${ ITEM_PADDING };
+ font-size: ${ CONFIG.fontSize };
+ // TODO: reassess line-height for non-legacy v2
+ line-height: 28px;
+ scroll-margin: ${ space( 1 ) };
+ user-select: none;
+
+ &[aria-disabled='true'] {
+ cursor: not-allowed;
+ }
- &[data-active-item] {
- background-color: ${ COLORS.theme.gray[ 300 ] };
- }
+ &[data-active-item] {
+ background-color: ${ COLORS.theme.gray[ 300 ] };
}
`;