feat(styles): update Calendar legend [ci visual]

SAP · Nov 15, 2024 · 7694890 · 7694890
1 parent 9b0bce0
commit 7694890
Show file tree

Hide file tree

Showing 4 changed files with 392 additions and 703 deletions.
diff --git a/packages/styles/src/calendar.scss b/packages/styles/src/calendar.scss
@@ -29,18 +29,6 @@ $fd-calendar-special-days: (
   '20': var(--sapLegendColor20)
 );
 
-@mixin fd-legend-text-base() {
-  color: var(--sapContent_LabelColor);
-  font-family: var(--sapFontFamily);
-  font-size: var(--sapFontSmallSize);
-  font-weight: normal;
-  padding: 0.3125rem;
-  padding-inline: 0.3125rem;
-  padding-block: 0.3125rem;
-  column-gap: 0.5rem;
-  cursor: default;
-}
-
 @mixin fd-legend-days($nameColorMap) {
   [class*='#{$block}__item--legend-']:not(.#{$block}__item--today) {
     .#{$block}__text-wrapper::after {
@@ -425,77 +413,6 @@ $fd-calendar-special-days: (
     display: flex;
   }
 
-  // LEGEND SECTION
-  &__legend {
-    @include fd-flex();
-
-    flex-wrap: wrap;
-    gap: 0.5rem;
-    max-width: 18rem;
-
-    &--col {
-      @include fd-flex(column);
-
-      align-items: flex-start;
-      max-width: 7.5rem;
-    }
-
-
-    &-item {
-      @include fd-inline-flex-center();
-
-      padding: var(--sapContent_FocusWidth);
-
-      @include fd-focus() {
-        padding: 0.125rem;
-        border-radius: 0.25rem;
-        outline: var(--sapContent_FocusWidth) solid var(--sapContent_FocusColor);
-      }
-
-      margin-block: 0.25rem;
-      margin-inline: 0.25rem 0.5rem;
-    }
-
-    &-marker{
-      @include fd-square(0.875rem);
-
-      border: 0.0625rem solid var(--sapContent_ForegroundBorderColor); // 0.125rem if not ForegroundBorderColor
-      border-radius: 0.125rem;
-      background-color: none;
-      margin-inline: 0;
-      margin-block: 0;
-
-        &--circle {
-          @include fd-square(1rem);
-
-          display: inline-block;
-          border-radius: 0.563rem;
-        }
-      }
-
-    &-text {
-      @include fd-legend-text-base();
-    }
-
-    &-description {
-      @include fd-legend-text-base();
-
-      @mixin fd-ellipsis { 
-        white-space: nowrap; 
-        overflow: hidden; 
-        text-overflow: ellipsis; 
-      }
-
-      vertical-align: middle;
-      white-space: pre-line;
-      padding-top: 0;
-    }
-
-    &-text-and-description {
-      @include fd-flex(column);
-    }
-  }
-
   &__text {
     @include fd-reset();
     @include fd-flex-center();
@@ -555,3 +472,93 @@ $fd-calendar-special-days: (
     padding-block-start: 1rem;
   }
 }
+
+.#{$block}-legend {
+  @include fd-reset();
+
+  padding-block: 0.5rem;
+  padding-inline: 0.5rem;
+  background: var(--sapList_Background);
+  column-width: var(--fdCalendar_Legend_Column_Width, 7.5rem);
+
+  &--auto-column {
+    --fdCalendar_Legend_Column_Width: auto;
+  }
+
+  &__item {
+    @include fd-reset();
+
+    @include fd-flex() {
+      gap: 0.5rem;
+    };
+
+    min-width:  7.5rem;
+    border-radius: 0.25rem;
+    padding-block: var(--fdCalendar_Legend_Item_Padding, 0.25rem);
+    padding-inline: var(--fdCalendar_Legend_Item_Padding, 0.25rem);
+
+    @include fd-focus() {
+      box-shadow: 0 0 0 var(--sapContent_FocusWidth) var(--sapContent_FocusColor) inset;
+    }
+
+    @include fd-active() {
+      box-shadow: 0 0 0 var(--sapContent_FocusWidth) var(--sapContent_FocusColor) inset;
+    }
+
+    &--appointment {
+      --fdCalendar_Legend_Marker_Border_Radius: 1rem;
+    }
+
+    &--today {
+      --fdCalendar_Legend_Marker_Border_Width: 0.125rem;
+      --fdCalendar_Legend_Marker_Background: var(--sapList_Background);
+      --fdCalendar_Legend_Marker_Border_Color: var(--sapLegend_CurrentDateTime);
+    }
+
+    &--selected {
+      --fdCalendar_Legend_Marker_Background: var(--sapSelectedColor);
+    }
+
+    &--work {
+      --fdCalendar_Legend_Marker_Background: var(--sapLegend_WorkingBackground);
+    }
+
+    &--non-work {
+      --fdCalendar_Legend_Marker_Background: var(--sapLegend_NonWorkingBackground);
+    }
+
+    @each $name, $color in $fd-calendar-special-days {
+      &--placeholder-#{$name} {
+        --fdCalendar_Legend_Marker_Background: #{$color};
+      }
+    }
+
+  }
+
+  &__marker {
+    @include fd-reset();
+    @include fd-set-square(1rem);
+
+    border-style: solid;
+    border-radius: var(--fdCalendar_Legend_Marker_Border_Radius, 0);
+    border-width: var(--fdCalendar_Legend_Marker_Border_Width, 0.0625rem);
+    background: var(--fdCalendar_Legend_Marker_Background, var(--sapList_Background));
+    border-color: var(--fdCalendar_Legend_Marker_Border_Color, var(--sapContent_ForegroundBorderColor));
+  }
+
+  &__text {
+    @include fd-reset();
+
+    overflow: hidden;
+    line-height: 1rem;
+    white-space: pre-line;
+    vertical-align: middle;
+    text-overflow: ellipsis;
+    font-size: var(--sapFontSmallSize);
+    color: var(--sapContent_LabelColor);
+  }
+
+  @include fd-compact-or-condensed() {
+    --fdCalendar_Legend_Item_Padding: 0.125rem;
+  }
+}
diff --git a/packages/styles/stories/Components/calendar/calendar.stories.js b/packages/styles/stories/Components/calendar/calendar.stories.js
@@ -97,16 +97,6 @@ These modifier classes are used to style various states of calendar grid element
 | \`is-hover\` | Style hovered calendar elements
 | \`is-disabled\` | Style disabled calendar elements
 
-### Legend
-These modifier classes are used to style calendar grid elements with colors.\n
-| Modifier class | Use to... |
-| -------------:| :-------------- |
-| \`fd-calendar__legend-item\` | Create a legend container
-| \`fd-calendar__legend-marker\` | Create a legend marker (square by default)
-| \` fd-calendar__legend-marker--circle\` | Modify the legend marker to a circle
-| \` fd-calendar__legend-text\` | Create a legend title text
-| \` fd-calendar__legend-description\` | Create a legend description text
-
 ### Special days
 The classes \`fd-calendar__item--legend-1\` ... \`fd-calendar__item--legend-20\` are used to style calendar grid elements with colors, which are identified by numeric modifier classes.\n
 `,
