@fluentui/web-components 1.6.3 → 2.1.0

package/dist/esm/button/button.styles.js

@@ -1,99 +1,49 @@
 import { css } from '@microsoft/fast-element';
 import { disabledCursor, forcedColorsStylesheetBehavior, } from '@microsoft/fast-foundation';
-import { SystemColors } from '@microsoft/fast-web-utilities';
+import { SystemColors } from "@microsoft/fast-web-utilities";
 import { AccentButtonStyles, baseButtonStyles, LightweightButtonStyles, OutlineButtonStyles, StealthButtonStyles, } from '../styles/';
 import { appearanceBehavior } from '../utilities/behaviors';
-import { accentFillRest, accentForegroundRest, disabledOpacity, neutralFillRest, neutralFillStealthRest, neutralStrokeRest, } from '../design-tokens';
+import { disabledOpacity } from '../design-tokens';
+const interactivitySelector = ':not([disabled])';
+const nonInteractivitySelector = '[disabled]';
 export const buttonStyles = (context, definition) => css `
-    :host([disabled]),
-    :host([disabled]:hover),
-    :host([disabled]:active) {
+    :host([disabled]) {
       opacity: ${disabledOpacity};
-      background-color: ${neutralFillRest};
       cursor: ${disabledCursor};
     }
 
-    ${baseButtonStyles(context, definition)}
+    ${baseButtonStyles(context, definition, interactivitySelector, nonInteractivitySelector)}
   `.withBehaviors(forcedColorsStylesheetBehavior(css `
-        :host([disabled]),
-        :host([disabled]:hover),
-        :host([disabled]:active),
-        :host([disabled]) .control,
-        :host([disabled]) .control:hover,
-        :host([appearance='neutral'][disabled]:hover) .control {
-          forced-color-adjust: none;
-          background-color: ${SystemColors.ButtonFace};
+        :host([disabled]) {
+          opacity: 1;
+        }
+        :host([disabled]) .control {
           border-color: ${SystemColors.GrayText};
           color: ${SystemColors.GrayText};
-          opacity: 1;
+          fill: currentcolor;
         }
       `), appearanceBehavior('accent', css `
-        :host([appearance='accent'][disabled]),
-        :host([appearance='accent'][disabled]:hover),
-        :host([appearance='accent'][disabled]:active) {
-          background: ${accentFillRest};
-        }
-
-        ${AccentButtonStyles}
+      ${AccentButtonStyles(context, definition, interactivitySelector, nonInteractivitySelector)},
       `.withBehaviors(forcedColorsStylesheetBehavior(css `
-            :host([appearance='accent'][disabled]) .control,
-            :host([appearance='accent'][disabled]) .control:hover {
+            :host([disabled]) .control {
               background: ${SystemColors.ButtonFace};
-              border-color: ${SystemColors.GrayText};
-              color: ${SystemColors.GrayText};
             }
           `))), appearanceBehavior('lightweight', css `
-        :host([appearance='lightweight'][disabled]:hover),
-        :host([appearance='lightweight'][disabled]:active) {
-          background-color: transparent;
-          color: ${accentForegroundRest};
-        }
-
-        :host([appearance='lightweight'][disabled]) .content::before,
-        :host([appearance='lightweight'][disabled]:hover) .content::before,
-        :host([appearance='lightweight'][disabled]:active) .content::before {
-          background: transparent;
-        }
-
-        ${LightweightButtonStyles}
+      ${LightweightButtonStyles(context, definition, interactivitySelector, nonInteractivitySelector)},
       `.withBehaviors(forcedColorsStylesheetBehavior(css `
-            :host([appearance='lightweight'][disabled]) .control {
-              forced-color-adjust: none;
-              color: ${SystemColors.GrayText};
-            }
-
-            :host([appearance='lightweight'][disabled]) .control:hover .content::before {
-              background: none;
+            :host([disabled]) .control {
+              border-color: ${SystemColors.ButtonFace};
             }
           `))), appearanceBehavior('outline', css `
-        :host([appearance='outline'][disabled]:hover),
-        :host([appearance='outline'][disabled]:active) {
-          background: transparent;
-          border-color: ${neutralStrokeRest};
-        }
-
-        ${OutlineButtonStyles}
+      ${OutlineButtonStyles(context, definition, interactivitySelector, nonInteractivitySelector)}
       `.withBehaviors(forcedColorsStylesheetBehavior(css `
-            :host([appearance='outline'][disabled]) .control {
+            :host([disabled]) .control {
               border-color: ${SystemColors.GrayText};
             }
           `))), appearanceBehavior('stealth', css `
-        :host([appearance='stealth'][disabled]),
-        :host([appearance='stealth'][disabled]:hover),
-        :host([appearance='stealth'][disabled]:active) {
-          background: ${neutralFillStealthRest};
-        }
-
-        ${StealthButtonStyles}
+      ${StealthButtonStyles(context, definition, interactivitySelector, nonInteractivitySelector)}
       `.withBehaviors(forcedColorsStylesheetBehavior(css `
-            :host([appearance='stealth'][disabled]),
-            :host([appearance='stealth'][disabled]:hover) {
-              background: ${SystemColors.ButtonFace};
-            }
-
-            :host([appearance='stealth'][disabled]) .control {
-              background: ${SystemColors.ButtonFace};
-              border-color: transparent;
-              color: ${SystemColors.GrayText};
+            :host([disabled]) .control {
+              border-color: ${SystemColors.ButtonFace};
             }
           `))));

