fix(styles): calendar updates [ci visual] (#4930)

* fix(styles): calendar updates * fix(styles): snapshots [ci visual]
SAP · Oct 27, 2023 · d96e42b · d96e42b
1 parent 7b9fc95
commit d96e42b
Show file tree

Hide file tree

Showing 13 changed files with 692 additions and 150 deletions.
diff --git a/packages/styles/src/calendar.scss b/packages/styles/src/calendar.scss
@@ -145,7 +145,6 @@ $fd-calendar-special-days: (
 
   overflow: hidden;
   position: relative;
-  height: var(--fdCalendar_Item_Height);
   margin: var(--fdCalendar_Item_Spacing);
   min-width: var(--fdCalendar_Item_Width);
   border-radius: var(--fdCalendar_Border_Radius);
@@ -247,6 +246,8 @@ $fd-calendar-special-days: (
   &__item {
     @extend %fd-calendar-item;
 
+    height: var(--fdCalendar_Item_Height);
+
     @include fd-hover() {
       --fdCalendar_Item_Background: var(--sapList_Hover_Background);
     }
@@ -370,7 +371,6 @@ $fd-calendar-special-days: (
 
     &-button {
       min-width: 100%;
-      min-height: 100%;
       padding: 0;
     }
 

diff --git a/packages/styles/src/theming/sap_horizon.scss b/packages/styles/src/theming/sap_horizon.scss
@@ -126,7 +126,7 @@
 
   /* Calendar */
   --fdCalendar_Text_Shadow: none;
-  --fdCalendar_Active_Item_Border: 0.0625rem solid var(--sapList_SelectionBorderColor);
+  --fdCalendar_Active_Item_Border: 0.125rem solid var(--sapList_SelectionBorderColor);
   --fdCalendar_Active_Focus_Item_Outline_Color: var(--sapList_SelectionBorderColor);
   --fdCalendar_Active_Focus_Item_Outline_Offset: -0.375rem;
   --fdCalendar_Item_Current_Border: none;

diff --git a/packages/styles/src/theming/sap_horizon_dark.scss b/packages/styles/src/theming/sap_horizon_dark.scss
@@ -135,7 +135,7 @@
 
   /* Calendar */
   --fdCalendar_Text_Shadow: none;
-  --fdCalendar_Active_Item_Border: 0.0625rem solid var(--sapList_SelectionBorderColor);
+  --fdCalendar_Active_Item_Border: 0.125rem solid var(--sapList_SelectionBorderColor);
   --fdCalendar_Active_Focus_Item_Outline_Color: var(--sapList_SelectionBorderColor);
   --fdCalendar_Active_Focus_Item_Outline_Offset: -0.375rem;
   --fdCalendar_Item_Current_Border: none;

diff --git a/packages/styles/src/theming/sap_horizon_hcb.scss b/packages/styles/src/theming/sap_horizon_hcb.scss
@@ -125,7 +125,7 @@
 
   /* Calendar */
   --fdCalendar_Text_Shadow: none;
-  --fdCalendar_Active_Item_Border: 0.0625rem solid var(--sapList_SelectionBorderColor);
+  --fdCalendar_Active_Item_Border: 0.125rem solid var(--sapList_SelectionBorderColor);
   --fdCalendar_Active_Focus_Item_Outline_Color: var(--sapList_SelectionBorderColor);
   --fdCalendar_Active_Focus_Item_Outline_Offset: -0.375rem;
   --fdCalendar_Item_Current_Border: none;

diff --git a/packages/styles/src/theming/sap_horizon_hcw.scss b/packages/styles/src/theming/sap_horizon_hcw.scss
@@ -126,7 +126,7 @@
 
   /* Calendar */
   --fdCalendar_Text_Shadow: none;
-  --fdCalendar_Active_Item_Border: 0.0625rem solid var(--sapList_SelectionBorderColor);
+  --fdCalendar_Active_Item_Border: 0.125rem solid var(--sapList_SelectionBorderColor);
   --fdCalendar_Active_Focus_Item_Outline_Color: var(--sapList_SelectionBorderColor);
   --fdCalendar_Active_Focus_Item_Outline_Offset: -0.375rem;
   --fdCalendar_Item_Current_Border: none;

diff --git a/packages/styles/stories/Components/calendar/cal.html b/packages/styles/stories/Components/calendar/cal.html
@@ -494,30 +494,30 @@
         <div class="docs_cal_item_wrapper">
             <div class="fd-calendar__item  fd-calendar__item--side-helper ">
                 <div class="fd-calendar__text-wrapper">
-                    <span class="fd-calendar__text">M</span>
+                    <span class="fd-calendar__text">Mon</span>
                 </div>
             </div>
         </div>
         <div class="docs_cal_item_wrapper">
             <div class="fd-calendar__item  fd-calendar__item--side-helper">
                 <div class="fd-calendar__text-wrapper">
-                    <span class="fd-calendar__text">M</span>
+                    <span class="fd-calendar__text">Mon</span>
                 </div>
             </div>
         </div>
         <div class="docs_cal_item_wrapper">
             <div class="fd-calendar__item  fd-calendar__item--side-helper">
                 <div class="fd-calendar__text-wrapper">
-                    <span class="fd-calendar__text">M</span>
+                    <span class="fd-calendar__text">Mon</span>
                 </div>
             </div>
         </div>
         <div class="docs_cal_item_wrapper">
             <div class="fd-calendar__item  fd-calendar__item--side-helper">
                 <div class="fd-calendar__text-wrapper">
-                    <span class="fd-calendar__text">M</span>
+                    <span class="fd-calendar__text">Mon</span>
                 </div>
             </div>
         </div>
     </div>
-</section>
+</section>
diff --git a/packages/styles/stories/Components/calendar/days.example.html b/packages/styles/stories/Components/calendar/days.example.html
@@ -24,37 +24,37 @@
                     <th class="fd-calendar__item fd-calendar__item--side-helper"></th>
                     <th class="fd-calendar__item fd-calendar__item--side-helper">
                         <div class="fd-calendar__text-wrapper">
-                            <span class="fd-calendar__text">S</span>
+                            <span class="fd-calendar__text">Sun</span>
                         </div>
                     </th>
                     <th class="fd-calendar__item fd-calendar__item--side-helper">
                         <div class="fd-calendar__text-wrapper">
-                            <span class="fd-calendar__text">M</span>
+                            <span class="fd-calendar__text">Mon</span>
                         </div>
                     </th>
                     <th class="fd-calendar__item fd-calendar__item--side-helper">
                         <div class="fd-calendar__text-wrapper">
-                            <span class="fd-calendar__text">T</span>
+                            <span class="fd-calendar__text">Tue</span>
                         </div>
                     </th>
                     <th class="fd-calendar__item fd-calendar__item--side-helper">
                         <div class="fd-calendar__text-wrapper">
-                            <span class="fd-calendar__text">W</span>
+                            <span class="fd-calendar__text">Wed</span>
                         </div>
                     </th>
                     <th class="fd-calendar__item fd-calendar__item--side-helper">
                         <div class="fd-calendar__text-wrapper">
-                            <span class="fd-calendar__text">T</span>
+                            <span class="fd-calendar__text">Thu</span>
                         </div>
                     </th>
                     <th class="fd-calendar__item fd-calendar__item--side-helper">
                         <div class="fd-calendar__text-wrapper">
-                            <span class="fd-calendar__text">F</span>
+                            <span class="fd-calendar__text">Fri</span>
                         </div>
                     </th>
                     <th class="fd-calendar__item fd-calendar__item--side-helper">
                         <div class="fd-calendar__text-wrapper">
-                            <span class="fd-calendar__text">S</span>
+                            <span class="fd-calendar__text">Sat</span>
                         </div>
                     </th>
                 </tr>
@@ -300,37 +300,37 @@
                 <tr class="fd-calendar__row">
                     <th class="fd-calendar__item fd-calendar__item--side-helper">
                         <div class="fd-calendar__text-wrapper">
-                            <span class="fd-calendar__text">S</span>
+                            <span class="fd-calendar__text">Sun</span>
                         </div>
                     </th>
                     <th class="fd-calendar__item fd-calendar__item--side-helper">
                         <div class="fd-calendar__text-wrapper">
-                            <span class="fd-calendar__text">M</span>
+                            <span class="fd-calendar__text">Mon</span>
                         </div>
                     </th>
                     <th class="fd-calendar__item fd-calendar__item--side-helper">
                         <div class="fd-calendar__text-wrapper">
-                            <span class="fd-calendar__text">T</span>
+                            <span class="fd-calendar__text">Tue</span>
                         </div>
                     </th>
                     <th class="fd-calendar__item fd-calendar__item--side-helper">
                         <div class="fd-calendar__text-wrapper">
-                            <span class="fd-calendar__text">W</span>
+                            <span class="fd-calendar__text">Wed</span>
                         </div>
                     </th>
                     <th class="fd-calendar__item fd-calendar__item--side-helper">
                         <div class="fd-calendar__text-wrapper">
-                            <span class="fd-calendar__text">T</span>
+                            <span class="fd-calendar__text">Thu</span>
                         </div>
                     </th>
                     <th class="fd-calendar__item fd-calendar__item--side-helper">
                         <div class="fd-calendar__text-wrapper">
-                            <span class="fd-calendar__text">F</span>
+                            <span class="fd-calendar__text">Fri</span>
                         </div>
                     </th>
                     <th class="fd-calendar__item fd-calendar__item--side-helper">
                         <div class="fd-calendar__text-wrapper">
-                            <span class="fd-calendar__text">S</span>
+                            <span class="fd-calendar__text">Sat</span>
                         </div>
                     </th>
                 </tr>

diff --git a/packages/styles/stories/Patterns/datepicker/mobile-landscape.example.html b/packages/styles/stories/Patterns/datepicker/mobile-landscape.example.html
@@ -45,37 +45,37 @@ <h2 class="fd-title fd-title--h5" id="dialog-title-2">
               <th class="fd-calendar__item fd-calendar__item--side-helper"></th>
               <th class="fd-calendar__item fd-calendar__item--side-helper">
                   <div class="fd-calendar__text-wrapper">
-                      <span class="fd-calendar__text">S</span>
+                      <span class="fd-calendar__text">Sun</span>
                   </div>
               </th>
               <th class="fd-calendar__item fd-calendar__item--side-helper">
                   <div class="fd-calendar__text-wrapper">
-                      <span class="fd-calendar__text">M</span>
+                      <span class="fd-calendar__text">Mon</span>
                   </div>
               </th>
               <th class="fd-calendar__item fd-calendar__item--side-helper">
                   <div class="fd-calendar__text-wrapper">
-                      <span class="fd-calendar__text">T</span>
+                      <span class="fd-calendar__text">Tue</span>
                   </div>
               </th>
               <th class="fd-calendar__item fd-calendar__item--side-helper">
                   <div class="fd-calendar__text-wrapper">
-                      <span class="fd-calendar__text">W</span>
+                      <span class="fd-calendar__text">Wed</span>
                   </div>
               </th>
               <th class="fd-calendar__item fd-calendar__item--side-helper">
                   <div class="fd-calendar__text-wrapper">
-                      <span class="fd-calendar__text">T</span>
+                      <span class="fd-calendar__text">Thu</span>
                   </div>
               </th>
               <th class="fd-calendar__item fd-calendar__item--side-helper">
                   <div class="fd-calendar__text-wrapper">
-                      <span class="fd-calendar__text">F</span>
+                      <span class="fd-calendar__text">Fri</span>
                   </div>
               </th>
               <th class="fd-calendar__item fd-calendar__item--side-helper">
                   <div class="fd-calendar__text-wrapper">
-                      <span class="fd-calendar__text">S</span>
+                      <span class="fd-calendar__text">Sat</span>
                   </div>
               </th>
           </tr>

diff --git a/packages/styles/stories/Patterns/datepicker/mobile-portrait.example.html b/packages/styles/stories/Patterns/datepicker/mobile-portrait.example.html
@@ -51,37 +51,37 @@ <h3 class="fd-title fd-title--h5">
               <th class="fd-calendar__item fd-calendar__item--side-helper"></th>
               <th class="fd-calendar__item fd-calendar__item--side-helper">
                   <div class="fd-calendar__text-wrapper">
-                      <span class="fd-calendar__text">S</span>
+                      <span class="fd-calendar__text">Sun</span>
                   </div>
               </th>
               <th class="fd-calendar__item fd-calendar__item--side-helper">
                   <div class="fd-calendar__text-wrapper">
-                      <span class="fd-calendar__text">M</span>
+                      <span class="fd-calendar__text">Mon</span>
                   </div>
               </th>
               <th class="fd-calendar__item fd-calendar__item--side-helper">
                   <div class="fd-calendar__text-wrapper">
-                      <span class="fd-calendar__text">T</span>
+                      <span class="fd-calendar__text">Tue</span>
                   </div>
               </th>
               <th class="fd-calendar__item fd-calendar__item--side-helper">
                   <div class="fd-calendar__text-wrapper">
-                      <span class="fd-calendar__text">W</span>
+                      <span class="fd-calendar__text">Wed</span>
                   </div>
               </th>
               <th class="fd-calendar__item fd-calendar__item--side-helper">
                   <div class="fd-calendar__text-wrapper">
-                      <span class="fd-calendar__text">T</span>
+                      <span class="fd-calendar__text">Thu</span>
                   </div>
               </th>
               <th class="fd-calendar__item fd-calendar__item--side-helper">
                   <div class="fd-calendar__text-wrapper">
-                      <span class="fd-calendar__text">F</span>
+                      <span class="fd-calendar__text">Fri</span>
                   </div>
               </th>
               <th class="fd-calendar__item fd-calendar__item--side-helper">
                   <div class="fd-calendar__text-wrapper">
-                      <span class="fd-calendar__text">S</span>
+                      <span class="fd-calendar__text">Sat</span>
                   </div>
               </th>
           </tr>

diff --git a/packages/styles/stories/Patterns/datepicker/today-navigation-button.example.html b/packages/styles/stories/Patterns/datepicker/today-navigation-button.example.html
@@ -64,37 +64,37 @@
                 <th class="fd-calendar__item fd-calendar__item--side-helper"></th>
                 <th class="fd-calendar__item fd-calendar__item--side-helper">
                     <div class="fd-calendar__text-wrapper">
-                        <span class="fd-calendar__text">S</span>
+                        <span class="fd-calendar__text">Sun</span>
                     </div>
                 </th>
                 <th class="fd-calendar__item fd-calendar__item--side-helper">
                     <div class="fd-calendar__text-wrapper">
-                        <span class="fd-calendar__text">M</span>
+                        <span class="fd-calendar__text">Mon</span>
                     </div>
                 </th>
                 <th class="fd-calendar__item fd-calendar__item--side-helper">
                     <div class="fd-calendar__text-wrapper">
-                        <span class="fd-calendar__text">T</span>
+                        <span class="fd-calendar__text">Tue</span>
                     </div>
                 </th>
                 <th class="fd-calendar__item fd-calendar__item--side-helper">
                     <div class="fd-calendar__text-wrapper">
-                        <span class="fd-calendar__text">W</span>
+                        <span class="fd-calendar__text">Wed</span>
                     </div>
                 </th>
                 <th class="fd-calendar__item fd-calendar__item--side-helper">
                     <div class="fd-calendar__text-wrapper">
-                        <span class="fd-calendar__text">T</span>
+                        <span class="fd-calendar__text">Thu</span>
                     </div>
                 </th>
                 <th class="fd-calendar__item fd-calendar__item--side-helper">
                     <div class="fd-calendar__text-wrapper">
-                        <span class="fd-calendar__text">F</span>
+                        <span class="fd-calendar__text">Fri</span>
                     </div>
                 </th>
                 <th class="fd-calendar__item fd-calendar__item--side-helper">
                     <div class="fd-calendar__text-wrapper">
-                        <span class="fd-calendar__text">S</span>
+                        <span class="fd-calendar__text">Sat</span>
                     </div>
                 </th>
             </tr>

diff --git a/packages/styles/stories/Patterns/datepicker/today-selection-button.example.html b/packages/styles/stories/Patterns/datepicker/today-selection-button.example.html
@@ -51,37 +51,37 @@
             <th class="fd-calendar__item fd-calendar__item--side-helper"></th>
             <th class="fd-calendar__item fd-calendar__item--side-helper">
               <div class="fd-calendar__text-wrapper">
-                <span class="fd-calendar__text">S</span>
+                <span class="fd-calendar__text">Sun</span>
               </div>
             </th>
             <th class="fd-calendar__item fd-calendar__item--side-helper">
               <div class="fd-calendar__text-wrapper">
-                <span class="fd-calendar__text">M</span>
+                <span class="fd-calendar__text">Mon</span>
               </div>
             </th>
             <th class="fd-calendar__item fd-calendar__item--side-helper">
               <div class="fd-calendar__text-wrapper">
-                  <span class="fd-calendar__text">T</span>
+                  <span class="fd-calendar__text">Tue</span>
               </div>
             </th>
             <th class="fd-calendar__item fd-calendar__item--side-helper">
               <div class="fd-calendar__text-wrapper">
-                <span class="fd-calendar__text">W</span>
+                <span class="fd-calendar__text">Wed</span>
               </div>
             </th>
             <th class="fd-calendar__item fd-calendar__item--side-helper">
               <div class="fd-calendar__text-wrapper">
-                <span class="fd-calendar__text">T</span>
+                <span class="fd-calendar__text">Thu</span>
               </div>
             </th>
             <th class="fd-calendar__item fd-calendar__item--side-helper">
               <div class="fd-calendar__text-wrapper">
-                <span class="fd-calendar__text">F</span>
+                <span class="fd-calendar__text">Fri</span>
               </div>
             </th>
             <th class="fd-calendar__item fd-calendar__item--side-helper">
               <div class="fd-calendar__text-wrapper">
-                <span class="fd-calendar__text">S</span>
+                <span class="fd-calendar__text">Sat</span>
               </div>
             </th>
           </tr>