fix(experimental): small calendar fixes (#480)

* fix(experimental): remove color from experimental icons * fix(experimental): update focus styles --------- Co-authored-by: Lena Rashkovan <lena.rashkovan@free-now.com>
freenowtech · Sep 30, 2024 · 8d03f35 · 8d03f35
1 parent ad31f06
commit 8d03f35
Show file tree

Hide file tree

Showing 5 changed files with 9 additions and 7 deletions.
diff --git a/assets/icons/experimental/calendar-today-outline.svg b/assets/icons/experimental/calendar-today-outline.svg
diff --git a/src/components/experimental/Calendar/Calendar.tsx b/src/components/experimental/Calendar/Calendar.tsx
@@ -37,7 +37,8 @@ const Button = styled(BaseButton)`
     outline: 0;
 
     &[data-focused] {
-        color: ${getSemanticValue('accent')};
+        outline: ${getSemanticValue('interactive')} solid 0.125rem;
+        border-radius: ${get('radii.2')};
     }
 
     &[data-disabled] {
@@ -81,7 +82,7 @@ const Day = styled(CalendarCell)`
     transition: background ease 200ms;
 
     &[data-focused] {
-        outline: ${getSemanticValue('accent')} solid 0.125rem;
+        outline: ${getSemanticValue('interactive')} solid 0.125rem;
     }
 
     &[data-hovered] {
@@ -90,7 +91,6 @@ const Day = styled(CalendarCell)`
     }
 
     &[data-selected] {
-        outline: 0;
         background: ${getSemanticValue('interactive-container')};
         color: ${getSemanticValue('on-interactive-container')};
     }

diff --git a/src/components/experimental/DatePicker/DatePicker.tsx b/src/components/experimental/DatePicker/DatePicker.tsx
@@ -48,10 +48,10 @@ function DatePicker({ label, onChange, description, errorMessage, ...props }: Da
                     description={description}
                     errorMessage={errorMessage}
                     isVisuallyFocused={isOpen}
-                    leadingIcon={<CalendarTodayOutlineIcon size={24} />}
+                    leadingIcon={<CalendarTodayOutlineIcon />}
                     actionIcon={
                         <Button ref={triggerRef} onPress={toggleOpen}>
-                            {isOpen ? <DropupSelectIcon size={24} /> : <DropdownSelectIcon size={24} />}
+                            {isOpen ? <DropupSelectIcon /> : <DropdownSelectIcon />}
                         </Button>
                     }
                 />

diff --git a/src/components/experimental/Field/Button.ts b/src/components/experimental/Field/Button.ts
@@ -1,6 +1,7 @@
 import styled from 'styled-components';
 import { Button as BaseButton } from 'react-aria-components';
 import { getSemanticValue } from '../../../essentials/experimental/cssVariables';
+import { get } from '../../../utils/experimental/themeGet';
 
 export const Button = styled(BaseButton)`
     appearance: none;
@@ -14,5 +15,6 @@ export const Button = styled(BaseButton)`
 
     &[data-focused] {
         outline: ${getSemanticValue('interactive')} solid 0.125rem;
+        border-radius: ${get('radii.2')};
     }
 `;
diff --git a/src/icons/experimental/CalendarTodayOutlineIcon.tsx b/src/icons/experimental/CalendarTodayOutlineIcon.tsx
@@ -19,7 +19,7 @@ const CalendarTodayOutlineIcon: React.FC<Props> = ({ size = 'medium', color = 'i
         >
             <path
                 d="M19 3h-1V1h-2v2H8V1H6v2H5a2 2 0 00-2 2v14a2 2 0 002 2h14c1.11 0 2-.89 2-2V5c0-1.11-.89-2-2-2zm0 16H5V9h14v10zm0-12H5V5h14M7 11h5v5H7"
-                fill="#675B5B"
+                fill="currentColor"
             />
         </svg>
     );