From 7d63e83f7781e5de213294418b74ea763d936b59 Mon Sep 17 00:00:00 2001
From: Arlindo Pereira <arlindosaraivapereira@gmail.com>
Date: Fri, 13 Dec 2024 16:11:24 +0100
Subject: [PATCH] Code Review: refactor CSS classes to kebab-case

---
 .../forms/controls/DatePicker/DatePicker.module.scss      | 8 ++++----
 src/components/forms/controls/DatePicker/DatePicker.tsx   | 6 +++---
 .../forms/controls/DatePicker/DatePickerRange.tsx         | 2 +-
 .../controls/DateTimePicker/DateTimePicker.module.scss    | 6 +++---
 .../forms/controls/DateTimePicker/DateTimePicker.tsx      | 8 ++++----
 .../forms/controls/TimePicker/TimePicker.module.scss      | 8 ++++----
 src/components/forms/controls/TimePicker/TimePicker.tsx   | 6 +++---
 7 files changed, 22 insertions(+), 22 deletions(-)

diff --git a/src/components/forms/controls/DatePicker/DatePicker.module.scss b/src/components/forms/controls/DatePicker/DatePicker.module.scss
index 7cedf3a..e59c74f 100644
--- a/src/components/forms/controls/DatePicker/DatePicker.module.scss
+++ b/src/components/forms/controls/DatePicker/DatePicker.module.scss
@@ -184,20 +184,20 @@ $navigation-distance: 1rem;
 @layer baklava.components {
   $caret-width: 18px;
 
-  .bk-datepicker {
-    @include bk.component-base(bk-datepicker);
+  .bk-date-picker {
+    @include bk.component-base(bk-date-picker);
     display: flex;
     flex-direction: row;
     align-items: center;
     margin-right: -$caret-width;
   }
 
-  .bk-datepicker--input {
+  .bk-date-picker--input {
     width: 121px;
     color: bk.$theme-form-text-default;
   }
 
-  .bk-datepicker--caret {
+  .bk-date-picker--caret {
     width: $caret-width;
     height: $caret-width;
     position: relative;
diff --git a/src/components/forms/controls/DatePicker/DatePicker.tsx b/src/components/forms/controls/DatePicker/DatePicker.tsx
index 4839e12..90602ff 100644
--- a/src/components/forms/controls/DatePicker/DatePicker.tsx
+++ b/src/components/forms/controls/DatePicker/DatePicker.tsx
@@ -44,7 +44,7 @@ export const DatePicker = (props: DatePickerProps) => {
   return (
     <div className={cx(
       'bk',
-      { [cl['bk-datepicker']]: !unstyled },
+      { [cl['bk-date-picker']]: !unstyled },
       className,
     )}>
       <ReactDatePicker
@@ -54,14 +54,14 @@ export const DatePicker = (props: DatePickerProps) => {
         icon={<Icon icon="calendar"/>}
         customInput={
           <Input className={cx(
-            { [cl['bk-datepicker--input']]: !unstyled },
+            { [cl['bk-date-picker--input']]: !unstyled },
           )}/>
         }
         onCalendarClose={() => setIsOpen(false)}
         onCalendarOpen={() => setIsOpen(true)}
         {...propsRest}
       />
-      <Icon icon={`caret-${isOpen ? 'up' : 'down'}`} className={cx(cl['bk-datepicker--caret'])}/>
+      <Icon icon={`caret-${isOpen ? 'up' : 'down'}`} className={cx(cl['bk-date-picker--caret'])}/>
     </div>
   );
 };
diff --git a/src/components/forms/controls/DatePicker/DatePickerRange.tsx b/src/components/forms/controls/DatePicker/DatePickerRange.tsx
index 500402c..c611c50 100644
--- a/src/components/forms/controls/DatePicker/DatePickerRange.tsx
+++ b/src/components/forms/controls/DatePicker/DatePickerRange.tsx
@@ -41,7 +41,7 @@ export const DatePickerRange = (props: DatePickerRangeProps) => {
   return (
     <div className={cx(
       'bk',
-      { [cl['bk-datepicker']]: !unstyled },
+      { [cl['bk-date-picker']]: !unstyled },
       className,
     )}>
       <ReactDatePicker
diff --git a/src/components/forms/controls/DateTimePicker/DateTimePicker.module.scss b/src/components/forms/controls/DateTimePicker/DateTimePicker.module.scss
index e789355..63ef0c3 100644
--- a/src/components/forms/controls/DateTimePicker/DateTimePicker.module.scss
+++ b/src/components/forms/controls/DateTimePicker/DateTimePicker.module.scss
@@ -5,15 +5,15 @@
 @use '../../../../styling/defs.scss' as bk;
 
 @layer baklava.components {
-  .bk-datetimepicker {
-    @include bk.component-base(bk-datetimepicker);
+  .bk-date-time-picker {
+    @include bk.component-base(bk-date-time-picker);
 
     display: flex;
     flex-direction: row;
     gap: bk.$spacing-3;
   }
 
-  .bk-datetimepicker--timepicker {
+  .bk-date-time-picker--time-picker {
     position: relative;
     top: 4px;
   }
diff --git a/src/components/forms/controls/DateTimePicker/DateTimePicker.tsx b/src/components/forms/controls/DateTimePicker/DateTimePicker.tsx
index 4daa251..8829b68 100644
--- a/src/components/forms/controls/DateTimePicker/DateTimePicker.tsx
+++ b/src/components/forms/controls/DateTimePicker/DateTimePicker.tsx
@@ -29,10 +29,10 @@ type GenericProps = {
 export type DateTimePickerProps = GenericProps;
 
 export const DateTimePicker = ({ unstyled = false, className, date, onChange, ...propsRest }: DateTimePickerProps) => {
-  // time from date object
+  // Time from date object.
   const time = { hours: date?.getHours() || 0, minutes: date?.getMinutes() || 0 };
   
-  // manually update upstream date object when time is updated
+  // Manually update upstream Date object when time is updated.
   const onTimeUpdate = (time: Time) => {
     if (date) {
       const newDate = new Date(date);
@@ -45,7 +45,7 @@ export const DateTimePicker = ({ unstyled = false, className, date, onChange, ..
   return (
     <div className={cx(
       'bk',
-      { [cl['bk-datetimepicker']]: !unstyled },
+      { [cl['bk-date-time-picker']]: !unstyled },
       className,
     )}>
       <DatePicker
@@ -56,7 +56,7 @@ export const DateTimePicker = ({ unstyled = false, className, date, onChange, ..
         time={time}
         onUpdate={onTimeUpdate}
         className={cx(
-          { [cl['bk-datetimepicker--timepicker']]: !unstyled },
+          { [cl['bk-date-time-picker--time-picker']]: !unstyled },
         )}
       />
     </div>
diff --git a/src/components/forms/controls/TimePicker/TimePicker.module.scss b/src/components/forms/controls/TimePicker/TimePicker.module.scss
index 466265f..d0e0400 100644
--- a/src/components/forms/controls/TimePicker/TimePicker.module.scss
+++ b/src/components/forms/controls/TimePicker/TimePicker.module.scss
@@ -5,14 +5,14 @@
 @use '../../../../styling/defs.scss' as bk;
 
 @layer baklava.components {
-  .bk-timepicker {
-    @include bk.component-base(bk-timepicker);
+  .bk-time-picker {
+    @include bk.component-base(bk-time-picker);
     line-height: 1.8;
   }
 
-  .bk-timepicker--input {
+  .bk-time-picker--input {
     color: bk.$theme-form-text-default;
-    // a manual size increase to accomodate the clock icon without clipping the text
+    // A manual size increase to accommodate the clock icon without clipping the text.
     width: 92px;
   }
 }
diff --git a/src/components/forms/controls/TimePicker/TimePicker.tsx b/src/components/forms/controls/TimePicker/TimePicker.tsx
index f611e9e..a6dbd23 100644
--- a/src/components/forms/controls/TimePicker/TimePicker.tsx
+++ b/src/components/forms/controls/TimePicker/TimePicker.tsx
@@ -14,7 +14,7 @@ import cl from './TimePicker.module.scss';
 export type Time = {
   hours: number,
   minutes: number,
-}
+};
 
 export type TimePickerProps = ComponentProps<'input'> & {
   /** Whether this component should be unstyled. */
@@ -42,7 +42,7 @@ export const TimePicker = ({ unstyled = false, className, time, onUpdate, ...pro
   return (
     <div className={cx(
       'bk',
-      { [cl['bk-timepicker']]: !unstyled },
+      { [cl['bk-time-picker']]: !unstyled },
       className,
     )}>
       <Input
@@ -50,7 +50,7 @@ export const TimePicker = ({ unstyled = false, className, time, onUpdate, ...pro
         value={timeString}
         onChange={onChange}
         className={cx(
-          { [cl['bk-timepicker--input']]: !unstyled },
+          { [cl['bk-time-picker--input']]: !unstyled },
         )}
         {...propsRest}
       />