fix(fields): prefix styled custom props with $ (#127)

MTES-MCT · Dec 14, 2022 · 05d03ba · 05d03ba
1 parent 644cc2b
commit 05d03ba
Show file tree

Hide file tree

Showing 9 changed files with 39 additions and 32 deletions.
diff --git a/src/components/Dropdown/Item.tsx b/src/components/Dropdown/Item.tsx
@@ -13,19 +13,19 @@ export function Item({ Icon, ...originalProps }: DropdownItemProps) {
   const icon = useMemo(() => (Icon ? <Icon size={1.25} /> : undefined), [Icon])
   const hasIcon = useMemo(() => Boolean(Icon), [Icon])
 
-  return <StyledDropdownItem hasIcon={hasIcon} icon={icon} {...originalProps} />
+  return <StyledDropdownItem $hasIcon={hasIcon} icon={icon} {...originalProps} />
 }
 
 // TODO We need to split that into multiple styled components as done in `<Button />`.
 const StyledDropdownItem = styled(RsuiteDropdown.Item)<{
-  hasIcon: boolean
+  $hasIcon: boolean
 }>`
   align-items: center;
   display: flex;
   font-size: 13px;
   line-height: 1;
   padding: 0.75rem;
-  padding: ${p => (p.hasIcon ? '9px' : '12.5px')} 12px;
+  padding: ${p => (p.$hasIcon ? '9px' : '12.5px')} 12px;
 
   &:not(:last-child) {
     border-bottom: 1px solid var(--lightGray);

diff --git a/src/components/Dropdown/index.tsx b/src/components/Dropdown/index.tsx
@@ -16,12 +16,12 @@ function RawDropdown({ Icon, ...originalProps }: DropdownProps) {
   const icon = useMemo(() => (Icon ? <Icon size={1.25} /> : undefined), [Icon])
   const hasIcon = useMemo(() => Boolean(Icon), [Icon])
 
-  return <StyledDropdown hasIcon={hasIcon} icon={icon} {...originalProps} />
+  return <StyledDropdown $hasIcon={hasIcon} icon={icon} {...originalProps} />
 }
 
 // TODO We need to split into multiple styled components as done in `<Button />`.
 const StyledDropdown = styled(RsuiteDropdown)<{
-  hasIcon: boolean
+  $hasIcon: boolean
 }>`
   .rs-btn {
     align-items: center;
@@ -30,7 +30,7 @@ const StyledDropdown = styled(RsuiteDropdown)<{
     color: ${p => p.theme.color.gainsboro};
     display: flex;
     font-size: 13px;
-    padding: ${p => (p.hasIcon ? '5px' : '6px')} 12px;
+    padding: ${p => (p.$hasIcon ? '5px' : '6px')} 12px;
 
     :hover {
       background-color: ${p => p.theme.color.blueYonder['100']};

diff --git a/src/fields/DatePicker/CalendarPicker.tsx b/src/fields/DatePicker/CalendarPicker.tsx
@@ -78,6 +78,7 @@ const GlobalStyleToHideBodyDialog: any = createGlobalStyle`
 const Box = styled.div`
   height: 0;
   position: relative;
+  top: 0;
   user-select: none;
 
   .rs-picker-toggle {

diff --git a/src/fields/MultiCheckbox.tsx b/src/fields/MultiCheckbox.tsx
@@ -52,7 +52,7 @@ export function MultiCheckbox({
     <Fieldset key={key}>
       <Legend isHidden={isLabelHidden}>{label}</Legend>
 
-      <ChecboxesBox isInline={isInline}>
+      <ChecboxesBox $isInline={isInline}>
         {options.map((option, index) => (
           <Checkbox
             // eslint-disable-next-line react/no-array-index-key
@@ -69,22 +69,22 @@ export function MultiCheckbox({
 }
 
 const ChecboxesBox = styled.div<{
-  isInline: boolean
+  $isInline: boolean
 }>`
   color: ${p => p.theme.color.gunMetal};
   display: flex;
-  flex-direction: ${p => (p.isInline ? 'row' : 'column')};
+  flex-direction: ${p => (p.$isInline ? 'row' : 'column')};
 
   ${p =>
-    !p.isInline &&
+    !p.$isInline &&
     css`
       > .rs-checkbox:not(:first-child) {
         margin-top: 0.5rem;
       }
     `}
 
   ${p =>
-    p.isInline &&
+    p.$isInline &&
     css`
       > .rs-checkbox:not(:first-child) {
         margin-left: 0.75rem;

diff --git a/src/fields/MultiRadio.tsx b/src/fields/MultiRadio.tsx
@@ -55,7 +55,7 @@ export function MultiRadio({
     <Fieldset key={key}>
       <Legend isHidden={isLabelHidden}>{label}</Legend>
 
-      <ChecboxesBox isInline={isInline}>
+      <ChecboxesBox $isInline={isInline}>
         {options.map((option, index) => (
           <Radio
             // eslint-disable-next-line react/no-array-index-key
@@ -73,11 +73,11 @@ export function MultiRadio({
 }
 
 const ChecboxesBox = styled.div<{
-  isInline: boolean
+  $isInline: boolean
 }>`
   color: ${p => p.theme.color.gunMetal};
   display: flex;
-  flex-direction: ${p => (p.isInline ? 'row' : 'column')};
+  flex-direction: ${p => (p.$isInline ? 'row' : 'column')};
   font-weight: 500;
 
   > .rs-radio {
@@ -93,15 +93,15 @@ const ChecboxesBox = styled.div<{
   }
 
   ${p =>
-    !p.isInline &&
+    !p.$isInline &&
     css`
       > .rs-radio:not(:first-child) {
         margin-top: 6px;
       }
     `}
 
   ${p =>
-    p.isInline &&
+    p.$isInline &&
     css`
       > .rs-radio:not(:first-child) {
         margin-left: 0.75rem;

diff --git a/src/fields/MultiSelect.tsx b/src/fields/MultiSelect.tsx
@@ -57,10 +57,10 @@ export function MultiSelect({
 
       <StyledTagPicker
         key={key}
+        $fixedWidth={fixedWidth}
+        $isLight={isLight}
         data={options}
-        fixedWidth={fixedWidth}
         id={originalProps.name}
-        isLight={isLight}
         onChange={handleChange}
         searchable={searchable}
         {...originalProps}
@@ -72,15 +72,15 @@ export function MultiSelect({
 // TODO A width seems to be mandatory in rsuite which is a very dirty behavior.
 // We should hack that.
 const StyledTagPicker = styled(TagPicker)<{
-  fixedWidth: number
-  isLight: boolean
+  $fixedWidth: number
+  $isLight: boolean
 }>`
   border: 0;
   cursor: pointer;
-  width: ${p => p.fixedWidth}rem;
+  width: ${p => p.$fixedWidth}rem;
 
   > .rs-picker-toggle {
-    background-color: ${p => (p.isLight ? p.theme.color.white : p.theme.color.gainsboro)} !important;
+    background-color: ${p => (p.$isLight ? p.theme.color.white : p.theme.color.gainsboro)} !important;
     cursor: inherit;
   }
 `
diff --git a/src/fields/Select.tsx b/src/fields/Select.tsx
@@ -54,9 +54,9 @@ export function Select({
 
       <StyledSelectPicker
         key={key}
+        $isLight={isLight}
         data={options}
         id={originalProps.name}
-        isLight={isLight}
         // The `unknown` type from Rsuite library is wrong. It should be inferred from `data` prop type.
         // `onChange: ((value: unknown, event: React.SyntheticEvent<Element, Event>) => void) | undefined`
         onChange={handleChange as any}
@@ -68,10 +68,10 @@ export function Select({
 }
 
 const StyledSelectPicker = styled(SelectPicker)<{
-  isLight: boolean
+  $isLight: boolean
 }>`
   > .rs-picker-toggle {
-    background-color: ${p => (p.isLight ? p.theme.color.white : p.theme.color.gainsboro)} !important;
+    background-color: ${p => (p.$isLight ? p.theme.color.white : p.theme.color.gainsboro)} !important;
     border: 0;
   }
 `
diff --git a/src/fields/TextInput.tsx b/src/fields/TextInput.tsx
@@ -16,7 +16,13 @@ export type TextInputProps = Omit<InputProps, 'as' | 'defaultValue' | 'id' | 'on
   name: string
   onChange?: (nextValue: string | undefined) => Promisable<void>
 }
-export function TextInput({ isLabelHidden = false, label, onChange, ...originalProps }: TextInputProps) {
+export function TextInput({
+  isLabelHidden = false,
+  isLight = false,
+  label,
+  onChange,
+  ...originalProps
+}: TextInputProps) {
   const key = useMemo(
     () => `${originalProps.name}-${JSON.stringify(originalProps.defaultValue)}`,
     [originalProps.defaultValue, originalProps.name]
@@ -41,15 +47,15 @@ export function TextInput({ isLabelHidden = false, label, onChange, ...originalP
         {label}
       </Label>
 
-      <StyledInput key={key} id={originalProps.name} onChange={handleChange} {...originalProps} />
+      <StyledInput key={key} $isLight={isLight} id={originalProps.name} onChange={handleChange} {...originalProps} />
     </Field>
   )
 }
 
 const StyledInput = styled(Input)<{
-  isLight: boolean
+  $isLight: boolean
 }>`
-  background-color: ${p => (p.isLight ? p.theme.color.white : p.theme.color.gainsboro)};
+  background-color: ${p => (p.$isLight ? p.theme.color.white : p.theme.color.gainsboro)};
   border: 0;
   font-size: 13px;
   width: 100%;

diff --git a/src/fields/Textarea.tsx b/src/fields/Textarea.tsx
@@ -54,9 +54,9 @@ export function Textarea({
       <StyledInput
         key={key}
         ref={inputRef}
+        $isLight={isLight}
         as="textarea"
         id={originalProps.name}
-        isLight={isLight}
         onChange={handleChange}
         rows={rows}
         {...originalProps}
@@ -66,9 +66,9 @@ export function Textarea({
 }
 
 const StyledInput = styled(Input)<{
-  isLight: boolean
+  $isLight: boolean
 }>`
-  background-color: ${p => (p.isLight ? p.theme.color.white : p.theme.color.gainsboro)};
+  background-color: ${p => (p.$isLight ? p.theme.color.white : p.theme.color.gainsboro)};
   border: 0;
   font-size: 13px;
   padding: 7px 11px;