feat(datepicker): add today indicator

ovh · Jul 29, 2024 · 90b7bea · 90b7bea
1 parent 877cad2
commit 90b7bea
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 1 deletion.
diff --git a/packages/ods/src/components/datepicker/src/components/ods-datepicker/ods-datepicker.scss b/packages/ods/src/components/datepicker/src/components/ods-datepicker/ods-datepicker.scss
@@ -2,7 +2,7 @@
 @use '../../../../../style/input';
 @import '~vanillajs-datepicker/dist/css/datepicker.min.css';
 
-$ods-datepicker-item-size: 32px;
+$ods-datepicker-item-size: 36px;
 $ods-datepicker-padding: 6px;
 $ods-datepicker-clearable-button-size: input.$ods-input-actions-button-width;
 
@@ -202,6 +202,24 @@ $ods-datepicker-clearable-button-size: input.$ods-input-actions-button-width;
                   opacity: .5;
                 }
               }
+
+              &.today {
+                position: relative;
+
+                &::after {
+                  position: absolute;
+                  bottom: 3px;
+                  border-radius: 50%;
+                  background-color: var(--ods-color-primary-500);
+                  width: 4px;
+                  height: 4px;
+                  content: '';
+                }
+
+                &:not(.selected) {
+                  background-color: inherit;
+                }
+              }
             }
           }
         }

diff --git a/packages/ods/src/components/datepicker/src/components/ods-datepicker/ods-datepicker.tsx b/packages/ods/src/components/datepicker/src/components/ods-datepicker/ods-datepicker.tsx
@@ -163,6 +163,7 @@ export class OdsDatepicker {
         prevArrow: `<ods-icon name="${ODS_ICON_NAME.chevronLeft}"></ods-icon>`,
         showOnClick: true,
         showOnFocus: true,
+        todayHighlight: true,
         updateOnBlur: true,
       });
       // Apply initial DOM changes on the picker