package/dist/esm/calendar/calendar.stories.js

@@ -0,0 +1,115 @@
+import './index';
+import { fluentCalendar } from './index';
+const now = new Date();
+const years = new Array(9).fill(null).map((_, index) => (now.getFullYear() - 4 + index).toString());
+const groupsToDates = matrix => matrix.map(days => days.map(day => `${now.getMonth() + 1}-${day}-${now.getFullYear()}`).join(','));
+const disabledDates = groupsToDates([
+    [1, 2, 3, 4, now.getDate()],
+    [6, 7, 10, 18],
+    [8, 17, 24, 25],
+    [4, 11, 18, 25],
+]);
+export default {
+    title: 'Components/Calendar',
+    component: fluentCalendar,
+    argTypes: {
+        month: {
+            description: 'Month of the calendar to display.',
+            control: { type: 'select' },
+            options: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
+            default: 'The current month',
+        },
+        year: {
+            description: 'Year of the calendar to display.',
+            control: { type: 'select' },
+            options: years,
+            default: 'The current year',
+        },
+        locale: {
+            control: { type: 'select' },
+            options: ['en-US', 'fr-FR', 'de-DE', 'th-TH-u-ca-buddhist-nu-thai', 'ar-XE-u-ca-islamic-nu-arab'],
+            default: 'en-US',
+            description: 'Locale information which can include market (language and country), calendar type and numbering type.',
+        },
+        dayFormat: {
+            description: 'Formatting for the numbered days.',
+            options: ['2-digit', 'numeric'],
+            control: { type: 'select' },
+            default: 'numeric',
+        },
+        weekdayFormat: {
+            description: 'Formatting for the weekday titles.',
+            options: ['long', 'narrow', 'short'],
+            control: { type: 'select' },
+            default: 'short',
+        },
+        monthFormat: {
+            description: 'Formatting for the month name in the title.',
+            options: ['2-digit', 'long', 'narrow', 'numeric', 'short'],
+            control: { type: 'select' },
+            default: 'long',
+        },
+        yearFormat: {
+            description: 'Formatting for the year in the title.',
+            options: ['2-digit', 'numeric'],
+            control: { type: 'select' },
+            default: 'numeric',
+        },
+        disabledDates: {
+            description: 'Dates to be shown as disabled.',
+            options: disabledDates,
+            control: { type: 'select' },
+        },
+        selectedDates: {
+            description: 'Dates to be shown as selected',
+            options: disabledDates,
+            control: { type: 'select' },
+        },
+        readonly: {
+            description: 'A readonly version of the calendar without AT interactions.',
+            control: { type: 'boolean' },
+            default: true,
+        },
+    },
+};
+const CalendarTemplate = ({ month, year, locale, dayFormat, weekdayFormat, monthFormat, yearFormat, disabledDates, selectedDates, readonly, }) => `
+  <style>
+    div.docs-story > div:first-child {
+      height: 22em !important;
+    }
+  </style>
+  <fluent-calendar
+    ${month ? `month="${month}"` : ''}
+    ${year ? `year="${year}"` : ''}
+    ${locale ? `locale="${locale}"` : ''}
+    ${dayFormat ? `day-format="${dayFormat}"` : ''}
+    ${weekdayFormat ? `weekday-format="${weekdayFormat}"` : ''}
+    ${monthFormat ? `month-format="${monthFormat}"` : ''}
+    ${yearFormat ? `year-format="${yearFormat}"` : ''}
+    ${disabledDates ? `disabled-dates="${disabledDates}"` : ''}
+    ${selectedDates ? `selected-dates="${selectedDates}"` : ''}
+    ${readonly === false ? `readonly="false"` : ''}
+    ></fluent-calendar>
+  `;
+export const Calendar = CalendarTemplate.bind({});
+Calendar.args = {
+    label: 'Calendar',
+    month: (now.getMonth() + 1).toString(),
+    year: now.getFullYear().toString(),
+    locale: 'en-US',
+    readonly: true,
+    dayFormat: 'numeric',
+    weekdayFormat: 'short',
+    monthFormat: 'long',
+    yearFormat: 'numeric',
+};
+const example = `
+  <fluent-calendar></fluent-calendar>
+  `;
+Calendar.parameters = {
+    docs: {
+        source: {
+            code: example,
+        },
+    },
+};

