fix(Select): Fix the placeholder's color (#1489)

Co-authored-by: Nikita Orliak <[email protected]>
cengage · Oct 15, 2024 · 270e1f4 · 270e1f4 · github-actions · Oct 15, 2024
1 parent d13817b
commit 270e1f4
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 11 deletions.
diff --git a/.changeset/fix-select-placeholder-color.md b/.changeset/fix-select-placeholder-color.md
@@ -0,0 +1,5 @@
+---
+'react-magma-dom': patch
+---
+
+fix(Select): Fix placeholder color.
diff --git a/packages/react-magma-dom/src/components/Select/MultiSelect.tsx b/packages/react-magma-dom/src/components/Select/MultiSelect.tsx
@@ -256,10 +256,17 @@ export function MultiSelect<T>(props: MultiSelectProps<T>) {
               </SelectedItemButton>
             );
           })
-        ) : typeof placeholder === 'string' ? (
-          <SelectText>{placeholder}</SelectText>
         ) : (
-          <SelectText>{i18n.multiSelect.placeholder}</SelectText>
+          <SelectText
+            isShowPlaceholder={true}
+            isInverse={isInverse}
+            isDisabled={disabled}
+            theme={theme}
+          >
+            {typeof placeholder === 'string'
+              ? placeholder
+              : i18n.multiSelect.placeholder}
+          </SelectText>
         )}
       </SelectTriggerButton>
 
@@ -277,7 +284,7 @@ export function MultiSelect<T>(props: MultiSelectProps<T>) {
             position: 'absolute',
             right: '3.25em',
             top: '50%',
-            transform: 'translateY(-50%)'
+            transform: 'translateY(-50%)',
           }}
         />
       )}

diff --git a/packages/react-magma-dom/src/components/Select/Select.tsx b/packages/react-magma-dom/src/components/Select/Select.tsx
@@ -186,7 +186,16 @@ export function Select<T>(props: SelectProps<T>) {
         style={inputStyle}
         toggleButtonProps={toggleButtonProps}
       >
-        <SelectText data-testid="selectedItemText" isClearable={isClearable}>{selectText}</SelectText>
+        <SelectText
+          data-testid="selectedItemText"
+          isClearable={isClearable}
+          isShowPlaceholder={!selectedItem}
+          isInverse={isInverse}
+          isDisabled={disabled}
+          theme={theme}
+        >
+          {selectText}
+        </SelectText>
       </SelectTriggerButton>
 
       {isClearable && selectedItem && (
@@ -196,11 +205,11 @@ export function Select<T>(props: SelectProps<T>) {
           onClick={defaultHandleClearIndicatorClick}
           isInverse={isInverse}
           size={ButtonSize.small}
-          style={{ 
-            position: 'absolute', 
-            right: '3.25em', 
+          style={{
+            position: 'absolute',
+            right: '3.25em',
             top: '50%',
-            transform: 'translateY(-50%)'
+            transform: 'translateY(-50%)',
           }}
           testId="clearIndicator"
           variant={ButtonVariant.link}

diff --git a/packages/react-magma-dom/src/components/Select/shared.ts b/packages/react-magma-dom/src/components/Select/shared.ts
@@ -2,6 +2,8 @@ import { inputBaseStyles } from '../InputBase';
 import { Card } from '../Card';
 import { transparentize } from 'polished';
 import styled from '@emotion/styled';
+import { ThemeInterface } from '../../theme/magma';
+import { css } from '@emotion/react';
 
 function buildListHoverColor(props) {
   if (props.isFocused) {
@@ -34,12 +36,28 @@ export const StyledButton = styled.div`
   text-align: left;
 `;
 
-export const SelectText = styled.span<{ isClearable?: boolean }>`
+export const SelectText = styled.span<{
+  isClearable?: boolean;
+  isShowPlaceholder?: boolean;
+  isInverse?: boolean;
+  isDisabled?: boolean;
+  theme?: ThemeInterface;
+}>`
   padding-left: 4px;
-  padding-right: ${props => props.isClearable ? '2.5em' : '1.5em'};
+  padding-right: ${props => (props.isClearable ? '2.5em' : '1.5em')};
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
+  color: ${props => {
+    if (props.isShowPlaceholder) {
+      return props.isInverse
+        ? transparentize(0.3, props.theme.colors.neutral100)
+        : props.theme.colors.neutral500;
+    }
+  }};
+  ${props => props.isDisabled && props.isShowPlaceholder && css`
+    opacity: ${props.isInverse ? 0.4 : 0.6}
+  `}
 `;
 
 export const StyledCard = styled(Card)<{