@@ -149,7 +139,7 @@ export const Legend = () => legendExampleHtml;
 Legend.parameters = {
   docs: {
    description: {
-      story: 'The calendar component can display a customizable legend to help users understand the meaning of different colors or styles used in the calendar. Add the `fd-calendar__legend` class to a child container and then add the `fd-calendar__legend-item` class to each legend item.'
+      story: 'The Calendar component can display a customizable legend to help users interpret the meaning of various colors and styles used within the calendar. <br>The legend includes 20 predefined color <b>placeholders</b> (<code>fd-calendar-legend__item--placeholder-1</code>, <code>fd-calendar-legend__item--placeholder-20</code>, etc.), as well as generic colors for <b>selection</b> (<code>fd-calendar-legend__item--selected</code>), <b>today</b> (<code>fd-calendar-legend__item--today</code>), <b>normal (work) days</b> (<code>fd-calendar-legend__item--work</code>), and <b>non-working days</b> (<code>fd-calendar-legend__item--non-work</code>).<br> The number of flexible columns should be configurable to prevent label truncation, though labels can also wrap to accommodate longer text. Use <code>fd-calendar-legend--auto-column</code> for auto column width.<br> Appointments are represented by circles (<code>fd-calendar-legend__item--appointment</code>), while special calendar days are depicted as squares (default).'
     }
   }
 };