package/dist/esm/calendar/calendar.styles.js

@@ -0,0 +1,133 @@
+import { css } from "@microsoft/fast-element";
+import { display, forcedColorsStylesheetBehavior } from '@microsoft/fast-foundation';
+import { SystemColors } from '@microsoft/fast-web-utilities';
+import { accentFillRest, baseHeightMultiplier, bodyFont, controlCornerRadius, density, designUnit, fillColor, foregroundOnAccentRest, neutralForegroundHint, neutralForegroundRest, strokeWidth, typeRampBaseFontSize, typeRampBaseLineHeight, } from '../design-tokens';
+import { DirectionalStyleSheetBehavior } from '../styles';
+/**
+ * LTR styles for calendar
+ * @internal
+ */
+const ltrStyles = css `
+.day.disabled::before {
+  transform: translate(-50%, 0) rotate(45deg);
+}
+`;
+/**
+ * RTL styles for calendar
+ * @internal
+ */
+const rtlStyles = css `
+.day.disabled::before {
+  transform: translate(50%, 0) rotate(-45deg);
+}
+`;
+/**
+ * Styles for calendar
+ * @public
+ */
+export const calendarStyles = (context, definition) => css `
+${display("inline-block")} :host {
+  --calendar-cell-size: calc((${baseHeightMultiplier} + 2 + ${density}) * ${designUnit} * 1px);
+  --calendar-gap: 2px;
+  font-family: ${bodyFont};
+  font-size: ${typeRampBaseFontSize};
+  line-height: ${typeRampBaseLineHeight};
+  color: ${neutralForegroundRest};
+}
+
+.title {
+  padding: calc(${designUnit} * 2px);
+  font-weight: 600;
+}
+
+.days {
+  text-align: center;
+}
+
+.week-days,
+.week {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  grid-gap: var(--calendar-gap);
+  border: 0;
+  padding: 0;
+}
+
+.day,
+.week-day {
+  border: 0;
+  width: var(--calendar-cell-size);
+  height: var(--calendar-cell-size);
+  line-height: var(--calendar-cell-size);
+  padding: 0;
+  box-sizing: initial;
+}
+
+.week-day {
+  font-weight: 600;
+}
+
+.day {
+  border: calc(${strokeWidth} * 1px) solid transparent;
+  border-radius: calc(${controlCornerRadius} * 1px);
+}
+
+.interact .day {
+  cursor: pointer;
+}
+
+.date {
+  height: 100%;
+}
+
+.inactive .date,
+.inactive.disabled::before {
+  color: ${neutralForegroundHint};
+}
+
+.disabled::before {
+  content: '';
+  display: inline-block;
+  width: calc(var(--calendar-cell-size) * .8);
+  height: calc(${strokeWidth} * 1px);
+  background: currentColor;
+  position: absolute;
+  margin-top: calc(var(--calendar-cell-size) / 2);
+  transform-origin: center;
+  z-index: 1;
+}
+
+.selected {
+  color: ${accentFillRest};
+  border: 1px solid ${accentFillRest};
+  background: ${fillColor};
+}
+
+.selected + .selected {
+  border-start-start-radius: 0;
+  border-end-start-radius: 0;
+  border-inline-start-width: 0;
+  padding-inline-start: calc(var(--calendar-gap) + (${strokeWidth} + ${controlCornerRadius}) * 1px);
+  margin-inline-start: calc((${controlCornerRadius} * -1px) - var(--calendar-gap));
+}
+
+.today.disabled::before {
+  color: ${foregroundOnAccentRest};
+}
+
+.today .date {
+  color: ${foregroundOnAccentRest};
+  background: ${accentFillRest};
+  border-radius: 50%;
+  position: relative;
+}
+`.withBehaviors(forcedColorsStylesheetBehavior(css `
+          .day.selected {
+              color: ${SystemColors.Highlight};
+          }
+
+          .today .date {
+              background: ${SystemColors.Highlight};
+              color: ${SystemColors.HighlightText};
+          }
+      `), new DirectionalStyleSheetBehavior(ltrStyles, rtlStyles));

package/dist/esm/calendar/index.js

