@fluentui/web-components 1.6.3 → 2.1.0

package/dist/esm/progress/progress-ring/progress-ring.styles.js

@@ -2,83 +2,79 @@ import { css } from '@microsoft/fast-element';
 import { SystemColors } from '@microsoft/fast-web-utilities';
 import { display, forcedColorsStylesheetBehavior, } from '@microsoft/fast-foundation';
 import { heightNumber } from '../../styles';
-import { accentFillRest, neutralFillRest, neutralForegroundHint } from '../../design-tokens';
+import { accentFillRest, neutralForegroundHint } from '../../design-tokens';
 export const progressRingStyles = (context, definition) => css `
-      ${display('flex')} :host {
-        align-items: center;
-        outline: none;
-        height: calc(${heightNumber} * 1px);
-        width: calc(${heightNumber} * 1px);
-        margin: calc(${heightNumber} * 1px) 0;
-      }
+    ${display('flex')} :host {
+      align-items: center;
+      outline: none;
+      height: calc(${heightNumber} * 1px);
+      width: calc(${heightNumber} * 1px);
+    }
 
-      .progress {
-        height: 100%;
-        width: 100%;
-      }
+    .progress {
+      height: 100%;
+      width: 100%;
+    }
 
-      .background {
-        stroke: ${neutralFillRest};
-        fill: none;
-        stroke-width: 2px;
-      }
+    .background {
+      fill: none;
+      stroke-width: 2px;
+    }
 
-      .determinate {
-        stroke: ${accentFillRest};
-        fill: none;
-        stroke-width: 2px;
-        stroke-linecap: round;
-        transform-origin: 50% 50%;
-        transform: rotate(-90deg);
-        transition: all 0.2s ease-in-out;
-      }
+    .determinate {
+      stroke: ${accentFillRest};
+      fill: none;
+      stroke-width: 2px;
+      stroke-linecap: round;
+      transform-origin: 50% 50%;
+      transform: rotate(-90deg);
+      transition: all 0.2s ease-in-out;
+    }
 
-      .indeterminate-indicator-1 {
-        stroke: ${accentFillRest};
-        fill: none;
-        stroke-width: 2px;
-        stroke-linecap: round;
-        transform-origin: 50% 50%;
-        transform: rotate(-90deg);
-        transition: all 0.2s ease-in-out;
-        animation: spin-infinite 2s linear infinite;
-      }
+    .indeterminate-indicator-1 {
+      stroke: ${accentFillRest};
+      fill: none;
+      stroke-width: 2px;
+      stroke-linecap: round;
+      transform-origin: 50% 50%;
+      transform: rotate(-90deg);
+      transition: all 0.2s ease-in-out;
+      animation: spin-infinite 2s linear infinite;
+    }
 
-      :host(.paused) .indeterminate-indicator-1 {
-        animation-play-state: paused;
-        stroke: ${neutralFillRest};
-      }
+    :host(.paused) .indeterminate-indicator-1 {
+      animation: none;
+      stroke: ${neutralForegroundHint};
+    }
 
-      :host(.paused) .determinate {
-        stroke: ${neutralForegroundHint};
-      }
+    :host(.paused) .determinate {
+      stroke: ${neutralForegroundHint};
+    }
 
-      @keyframes spin-infinite {
-        0% {
-          stroke-dasharray: 0.01px 43.97px;
-          transform: rotate(0deg);
+    @keyframes spin-infinite {
+      0% {
+        stroke-dasharray: 0.01px 43.97px;
+        transform: rotate(0deg);
+      }
+      50% {
+        stroke-dasharray: 21.99px 21.99px;
+        transform: rotate(450deg);
+      }
+      100% {
+        stroke-dasharray: 0.01px 43.97px;
+        transform: rotate(1080deg);
+      }
+    }
+  `.withBehaviors(forcedColorsStylesheetBehavior(css `
+        .background {
+          stroke: ${SystemColors.Field};
         }
-        50% {
-          stroke-dasharray: 21.99px 21.99px;
-          transform: rotate(450deg);
+        .determinate,
+        .indeterminate-indicator-1 {
+          stroke: ${SystemColors.ButtonText};
         }
-        100% {
-          stroke-dasharray: 0.01px 43.97px;
-          transform: rotate(1080deg);
+        :host(.paused) .determinate,
+        :host(.paused) .indeterminate-indicator-1 {
+          stroke: ${SystemColors.GrayText};
         }
-      }
-    `.withBehaviors(forcedColorsStylesheetBehavior(css `
-          .indeterminate-indicator-1,
-          .determinate {
-            stroke: ${SystemColors.FieldText};
-          }
-          .background {
-            stroke: ${SystemColors.Field};
-          }
-          :host(.paused) .indeterminate-indicator-1 {
-            stroke: ${SystemColors.Field};
-          }
-          :host(.paused) .determinate {
-            stroke: ${SystemColors.GrayText};
-          }
-        `));
+      `));

package/dist/esm/radio/index.js

@@ -14,7 +14,9 @@ export const fluentRadio = Radio.compose({
     template,
     styles,
     checkedIndicator: `
-    <div part="checked-indicator" class="checked-indicator"></div>
+    <svg width="16" height="16" xmlns="http://www.w3.org/2000/svg">
+      <circle cx="8" cy="8" r="4"/>
+    </svg>
   `,
 });
 /**

package/dist/esm/radio/radio.stories.js

@@ -15,15 +15,16 @@ export default {
         },
     },
 };
-const RadioTemplate = ({ checked, disabled, required }) => `
+const RadioTemplate = ({ checked, disabled, required, label }) => `
   <fluent-radio
     ${checked ? 'checked' : ''}
     ${disabled ? 'disabled' : ''}
     ${required ? 'required' : ''}
-  ></fluent-radio>
+  >${label}</fluent-radio>
 `;
 export const Radio = RadioTemplate.bind({});
 Radio.args = {
+    label: 'Label',
     checked: false,
     disabled: false,
     required: false,

package/dist/esm/radio/radio.styles.js

@@ -2,13 +2,12 @@ import { css } from '@microsoft/fast-element';
 import { SystemColors } from '@microsoft/fast-web-utilities';
 import { disabledCursor, display, focusVisible, forcedColorsStylesheetBehavior, } from '@microsoft/fast-foundation';
 import { heightNumber } from '../styles';
-import { bodyFont, designUnit, disabledOpacity, fillColor, focusStrokeOuter, neutralFillInputActive, neutralFillInputHover, neutralFillInputRest, neutralForegroundRest, neutralStrokeStrongActive, neutralStrokeStrongHover, neutralStrokeStrongRest, strokeWidth, typeRampBaseFontSize, typeRampBaseLineHeight, } from '../design-tokens';
+import { accentFillActive, accentFillHover, accentFillRest, bodyFont, designUnit, disabledOpacity, fillColor, focusStrokeOuter, foregroundOnAccentRest, neutralFillInputAltActive, neutralFillInputAltFocus, neutralFillInputAltHover, neutralFillInputAltRest, neutralForegroundRest, neutralStrokeStrongActive, neutralStrokeStrongHover, neutralStrokeStrongRest, strokeWidth, typeRampBaseFontSize, typeRampBaseLineHeight, } from '../design-tokens';
 export const radioStyles = (context, definition) => css `
     ${display('inline-flex')} :host {
       --input-size: calc((${heightNumber} / 2) + ${designUnit});
       align-items: center;
       outline: none;
-      margin: calc(${designUnit} * 1px) 0;
       ${
 /*
  * Chromium likes to select label text or the default slot when
@@ -26,7 +25,7 @@ export const radioStyles = (context, definition) => css `
       box-sizing: border-box;
       border-radius: 50%;
       border: calc(${strokeWidth} * 1px) solid ${neutralStrokeStrongRest};
-      background: ${neutralFillInputRest};
+      background: ${neutralFillInputAltRest};
       outline: none;
       cursor: pointer;
     }
@@ -48,39 +47,56 @@ export const radioStyles = (context, definition) => css `
     }
 
     .control,
-    .checked-indicator {
+    slot[name='checked-indicator'] {
       flex-shrink: 0;
     }
 
-    .checked-indicator {
-      position: absolute;
-      top: 5px;
-      left: 5px;
-      right: 5px;
-      bottom: 5px;
-      border-radius: 50%;
-      display: inline-block;
-      background: ${neutralForegroundRest};
-      fill: ${neutralForegroundRest};
+    slot[name='checked-indicator'] {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 100%;
+      height: 100%;
+      fill: ${foregroundOnAccentRest};
       opacity: 0;
       pointer-events: none;
     }
 
-    :host(:enabled) .control:hover {
-      background: ${neutralFillInputHover};
+    :host(:not(.disabled):hover) .control {
+      background: ${neutralFillInputAltHover};
       border-color: ${neutralStrokeStrongHover};
     }
 
-    :host(:enabled) .control:active {
-      background: ${neutralFillInputActive};
+    :host(:not(.disabled):active) .control {
+      background: ${neutralFillInputAltActive};
       border-color: ${neutralStrokeStrongActive};
     }
 
+    :host(:not(.disabled):active) slot[name='checked-indicator'] {
+      opacity: 1;
+    }
+
     :host(:${focusVisible}) .control {
-      box-shadow: 0 0 0 2px ${fillColor}, 0 0 0 4px ${focusStrokeOuter};
+      box-shadow: 0 0 0 1px ${fillColor}, 0 0 0 3px ${focusStrokeOuter};
+      background: ${neutralFillInputAltFocus};
       border-color: ${focusStrokeOuter};
     }
 
+    :host(.checked) .control {
+      background: ${accentFillRest};
+      border-color: transparent;
+    }
+
+    :host(.checked:not(.disabled):hover) .control {
+      background: ${accentFillHover};
+      border-color: transparent;
+    }
+
+    :host(.checked:not(.disabled):active) .control {
+      background: ${accentFillActive};
+      border-color: transparent;
+    }
+
     :host(.disabled) .label,
     :host(.readonly) .label,
     :host(.readonly) .control,
@@ -88,7 +104,7 @@ export const radioStyles = (context, definition) => css `
       cursor: ${disabledCursor};
     }
 
-    :host(.checked) .checked-indicator {
+    :host(.checked) slot[name='checked-indicator'] {
       opacity: 1;
     }
 
@@ -97,52 +113,46 @@ export const radioStyles = (context, definition) => css `
     }
   `.withBehaviors(forcedColorsStylesheetBehavior(css `
         .control {
-          forced-color-adjust: none;
-          border-color: ${SystemColors.FieldText};
           background: ${SystemColors.Field};
+          border-color: ${SystemColors.FieldText};
         }
-        :host(:enabled) .control:hover,
-        .control:active {
+        :host(:not(.disabled):hover) .control,
+        :host(:not(.disabled):active) .control {
           border-color: ${SystemColors.Highlight};
-          background: ${SystemColors.Field};
         }
         :host(:${focusVisible}) .control {
+          forced-color-adjust: none;
+          box-shadow: 0 0 0 1px ${SystemColors.Field}, 0 0 0 3px ${SystemColors.FieldText};
+          background: ${SystemColors.Field};
           border-color: ${SystemColors.Highlight};
-          box-shadow: 0 0 0 2px ${SystemColors.Field}, 0 0 0 4px ${SystemColors.FieldText};
-        }
-        :host(.checked:${focusVisible}:enabled) .control {
-          border-color: ${SystemColors.Highlight};
-          box-shadow: 0 0 0 2px ${SystemColors.Field}, 0 0 0 4px ${SystemColors.FieldText};
         }
-        :host(.checked:enabled) .control:hover,
-        .control:active {
+        :host(.checked:not(.disabled):hover) .control,
+        :host(.checked:not(.disabled):active) .control {
           border-color: ${SystemColors.Highlight};
           background: ${SystemColors.Highlight};
         }
-        :host(.checked) .checked-indicator {
-          background: ${SystemColors.Highlight};
+        :host(.checked:${focusVisible}) .control {
+          box-shadow: 0 0 0 1px ${SystemColors.Field}, 0 0 0 3px ${SystemColors.FieldText};
+        }
+        :host(.checked) slot[name='checked-indicator'] {
           fill: ${SystemColors.Highlight};
         }
-        :host(.checked) .control:hover .checked-indicator {
-          background: ${SystemColors.HighlightText};
+        :host(.checked:hover) .control slot[name='checked-indicator'] {
           fill: ${SystemColors.HighlightText};
         }
         :host(.disabled) {
-          forced-color-adjust: none;
           opacity: 1;
         }
         :host(.disabled) .label {
           color: ${SystemColors.GrayText};
         }
         :host(.disabled) .control,
-        :host(.checked.disabled) .control:hover,
-        .control:active {
+        :host(.checked.disabled) .control {
           background: ${SystemColors.Field};
           border-color: ${SystemColors.GrayText};
         }
-        :host(.disabled) .checked-indicator,
-        :host(.checked.disabled) .control:hover .checked-indicator {
+        :host(.disabled) slot[name='checked-indicator'],
+        :host(.checked.disabled) slot[name='checked-indicator'] {
           fill: ${SystemColors.GrayText};
-          background: ${SystemColors.GrayText};
         }
       `));

package/dist/esm/radio-group/radio-group.styles.js

@@ -1,10 +1,8 @@
 import { css } from '@microsoft/fast-element';
 import { display } from '@microsoft/fast-foundation';
-import { designUnit } from '../design-tokens';
 export const radioGroupStyles = (context, definition) => css `
   ${display('flex')} :host {
     align-items: flex-start;
-    margin: calc(${designUnit} * 1px) 0;
     flex-direction: column;
   }
 

package/dist/esm/select/index.js

@@ -1,6 +1,7 @@
 import { __decorate } from "tslib";
 import { attr } from '@microsoft/fast-element';
 import { Select as FoundationSelect, selectTemplate as template } from '@microsoft/fast-foundation';
+import { fillColor, neutralLayerFloating } from '../design-tokens';
 import { selectStyles as styles } from './select.styles';
 /**
  * The Fluent select class
@@ -24,6 +25,9 @@ export class Select extends FoundationSelect {
         if (!this.appearance) {
             this.appearance = 'outline';
         }
+        if (this.listbox) {
+            fillColor.setValueFor(this.listbox, neutralLayerFloating);
+        }
     }
 }
 __decorate([
@@ -45,15 +49,8 @@ export const fluentSelect = Select.compose({
     template,
     styles,
     indicator: `
-    <svg
-        class="select-indicator"
-        part="select-indicator"
-        viewBox="0 0 12 7"
-        xmlns="http://www.w3.org/2000/svg"
-    >
-        <path
-            d="M11.85.65c.2.2.2.5 0 .7L6.4 6.84a.55.55 0 01-.78 0L.14 1.35a.5.5 0 11.71-.7L6 5.8 11.15.65c.2-.2.5-.2.7 0z"
-        />
+    <svg width="12" height="12" xmlns="http://www.w3.org/2000/svg">
+      <path d="M2.15 4.65c.2-.2.5-.2.7 0L6 7.79l3.15-3.14a.5.5 0 11.7.7l-3.5 3.5a.5.5 0 01-.7 0l-3.5-3.5a.5.5 0 010-.7z"/>
     </svg>
   `,
 });

package/dist/esm/select/select.stories.js

@@ -4,19 +4,27 @@ export default {
     title: 'Components/Select',
     component: fluentSelect,
     argTypes: {
+        appearance: {
+            options: ['filled', 'outlined', 'stealth'],
+            control: { type: 'radio' },
+            defaultValue: 'outlined',
+        },
         disabled: {
             control: { type: 'boolean' },
         },
         position: {
             options: ['above', 'below'],
             control: { type: 'radio' },
+            defaultValue: 'below',
         },
     },
 };
-const SelectTemplate = ({ disabled, position }) => `
-  <fluent-select 
+const SelectTemplate = ({ appearance, disabled, position }) => `
+  <fluent-select
+    ${appearance ? `appearance="${appearance}"` : ''}
     ${disabled ? 'disabled' : ''} 
     ${position ? `position="${position}"` : ''}
+    style="margin-bottom: 200px;"
   >
     <fluent-option>Option One</fluent-option>
     <fluent-option>Option Two</fluent-option>