@fluentui/web-components 2.1.0 → 2.1.1

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.
Files changed (7) hide show
  1. package/CHANGELOG.json +16 -1
  2. package/CHANGELOG.md +11 -2
  3. package/dist/esm/tabs/tabs.stories.js +56 -2
  4. package/dist/esm/tabs/tabs.styles.js +1 -0
  5. package/dist/web-components.js +1 -1
  6. package/dist/web-components.min.js +1 -1
  7. package/package.json +1 -1
package/CHANGELOG.json CHANGED
@@ -2,7 +2,22 @@
2
2
  "name": "@fluentui/web-components",
3
3
  "entries": [
4
4
  {
5
- "date": "Tue, 23 Nov 2021 07:26:04 GMT",
5
+ "date": "Thu, 02 Dec 2021 07:35:43 GMT",
6
+ "tag": "@fluentui/web-components_v2.1.1",
7
+ "version": "2.1.1",
8
+ "comments": {
9
+ "patch": [
10
+ {
11
+ "author": "jes@microsoft.com",
12
+ "package": "@fluentui/web-components",
13
+ "commit": "a69b283c2eb799c0edc5276d9d1094d1f3d4e4ac",
14
+ "comment": "fix: tabpanel shifting in vertical layout"
15
+ }
16
+ ]
17
+ }
18
+ },
19
+ {
20
+ "date": "Tue, 23 Nov 2021 07:27:34 GMT",
6
21
  "tag": "@fluentui/web-components_v2.1.0",
7
22
  "version": "2.1.0",
8
23
  "comments": {
package/CHANGELOG.md CHANGED
@@ -1,12 +1,21 @@
1
1
  # Change Log - @fluentui/web-components
2
2
 
3
- This log was last generated on Tue, 23 Nov 2021 07:26:04 GMT and should not be manually modified.
3
+ This log was last generated on Thu, 02 Dec 2021 07:35:43 GMT and should not be manually modified.
4
4
 
5
5
  <!-- Start content -->
6
6
 
7
+ ## [2.1.1](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v2.1.1)
8
+
9
+ Thu, 02 Dec 2021 07:35:43 GMT
10
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v2.1.0..@fluentui/web-components_v2.1.1)
11
+
12
+ ### Patches
13
+
14
+ - fix: tabpanel shifting in vertical layout ([PR #20641](https://github.com/microsoft/fluentui/pull/20641) by jes@microsoft.com)
15
+
7
16
  ## [2.1.0](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v2.1.0)
8
17
 
9
- Tue, 23 Nov 2021 07:26:04 GMT
18
+ Tue, 23 Nov 2021 07:27:34 GMT
10
19
  [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v2.0.2..@fluentui/web-components_v2.1.0)
11
20
 
12
21
  ### Minor changes
package/dist/esm/tabs/tabs.stories.js CHANGED
@@ -21,9 +21,63 @@ const TabsTemplate = ({ activeId, activeIndicator, orientation }) => `
21
21
  <fluent-tab id="TabOne">Tab one</fluent-tab>
22
22
  <fluent-tab id="TabTwo">Tab two</fluent-tab>
23
23
  <fluent-tab id="TabThree">Tab three</fluent-tab>
24
- <fluent-tab-panel> Tab one content. This is for testing. </fluent-tab-panel>
24
+ <fluent-tab-panel>
25
+ Tab one content. This is for testing. Tab three content. This is for testing.
26
+ <br />
27
+ Tab one content. This is for testing.
28
+ <br />
29
+ Tab one content. This is for testing.
30
+ <br />
31
+ Tab one content. This is for testing.
32
+ <br />
33
+ Tab one content. This is for testing.
34
+ <br />
35
+ Tab one content. This is for testing.
36
+ <br />
37
+ Tab one content. This is for testing.
38
+ <br />
39
+ Tab one content. This is for testing.
40
+ <br />
41
+ Tab one content. This is for testing.
42
+ <br />
43
+ Tab one content. This is for testing.
44
+ <br />
45
+ Tab one content. This is for testing.
46
+ <br />
47
+ Tab one content. This is for testing.
48
+ <br />
49
+ Tab one content. This is for testing.
50
+ <br />
51
+ </fluent-tab-panel>
25
52
  <fluent-tab-panel> Tab two content. This is for testing. </fluent-tab-panel>
26
- <fluent-tab-panel> Tab three content. This is for testing. </fluent-tab-panel>
53
+ <fluent-tab-panel>
54
+ Tab three content. This is for testing. Tab three content. This is for testing.
55
+ <br />
56
+ Tab three content. This is for testing.
57
+ <br />
58
+ Tab three content. This is for testing.
59
+ <br />
60
+ Tab three content. This is for testing.
61
+ <br />
62
+ Tab three content. This is for testing.
63
+ <br />
64
+ Tab three content. This is for testing.
65
+ <br />
66
+ Tab three content. This is for testing.
67
+ <br />
68
+ Tab three content. This is for testing.
69
+ <br />
70
+ Tab three content. This is for testing.
71
+ <br />
72
+ Tab three content. This is for testing.
73
+ <br />
74
+ Tab three content. This is for testing.
75
+ <br />
76
+ Tab three content. This is for testing.
77
+ <br />
78
+ Tab three content. This is for testing.
79
+ <br />
80
+ </fluent-tab-panel>
27
81
  </fluent-tabs>`;
28
82
  export const Tabs = TabsTemplate.bind({});
29
83
  Tabs.args = {
package/dist/esm/tabs/tabs.styles.js CHANGED
@@ -63,6 +63,7 @@ export const tabsStyles = (context, definition) => css `
63
63
  position: relative;
64
64
  width: max-content;
65
65
  justify-self: end;
66
+ align-self: flex-start;
66
67
  width: 100%;
67
68
  }
68
69
 
package/dist/web-components.js CHANGED
@@ -23648,7 +23648,7 @@ const fluentSwitch = Switch.compose({
23648
23648
  const switchStyles = switchStyles$1;
23649
23649
 
23650
23650
  const tabsStyles$1 = (context, definition) => css`
23651
- ${display('grid')} :host{box-sizing:border-box;font-family:${bodyFont};font-size:${typeRampBaseFontSize};line-height:${typeRampBaseLineHeight};color:${neutralForegroundRest};grid-template-columns:auto 1fr auto;grid-template-rows:auto 1fr}.tablist{display:grid;grid-template-rows:calc(${heightNumber} * 1px);auto;grid-template-columns:auto;position:relative;width:max-content;align-self:end}.start,.end{align-self:center}.activeIndicator{grid-row:2;grid-column:1;width:20px;height:3px;border-radius:calc(${controlCornerRadius} * 1px);justify-self:center;background:${accentFillRest}}.activeIndicatorTransition{transition:transform 0.2s ease-in-out}.tabpanel{grid-row:2;grid-column-start:1;grid-column-end:4;position:relative}:host(.vertical){grid-template-rows:auto 1fr auto;grid-template-columns:auto 1fr}:host(.vertical) .tablist{grid-row-start:2;grid-row-end:2;display:grid;grid-template-rows:auto;grid-template-columns:auto 1fr;position:relative;width:max-content;justify-self:end;width:100%}:host(.vertical) .tabpanel{grid-column:2;grid-row-start:1;grid-row-end:4}:host(.vertical) .end{grid-row:3}:host(.vertical) .activeIndicator{grid-column:1;grid-row:1;width:3px;height:20px;margin-inline-start:calc(${focusStrokeWidth} * 1px);border-radius:calc(${controlCornerRadius} * 1px);align-self:center;background:${accentFillRest}}:host(.vertical) .activeIndicatorTransition{transition:transform 0.2s linear}`.withBehaviors(forcedColorsStylesheetBehavior(css`
23651
+ ${display('grid')} :host{box-sizing:border-box;font-family:${bodyFont};font-size:${typeRampBaseFontSize};line-height:${typeRampBaseLineHeight};color:${neutralForegroundRest};grid-template-columns:auto 1fr auto;grid-template-rows:auto 1fr}.tablist{display:grid;grid-template-rows:calc(${heightNumber} * 1px);auto;grid-template-columns:auto;position:relative;width:max-content;align-self:end}.start,.end{align-self:center}.activeIndicator{grid-row:2;grid-column:1;width:20px;height:3px;border-radius:calc(${controlCornerRadius} * 1px);justify-self:center;background:${accentFillRest}}.activeIndicatorTransition{transition:transform 0.2s ease-in-out}.tabpanel{grid-row:2;grid-column-start:1;grid-column-end:4;position:relative}:host(.vertical){grid-template-rows:auto 1fr auto;grid-template-columns:auto 1fr}:host(.vertical) .tablist{grid-row-start:2;grid-row-end:2;display:grid;grid-template-rows:auto;grid-template-columns:auto 1fr;position:relative;width:max-content;justify-self:end;align-self:flex-start;width:100%}:host(.vertical) .tabpanel{grid-column:2;grid-row-start:1;grid-row-end:4}:host(.vertical) .end{grid-row:3}:host(.vertical) .activeIndicator{grid-column:1;grid-row:1;width:3px;height:20px;margin-inline-start:calc(${focusStrokeWidth} * 1px);border-radius:calc(${controlCornerRadius} * 1px);align-self:center;background:${accentFillRest}}:host(.vertical) .activeIndicatorTransition{transition:transform 0.2s linear}`.withBehaviors(forcedColorsStylesheetBehavior(css`
23652
23652
  .activeIndicator,:host(.vertical) .activeIndicator{background:${SystemColors.Highlight}}`));
23653
23653
 
23654
23654
  const tabStyles$1 = (context, definition) => css`
package/dist/web-components.min.js CHANGED
@@ -148,7 +148,7 @@ ${eo("inline-block")} :host{--calendar-cell-size:calc((${zn} + 2 + ${Pn}) * ${Mn
148
148
  slot[name='switch']{left:0}:host(.checked) slot[name='switch']{left:100%;transform:translateX(-100%)}`,Dt`
149
149
  slot[name='switch']{right:0}:host(.checked) slot[name='switch']{right:100%;transform:translateX(100%)}`),Ji(Dt`
150
150
  :host(:not(.disabled)) .switch slot[name='switch']{forced-color-adjust:none;fill:${Ns.FieldText}}.switch{background:${Ns.Field};border-color:${Ns.FieldText}}:host(.checked) .switch{background:${Ns.Highlight};border-color:${Ns.Highlight}}:host(:not(.disabled):hover) .switch,:host(:not(.disabled):active) .switch,:host(.checked:not(.disabled):hover) .switch{background:${Ns.HighlightText};border-color:${Ns.Highlight}}:host(.checked:not(.disabled)) .switch slot[name="switch"]{fill:${Ns.HighlightText}}:host(.checked:not(.disabled):hover) .switch slot[name='switch']{fill:${Ns.Highlight}}:host(:${io}) .switch{forced-color-adjust:none;background:${Ns.Field};border-color:${Ns.Highlight};box-shadow:0 0 0 1px ${Ns.Highlight},0 0 0 3px ${Ns.FieldText}}:host(.checked:${io}:not(.disabled)) .switch{forced-color-adjust:none;background:${Ns.Highlight};box-shadow:0 0 0 1px ${Ns.Field},0 0 0 3px ${Ns.FieldText};border-color:${Ns.Field}}:host(.disabled){opacity:1}:host(.disabled) slot[name='switch']{forced-color-adjust:none;fill:${Ns.GrayText}}:host(.disabled) .switch{background:${Ns.Field};border-color:${Ns.GrayText}}.status-message,.label{color:${Ns.FieldText}}`)),op=ks.compose({baseName:"switch",template:(t,e)=>nt`<template role="switch" aria-checked="${t=>t.checked}" aria-disabled="${t=>t.disabled}" aria-readonly="${t=>t.readOnly}" tabindex="${t=>t.disabled?null:0}" @keypress="${(t,e)=>t.keypressHandler(e.event)}" @click="${(t,e)=>t.clickHandler(e.event)}" class="${t=>t.checked?"checked":""}"><label part="label" class="${t=>t.defaultSlottedNodes&&t.defaultSlottedNodes.length?"label":"label label__hidden"}"><slot ${Qt("defaultSlottedNodes")}></slot></label><div part="switch" class="switch"><slot name="switch">${e.switch||""}</slot></div><span class="status-message" part="status-message"><span class="checked-message" part="checked-message"><slot name="checked-message"></slot></span><span class="unchecked-message" part="unchecked-message"><slot name="unchecked-message"></slot></span></span></template>`,styles:ip,switch:'\n <svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">\n <rect x="2" y="2" width="12" height="12" rx="6"/>\n </svg>\n '}),sp=ip,np=(t,e)=>Dt`
151
- ${eo("grid")} :host{box-sizing:border-box;font-family:${qn};font-size:${_n};line-height:${Gn};color:${Dl};grid-template-columns:auto 1fr auto;grid-template-rows:auto 1fr}.tablist{display:grid;grid-template-rows:calc(${ah} * 1px);auto;grid-template-columns:auto;position:relative;width:max-content;align-self:end}.start,.end{align-self:center}.activeIndicator{grid-row:2;grid-column:1;width:20px;height:3px;border-radius:calc(${Bn} * 1px);justify-self:center;background:${Ia}}.activeIndicatorTransition{transition:transform 0.2s ease-in-out}.tabpanel{grid-row:2;grid-column-start:1;grid-column-end:4;position:relative}:host(.vertical){grid-template-rows:auto 1fr auto;grid-template-columns:auto 1fr}:host(.vertical) .tablist{grid-row-start:2;grid-row-end:2;display:grid;grid-template-rows:auto;grid-template-columns:auto 1fr;position:relative;width:max-content;justify-self:end;width:100%}:host(.vertical) .tabpanel{grid-column:2;grid-row-start:1;grid-row-end:4}:host(.vertical) .end{grid-row:3}:host(.vertical) .activeIndicator{grid-column:1;grid-row:1;width:3px;height:20px;margin-inline-start:calc(${Un} * 1px);border-radius:calc(${Bn} * 1px);align-self:center;background:${Ia}}:host(.vertical) .activeIndicatorTransition{transition:transform 0.2s linear}`.withBehaviors(Ji(Dt`
151
+ ${eo("grid")} :host{box-sizing:border-box;font-family:${qn};font-size:${_n};line-height:${Gn};color:${Dl};grid-template-columns:auto 1fr auto;grid-template-rows:auto 1fr}.tablist{display:grid;grid-template-rows:calc(${ah} * 1px);auto;grid-template-columns:auto;position:relative;width:max-content;align-self:end}.start,.end{align-self:center}.activeIndicator{grid-row:2;grid-column:1;width:20px;height:3px;border-radius:calc(${Bn} * 1px);justify-self:center;background:${Ia}}.activeIndicatorTransition{transition:transform 0.2s ease-in-out}.tabpanel{grid-row:2;grid-column-start:1;grid-column-end:4;position:relative}:host(.vertical){grid-template-rows:auto 1fr auto;grid-template-columns:auto 1fr}:host(.vertical) .tablist{grid-row-start:2;grid-row-end:2;display:grid;grid-template-rows:auto;grid-template-columns:auto 1fr;position:relative;width:max-content;justify-self:end;align-self:flex-start;width:100%}:host(.vertical) .tabpanel{grid-column:2;grid-row-start:1;grid-row-end:4}:host(.vertical) .end{grid-row:3}:host(.vertical) .activeIndicator{grid-column:1;grid-row:1;width:3px;height:20px;margin-inline-start:calc(${Un} * 1px);border-radius:calc(${Bn} * 1px);align-self:center;background:${Ia}}:host(.vertical) .activeIndicatorTransition{transition:transform 0.2s linear}`.withBehaviors(Ji(Dt`
152
152
  .activeIndicator,:host(.vertical) .activeIndicator{background:${Ns.Highlight}}`)),rp=(t,e)=>Dt`
153
153
  ${eo("inline-flex")} :host{box-sizing:border-box;font-family:${qn};font-size:${_n};font-weight:400;line-height:${Gn};height:calc((${ah} + (${Mn} * 2)) * 1px);padding:0 calc((6 + (${Mn} * 2 * ${Pn})) * 1px);color:${Dl};border-radius:calc(${Bn} * 1px);border:calc(${jn} * 1px) solid transparent;align-items:center;justify-content:center;grid-row:1 / 3;cursor:pointer;outline:none}:host([aria-selected='true']){z-index:2}:host(:hover),:host(:active){color:${Dl}}:host(:${io}){border-color:${ac};box-shadow:0 0 0 calc((${Un} - ${jn}) * 1px) ${ac} inset}:host(.vertical){justify-content:start;grid-column:1 / 3}:host(.vertical[aria-selected='true']){z-index:2}:host(.vertical:hover),:host(.vertical:active){color:${Dl}}:host(.vertical:hover[aria-selected='true']){}`.withBehaviors(Ji(Dt`
154
154
  :host{forced-color-adjust:none;border-color:transparent;color:${Ns.ButtonText};fill:currentcolor}:host(:hover),:host(.vertical:hover),:host([aria-selected='true']:hover){background:transparent;color:${Ns.Highlight};fill:currentcolor}:host([aria-selected='true']){background:transparent;color:${Ns.Highlight};fill:currentcolor}:host(:${io}){background:transparent;border-color:${Ns.ButtonText};box-shadow:none}`)),ap=Fs.compose({baseName:"tab",template:(t,e)=>nt`<template slot="tab" role="tab" aria-disabled="${t=>t.disabled}"><slot></slot></template>`,styles:rp}),lp=rp,cp=(t,e)=>Dt`
package/package.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "name": "@fluentui/web-components",
3
3
  "description": "A library of Fluent Web Components",
4
4
  "sideEffects": false,
5
- "version": "2.1.0",
5
+ "version": "2.1.1",
6
6
  "author": {
7
7
  "name": "Microsoft",
8
8
  "url": "https://discord.gg/FcSNfg4"