@@ -0,0 +1,31 @@
+import { __decorate } from "tslib";
+import { attr, booleanConverter } from '@microsoft/fast-element';
+import { CalendarTitleTemplate, Calendar as FoundationCalendar, calendarTemplate as template, } from '@microsoft/fast-foundation';
+import { calendarStyles as styles } from './calendar.styles';
+/**
+ * Updated Calendar class that is readonly by default
+ */
+export class Calendar extends FoundationCalendar {
+    constructor() {
+        super(...arguments);
+        this.readonly = true;
+    }
+}
+__decorate([
+    attr({ converter: booleanConverter })
+], Calendar.prototype, "readonly", void 0);
+/**
+ * The Fluent Calendar Element. Implements {@link @microsoft/fast-foundation#Calendar},
+ * {@link @microsoft/fast-foundation#calendarTemplate}
+ *
+ * @public
+ * @remarks
+ * HTML Element \<fluent-calendar\>
+ */
+export const fluentCalendar = Calendar.compose({
+    baseName: 'calendar',
+    template,
+    styles,
+    title: CalendarTitleTemplate,
+});
+export { styles as calendarStyles };

package/dist/esm/card/card.stories.js

@@ -1,5 +1,19 @@
+import { addons } from '@storybook/addons';
+import { DOCS_RENDERED } from '@storybook/core-events';
+import { DesignSystemProvider, StandardLuminance } from '../index-rollup';
 import CardTemplate from './fixtures/card.html';
 import './index';
+addons.getChannel().addListener(DOCS_RENDERED, name => {
+    if (name.toLowerCase() === 'components/card') {
+        const els = document.getElementsByClassName('darkMode');
+        for (let i = 0; i < els.length; i++) {
+            const el = els[i];
+            if (el instanceof DesignSystemProvider) {
+                el.baseLayerLuminance = StandardLuminance.DarkMode;
+            }
+        }
+    }
+});
 export default {
     title: 'Components/Card',
 };

package/dist/esm/card/card.styles.js

@@ -1,37 +1,28 @@
 import { css } from '@microsoft/fast-element';
 import { display, forcedColorsStylesheetBehavior, } from '@microsoft/fast-foundation';
 import { SystemColors } from '@microsoft/fast-web-utilities';
-import { elevation } from '../styles';
-import { fillColor, layerCornerRadius, neutralForegroundRest } from '../design-tokens';
+import { fillColor, layerCornerRadius, neutralForegroundRest, neutralStrokeLayerRest, strokeWidth, } from '../design-tokens';
+import { elevationShadowCardRest } from '../styles';
 export const cardStyles = (context, definition) => css `
-      ${display('block')} :host {
-        --elevation: 4;
-        display: block;
-        contain: content;
-        height: var(--card-height, 100%);
-        width: var(--card-width, 100%);
-        box-sizing: border-box;
-        background: ${fillColor};
-        color: ${neutralForegroundRest};
-        border-radius: calc(${layerCornerRadius} * 1px);
-        ${elevation}
-      }
+    ${display('block')} :host {
+      display: block;
+      contain: content;
+      height: var(--card-height, 100%);
+      width: var(--card-width, 100%);
+      box-sizing: border-box;
+      background: ${fillColor};
+      color: ${neutralForegroundRest};
+      border: calc(${strokeWidth} * 1px) solid ${neutralStrokeLayerRest};
+      border-radius: calc(${layerCornerRadius} * 1px);
+      box-shadow: ${elevationShadowCardRest};
+    }
 
-      :host(:hover) {
-        --elevation: 8;
-      }
-
-      :host(:focus-within) {
-        --elevation: 8;
-      }
-
-      :host {
-        content-visibility: auto;
-      }
-    `.withBehaviors(forcedColorsStylesheetBehavior(css `
-          :host {
-            forced-color-adjust: none;
-            background: ${SystemColors.Canvas};
-            box-shadow: 0 0 0 1px ${SystemColors.CanvasText};
-          }
-        `));
+    :host {
+      content-visibility: auto;
+    }
+  `.withBehaviors(forcedColorsStylesheetBehavior(css `
+        :host {
+          background: ${SystemColors.Canvas};
+          color: ${SystemColors.CanvasText};
+        }
+      `));

package/dist/esm/card/index.js

@@ -31,7 +31,7 @@ export class Card extends FoundationCard {
      */
     handleChange(source, propertyName) {
         if (!this.cardFillColor) {
-            fillColor.setValueFor(this, (target) => neutralFillLayerRecipe.getValueFor(target).evaluate(target, fillColor.getValueFor(source)));
+            fillColor.setValueFor(this, (target) => neutralFillLayerRecipe.getValueFor(target).evaluate(target, fillColor.getValueFor(source)).rest);
         }
     }
     connectedCallback() {