@fluentui/web-components 3.0.0-beta.43 → 3.0.0-beta.45
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +20 -2
- package/dist/dts/drawer-body/drawer-body.d.ts +17 -0
- package/dist/esm/drawer-body/drawer-body.js +17 -0
- package/dist/esm/drawer-body/drawer-body.js.map +1 -1
- package/dist/esm/field/field.styles.js +1 -2
- package/dist/esm/field/field.styles.js.map +1 -1
- package/dist/esm/radio-group/radio-group.styles.js +2 -1
- package/dist/esm/radio-group/radio-group.styles.js.map +1 -1
- package/dist/web-components.d.ts +17 -0
- package/dist/web-components.js +2 -2
- package/dist/web-components.min.js +91 -91
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,12 +1,30 @@
|
|
|
1
1
|
# Change Log - @fluentui/web-components
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Thu, 18 Jul 2024 04:06:42 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [3.0.0-beta.45](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v3.0.0-beta.45)
|
|
8
|
+
|
|
9
|
+
Thu, 18 Jul 2024 04:06:42 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v3.0.0-beta.44..@fluentui/web-components_v3.0.0-beta.45)
|
|
11
|
+
|
|
12
|
+
### Changes
|
|
13
|
+
|
|
14
|
+
- fix: removed padding from field host element ([PR #32002](https://github.com/microsoft/fluentui/pull/32002) by jes@microsoft.com)
|
|
15
|
+
|
|
16
|
+
## [3.0.0-beta.44](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v3.0.0-beta.44)
|
|
17
|
+
|
|
18
|
+
Wed, 17 Jul 2024 04:07:52 GMT
|
|
19
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v3.0.0-beta.43..@fluentui/web-components_v3.0.0-beta.44)
|
|
20
|
+
|
|
21
|
+
### Changes
|
|
22
|
+
|
|
23
|
+
- chore: cleanup drawer storybook ([PR #31991](https://github.com/microsoft/fluentui/pull/31991) by rupertdavid@microsoft.com)
|
|
24
|
+
|
|
7
25
|
## [3.0.0-beta.43](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v3.0.0-beta.43)
|
|
8
26
|
|
|
9
|
-
Tue, 16 Jul 2024 04:
|
|
27
|
+
Tue, 16 Jul 2024 04:08:02 GMT
|
|
10
28
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v3.0.0-beta.42..@fluentui/web-components_v3.0.0-beta.43)
|
|
11
29
|
|
|
12
30
|
### Changes
|
|
@@ -1,3 +1,20 @@
|
|
|
1
1
|
import { FASTElement } from '@microsoft/fast-element';
|
|
2
|
+
/**
|
|
3
|
+
* A DrawerBody component to layout drawer content
|
|
4
|
+
* @extends FASTElement
|
|
5
|
+
*
|
|
6
|
+
* @slot title - The title slot
|
|
7
|
+
* @slot close - The close button slot
|
|
8
|
+
* @slot - The default content slot
|
|
9
|
+
* @slot footer - The footer slot
|
|
10
|
+
*
|
|
11
|
+
* @csspart header - The header part of the drawer
|
|
12
|
+
* @csspart content - The content part of the drawer
|
|
13
|
+
* @csspart footer - The footer part of the drawer
|
|
14
|
+
*
|
|
15
|
+
* @summary A component that provides a drawer body for displaying content in a side panel.
|
|
16
|
+
*
|
|
17
|
+
* @tag fluent-drawer-body
|
|
18
|
+
*/
|
|
2
19
|
export declare class DrawerBody extends FASTElement {
|
|
3
20
|
}
|
|
@@ -1,4 +1,21 @@
|
|
|
1
1
|
import { FASTElement } from '@microsoft/fast-element';
|
|
2
|
+
/**
|
|
3
|
+
* A DrawerBody component to layout drawer content
|
|
4
|
+
* @extends FASTElement
|
|
5
|
+
*
|
|
6
|
+
* @slot title - The title slot
|
|
7
|
+
* @slot close - The close button slot
|
|
8
|
+
* @slot - The default content slot
|
|
9
|
+
* @slot footer - The footer slot
|
|
10
|
+
*
|
|
11
|
+
* @csspart header - The header part of the drawer
|
|
12
|
+
* @csspart content - The content part of the drawer
|
|
13
|
+
* @csspart footer - The footer part of the drawer
|
|
14
|
+
*
|
|
15
|
+
* @summary A component that provides a drawer body for displaying content in a side panel.
|
|
16
|
+
*
|
|
17
|
+
* @tag fluent-drawer-body
|
|
18
|
+
*/
|
|
2
19
|
export class DrawerBody extends FASTElement {
|
|
3
20
|
}
|
|
4
21
|
//# sourceMappingURL=drawer-body.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"drawer-body.js","sourceRoot":"","sources":["../../../src/drawer-body/drawer-body.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAEtD,MAAM,OAAO,UAAW,SAAQ,WAAW;CAAG"}
|
|
1
|
+
{"version":3,"file":"drawer-body.js","sourceRoot":"","sources":["../../../src/drawer-body/drawer-body.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAEtD;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,OAAO,UAAW,SAAQ,WAAW;CAAG"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { css } from '@microsoft/fast-element';
|
|
2
2
|
import { disabledState } from '../styles/states/index.js';
|
|
3
|
-
import { borderRadiusMedium, colorNeutralForeground1, colorStrokeFocus2, fontFamilyBase, fontSizeBase200, fontSizeBase300, fontSizeBase400, fontWeightRegular, fontWeightSemibold, lineHeightBase200, lineHeightBase300, lineHeightBase400, spacingHorizontalM,
|
|
3
|
+
import { borderRadiusMedium, colorNeutralForeground1, colorStrokeFocus2, fontFamilyBase, fontSizeBase200, fontSizeBase300, fontSizeBase400, fontWeightRegular, fontWeightSemibold, lineHeightBase200, lineHeightBase300, lineHeightBase400, spacingHorizontalM, spacingVerticalM, spacingVerticalS, spacingVerticalXXS, strokeWidthThick, } from '../theme/design-tokens.js';
|
|
4
4
|
import { display } from '../utils/display.js';
|
|
5
5
|
import { ValidationFlags } from './field.options.js';
|
|
6
6
|
/**
|
|
@@ -81,7 +81,6 @@ export const styles = css `
|
|
|
81
81
|
align-items: center;
|
|
82
82
|
gap: 0 ${spacingHorizontalM};
|
|
83
83
|
justify-items: start;
|
|
84
|
-
padding: ${spacingVerticalS} ${spacingHorizontalS};
|
|
85
84
|
position: relative;
|
|
86
85
|
}
|
|
87
86
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"field.styles.js","sourceRoot":"","sources":["../../../src/field/field.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAC1D,OAAO,EACL,kBAAkB,EAClB,uBAAuB,EACvB,iBAAiB,EACjB,cAAc,EACd,eAAe,EACf,eAAe,EACf,eAAe,EACf,iBAAiB,EACjB,kBAAkB,EAClB,iBAAiB,EACjB,iBAAiB,EACjB,iBAAiB,EACjB,kBAAkB,
|
|
1
|
+
{"version":3,"file":"field.styles.js","sourceRoot":"","sources":["../../../src/field/field.styles.ts"],"names":[],"mappings":"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"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { css } from '@microsoft/fast-element';
|
|
2
2
|
import { checkedState, disabledState } from '../styles/states/index.js';
|
|
3
|
-
import { colorNeutralForeground1, colorNeutralForeground2, colorNeutralForeground3, colorNeutralForegroundDisabled, } from '../theme/design-tokens.js';
|
|
3
|
+
import { colorNeutralForeground1, colorNeutralForeground2, colorNeutralForeground3, colorNeutralForegroundDisabled, spacingVerticalL, } from '../theme/design-tokens.js';
|
|
4
4
|
import { display } from '../utils/index.js';
|
|
5
5
|
/** RadioGroup styles
|
|
6
6
|
* @public
|
|
@@ -11,6 +11,7 @@ export const styles = css `
|
|
|
11
11
|
:host {
|
|
12
12
|
-webkit-tap-highlight-color: transparent;
|
|
13
13
|
cursor: pointer;
|
|
14
|
+
gap: ${spacingVerticalL};
|
|
14
15
|
}
|
|
15
16
|
|
|
16
17
|
:host(${disabledState}),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"radio-group.styles.js","sourceRoot":"","sources":["../../../src/radio-group/radio-group.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AACxE,OAAO,EACL,uBAAuB,EACvB,uBAAuB,EACvB,uBAAuB,EACvB,8BAA8B,
|
|
1
|
+
{"version":3,"file":"radio-group.styles.js","sourceRoot":"","sources":["../../../src/radio-group/radio-group.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AACxE,OAAO,EACL,uBAAuB,EACvB,uBAAuB,EACvB,uBAAuB,EACvB,8BAA8B,EAC9B,gBAAgB,GACjB,MAAM,2BAA2B,CAAC;AACnC,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAE5C;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,OAAO,CAAC,MAAM,CAAC;;;;;WAKR,gBAAgB;;;UAGjB,aAAa;;;;;;;;;;;aAWV,uBAAuB;;;;aAIvB,uBAAuB;;;;aAIvB,uBAAuB;;;cAGtB,aAAa;aACd,8BAA8B;;;cAG7B,YAAY;aACb,uBAAuB;;CAEnC,CAAC"}
|
package/dist/web-components.d.ts
CHANGED
|
@@ -4827,6 +4827,23 @@ export declare class Drawer extends FASTElement {
|
|
|
4827
4827
|
clickHandler(event: Event): boolean;
|
|
4828
4828
|
}
|
|
4829
4829
|
|
|
4830
|
+
/**
|
|
4831
|
+
* A DrawerBody component to layout drawer content
|
|
4832
|
+
* @extends FASTElement
|
|
4833
|
+
*
|
|
4834
|
+
* @slot title - The title slot
|
|
4835
|
+
* @slot close - The close button slot
|
|
4836
|
+
* @slot - The default content slot
|
|
4837
|
+
* @slot footer - The footer slot
|
|
4838
|
+
*
|
|
4839
|
+
* @csspart header - The header part of the drawer
|
|
4840
|
+
* @csspart content - The content part of the drawer
|
|
4841
|
+
* @csspart footer - The footer part of the drawer
|
|
4842
|
+
*
|
|
4843
|
+
* @summary A component that provides a drawer body for displaying content in a side panel.
|
|
4844
|
+
*
|
|
4845
|
+
* @tag fluent-drawer-body
|
|
4846
|
+
*/
|
|
4830
4847
|
export declare class DrawerBody extends FASTElement {
|
|
4831
4848
|
}
|
|
4832
4849
|
|
package/dist/web-components.js
CHANGED
|
@@ -6744,7 +6744,7 @@ const hasMessageState = css.partial`:is([state--has-message], :state(has-message
|
|
|
6744
6744
|
const styles$k = css`
|
|
6745
6745
|
${display("inline-grid")}
|
|
6746
6746
|
|
|
6747
|
-
:host{color:${colorNeutralForeground1};align-items:center;gap:0 ${spacingHorizontalM};justify-items:start;
|
|
6747
|
+
:host{color:${colorNeutralForeground1};align-items:center;gap:0 ${spacingHorizontalM};justify-items:start;position:relative}:has([slot='message']){color:${colorNeutralForeground1};row-gap:${spacingVerticalS}}:not(::slotted([slot='label'])){gap:0}:host([label-position='before']){grid-template-areas:'label input' 'label message'}:host([label-position='after']){gap:0;grid-template-areas:'input label' 'message message';grid-template-columns:auto 1fr}:host([label-position='after']) ::slotted([slot='input']){margin-inline-end:${spacingHorizontalM}}:host([label-position='above']){grid-template-areas:'label' 'input' 'message';row-gap:${spacingVerticalXXS}}:host([label-position='below']){grid-template-areas:'input' 'label' 'message';justify-items:center}:host([label-position='below']) ::slotted([slot='label']){margin-block-start:${spacingVerticalM}}:host([label-position='below']:not(${hasMessageState})){grid-template-areas:'input' 'label'}::slotted([slot='label'])::after{content:'';display:block;position:absolute;inset:0}::slotted([slot='input']){grid-area:input;position:relative;z-index:1}::slotted([slot='message']){margin-block-start:${spacingVerticalXXS};grid-area:message}:host(${focusVisibleState}:focus-within){border-radius:${borderRadiusMedium};outline:${strokeWidthThick} solid ${colorStrokeFocus2}}::slotted(label),::slotted([slot='label']){cursor:inherit;display:inline-flex;font-family:${fontFamilyBase};font-size:${fontSizeBase300};font-weight:${fontWeightRegular};grid-area:label;line-height:${lineHeightBase300};user-select:none}:host([size='small']) ::slotted(label){font-size:${fontSizeBase200};line-height:${lineHeightBase200}}:host([size='large']) ::slotted(label){font-size:${fontSizeBase400};line-height:${lineHeightBase400}}:host([size='large']) ::slotted(label),:host([weight='semibold']) ::slotted(label){font-weight:${fontWeightSemibold}}:host(${disabledState}){cursor:default}::slotted([flag]){display:none}:host(${badInputState}) ::slotted([flag='${ValidationFlags.badInput}']),:host(${customErrorState}) ::slotted([flag='${ValidationFlags.customError}']),:host(${patternMismatchState}) ::slotted([flag='${ValidationFlags.patternMismatch}']),:host(${rangeOverflowState}) ::slotted([flag='${ValidationFlags.rangeOverflow}']),:host(${rangeUnderflowState}) ::slotted([flag='${ValidationFlags.rangeUnderflow}']),:host(${stepMismatchState}) ::slotted([flag='${ValidationFlags.stepMismatch}']),:host(${tooLongState}) ::slotted([flag='${ValidationFlags.tooLong}']),:host(${tooShortState}) ::slotted([flag='${ValidationFlags.tooShort}']),:host(${typeMismatchState}) ::slotted([flag='${ValidationFlags.typeMismatch}']),:host(${valueMissingState}) ::slotted([flag='${ValidationFlags.valueMissing}']),:host(${validState}) ::slotted([flag='${ValidationFlags.valid}']){display:block}`;
|
|
6748
6748
|
|
|
6749
6749
|
const template$l = html`<template @click="${(x, c) => x.clickHandler(c.event)}" @change="${(x, c) => x.changeHandler(c.event)}" @focusin="${(x, c) => x.focusinHandler(c.event)}" @focusout="${(x, c) => x.focusoutHandler(c.event)}" ${children({
|
|
6750
6750
|
property: "slottedInputs",
|
|
@@ -8605,7 +8605,7 @@ __decorateClass$8([attr({
|
|
|
8605
8605
|
const styles$b = css`
|
|
8606
8606
|
${display("flex")}
|
|
8607
8607
|
|
|
8608
|
-
:host{-webkit-tap-highlight-color:transparent;cursor:pointer}:host(${disabledState}),:host([orientation='vertical']){flex-direction:column;justify-content:flex-start}:host([orientation='horizontal']){flex-direction:row}::slotted(*){color:${colorNeutralForeground3}}::slotted(:hover){color:${colorNeutralForeground2}}::slotted(:active){color:${colorNeutralForeground1}}::slotted(${disabledState}){color:${colorNeutralForegroundDisabled}}::slotted(${checkedState}){color:${colorNeutralForeground1}}`;
|
|
8608
|
+
:host{-webkit-tap-highlight-color:transparent;cursor:pointer;gap:${spacingVerticalL}}:host(${disabledState}),:host([orientation='vertical']){flex-direction:column;justify-content:flex-start}:host([orientation='horizontal']){flex-direction:row}::slotted(*){color:${colorNeutralForeground3}}::slotted(:hover){color:${colorNeutralForeground2}}::slotted(:active){color:${colorNeutralForeground1}}::slotted(${disabledState}){color:${colorNeutralForegroundDisabled}}::slotted(${checkedState}){color:${colorNeutralForeground1}}`;
|
|
8609
8609
|
|
|
8610
8610
|
function radioGroupTemplate() {
|
|
8611
8611
|
return html`<template @disabled="${(x, c) => x.disabledRadioHandler(c.event)}" @change="${(x, c) => x.changeHandler(c.event)}" @click="${(x, c) => x.clickHandler(c.event)}" @focusin="${(x, c) => x.focusinHandler(c.event)}" @focusout="${(x, c) => x.focusoutHandler(c.event)}" @keydown="${(x, c) => x.keydownHandler(c.event)}"><slot @slotchange="${(x, c) => x.slotchangeHandler(c.event)}"></slot></template>`;
|