fix(fields): prefix styled components props in DateRangePicker

MTES-MCT · Sep 12, 2024 · 3572267 · 3572267
1 parent ef4284a
commit 3572267
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 15 deletions.
diff --git a/src/components/Banner/index.tsx b/src/components/Banner/index.tsx
@@ -178,7 +178,9 @@ const ContentWrapper = styled.div<ContentWrapperProps>`
 const ButtonWrapper = styled.div`
   align-self: center;
 `
-const HideText = styled.span<{ $level: Level }>`
+const HideText = styled.span<{
+  $level: Level
+}>`
   ${p =>
     p.$level === Level.ERROR
       ? css`

diff --git a/src/components/Dialog/Body.tsx b/src/components/Dialog/Body.tsx
@@ -1,6 +1,8 @@
 import styled from 'styled-components'
 
-export const Body = styled.div<{ $color?: string }>`
+export const Body = styled.div<{
+  $color?: string
+}>`
   background-color: ${p => p.theme.color.white};
   border-top-left-radius: 2px;
   border-top-right-radius: 2px;

diff --git a/src/fields/DateRangePicker/RangedTimePicker.tsx b/src/fields/DateRangePicker/RangedTimePicker.tsx
@@ -96,9 +96,9 @@ export function RangedTimePicker({ filter, minutesRange, onChange }: RangedTimeP
       {filteredRangedTimeOptions.map(({ label, value }, index) => (
         <Option
           key={label}
+          $isSelected={index === selectedOptionIndex}
           aria-selected={false}
           className="js-ranged-time-picker-option"
-          isSelected={index === selectedOptionIndex}
           onClick={() => onChange(value)}
           role="option"
           tabIndex={-1}
@@ -142,16 +142,16 @@ const Box = styled.div`
 `
 
 const Option = styled.div<{
-  isSelected: boolean
+  $isSelected: boolean
 }>`
-  background-color: ${p => (p.isSelected ? p.theme.color.blueGray : 'transparent')};
-  color: ${p => (p.isSelected ? p.theme.color.white : p.theme.color.gunMetal)};
+  background-color: ${p => (p.$isSelected ? p.theme.color.blueGray : 'transparent')};
+  color: ${p => (p.$isSelected ? p.theme.color.white : p.theme.color.gunMetal)};
   cursor: pointer;
   line-height: 1;
   padding: 8.5px 0 10.5px 8px;
 
   &:hover {
-    background-color: ${p => (p.isSelected ? p.theme.color.blueGray : p.theme.color.blueYonder25)};
+    background-color: ${p => (p.$isSelected ? p.theme.color.blueGray : p.theme.color.blueYonder25)};
   }
 
   > span {

diff --git a/src/fields/DateRangePicker/index.tsx b/src/fields/DateRangePicker/index.tsx
@@ -493,7 +493,7 @@ export function DateRangePicker({
         </Field>
 
         {withTime && (
-          <Field isTimeField>
+          <Field $isTimeField>
             <TimeInput
               ref={startTimeInputRef}
               baseContainer={baseContainer ?? undefined}
@@ -516,7 +516,7 @@ export function DateRangePicker({
           </Field>
         )}
 
-        <Field isEndDateField>
+        <Field $isEndDateField>
           <DateInput
             ref={endDateInputRef}
             baseContainer={baseContainer ?? undefined}
@@ -542,7 +542,7 @@ export function DateRangePicker({
         </Field>
 
         {withTime && (
-          <Field isTimeField>
+          <Field $isTimeField>
             <TimeInput
               ref={endTimeInputRef}
               baseContainer={baseContainer ?? undefined}
@@ -604,15 +604,15 @@ const Box = styled.div<CommonFieldStyleProps>`
 `
 
 const Field = styled.span<{
-  isEndDateField?: boolean
-  isTimeField?: boolean
+  $isEndDateField?: boolean
+  $isTimeField?: boolean
 }>`
   font-size: inherit;
   margin-left: ${p => {
-    if (p.isEndDateField) {
+    if (p.$isEndDateField) {
       return '10px'
     }
 
-    return p.isTimeField ? '2px' : 0
+    return p.$isTimeField ? '2px' : 0
   }} !important;
 `
diff --git a/src/fields/TextInput.tsx b/src/fields/TextInput.tsx
@@ -148,7 +148,9 @@ const IconsContainer = styled.div<{
   top: ${p => (p.$size === Size.LARGE ? '9px' : '5px')};
 `
 
-const RestyledStyledInputBox = styled(StyledInputBox)<{ $isSearchInput: boolean }>`
+const RestyledStyledInputBox = styled(StyledInputBox)<{
+  $isSearchInput: boolean
+}>`
   > input,
   > .rs-auto-complete > input {
     padding-right: ${p => p.$isSearchInput && '64px'};