@fluentui/react-accordion - npm Package Compare versions

Comparing version 9.0.0-alpha.37 to 9.0.0-alpha.38

CHANGELOG.json

@@ -5,3 +5,18 @@ {
     {
-      "date": "Mon, 07 Jun 2021 07:32:24 GMT",
+      "date": "Wed, 09 Jun 2021 07:31:40 GMT",
+      "tag": "@fluentui/react-accordion_v9.0.0-alpha.38",
+      "version": "9.0.0-alpha.38",
+      "comments": {
+        "prerelease": [
+          {
+            "comment": "Adds focus indicator style rule",
+            "author": "[e-mail]",
+            "commit": "b7549f7316c033888edd79fa51a02258275925f2",
+            "package": "@fluentui/react-accordion"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Mon, 07 Jun 2021 07:38:15 GMT",
       "tag": "@fluentui/react-accordion_v9.0.0-alpha.37",
@@ -8,0 +23,0 @@ "version": "9.0.0-alpha.37",

CHANGELOG.md

 # Change Log - @fluentui/react-accordion
 
-This log was last generated on Mon, 07 Jun 2021 07:32:24 GMT and should not be manually modified.
+This log was last generated on Wed, 09 Jun 2021 07:31:40 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.0.0-alpha.38](https://github.com/microsoft/fluentui/tree/@fluentui/react-accordion_v9.0.0-alpha.38)
+
+Wed, 09 Jun 2021 07:31:40 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-accordion_v9.0.0-alpha.37..@fluentui/react-accordion_v9.0.0-alpha.38)
+
+### Changes
+
+- Adds focus indicator style rule ([PR #18419](https://github.com/microsoft/fluentui/pull/18419) by [e-mail])
+
 ## [9.0.0-alpha.37](https://github.com/microsoft/fluentui/tree/@fluentui/react-accordion_v9.0.0-alpha.37)
 
-Mon, 07 Jun 2021 07:32:24 GMT 
+Mon, 07 Jun 2021 07:38:15 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-accordion_v9.0.0-alpha.36..@fluentui/react-accordion_v9.0.0-alpha.37)
@@ -11,0 +20,0 @@

lib-amd/components/AccordionHeader/useAccordionHeaderStyles.js

@@ -1,2 +0,2 @@
-define(["require", "exports", "@fluentui/react-make-styles"], function (require, exports, react_make_styles_1) {
+define(["require", "exports", "@fluentui/react-make-styles", "@fluentui/react-tabster"], function (require, exports, react_make_styles_1, react_tabster_1) {
     "use strict";
@@ -6,2 +6,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
     var useStyles = react_make_styles_1.makeStyles({
+        focusIndicator: react_tabster_1.createFocusIndicatorStyleRule(function (theme) { return ({
+            border: "1px solid " + theme.alias.color.neutral.neutralForeground1,
+            borderRadius: '2px',
+        }); }),
         root: function (theme) { return ({
@@ -20,2 +24,3 @@ color: theme.alias.color.neutral.neutralForeground1,
         button: {
+            border: '1px solid transparent',
             paddingRight: '10px',
@@ -74,3 +79,3 @@ paddingLeft: '10px',
         state.className = react_make_styles_1.mergeClasses(styles.root, state.inline && styles.rootInline, state.context.disabled && styles.rootDisabled, state.className);
-        state.button.className = react_make_styles_1.mergeClasses(styles.button, state.inline && styles.buttonInline, state.size === 'small' && styles.buttonSmall, state.button.className);
+        state.button.className = react_make_styles_1.mergeClasses(styles.button, styles.focusIndicator, state.inline && styles.buttonInline, state.size === 'small' && styles.buttonSmall, state.button.className);
         if (state.expandIcon) {
@@ -77,0 +82,0 @@ state.expandIcon.className = react_make_styles_1.mergeClasses(styles.expandIcon, state.expandIconPosition === 'start' && styles.expandIconStart, state.expandIconPosition === 'end' && styles.expandIconEnd, state.expandIcon.className);

lib-commonjs/components/AccordionHeader/useAccordionHeaderStyles.js

@@ -10,3 +10,21 @@ "use strict";
 
+var react_tabster_1 = /*#__PURE__*/require("@fluentui/react-tabster");
+
 var useStyles = /*#__PURE__*/react_make_styles_1.__styles({
+  focusIndicator: /*#__PURE__*/{
+    "B486eqv": ["i", "f2hkw1w", ".f2hkw1w:focus-visible{outline-style:none;}"],
+    "rkqiyj": ["", "f12vviyd", "[data-keyboard-nav] .f12vviyd:focus{border-top-width:1px;}"],
+    "Bs3nqqt": ["", "f8ccjn4", "[data-keyboard-nav] .f8ccjn4:focus{border-right-width:1px;}", "f1kizmkg", "[data-keyboard-nav] .f1kizmkg:focus{border-left-width:1px;}"],
+    "B4mky7d": ["", "f14ges4w", "[data-keyboard-nav] .f14ges4w:focus{border-bottom-width:1px;}"],
+    "Bviepcv": ["", "f1kizmkg", "[data-keyboard-nav] .f1kizmkg:focus{border-left-width:1px;}", "f8ccjn4", "[data-keyboard-nav] .f8ccjn4:focus{border-right-width:1px;}"],
+    "Bc28wk5": ["", "flnfwa4", "[data-keyboard-nav] .flnfwa4:focus{border-top-style:solid;}"],
+    "w1edd7": ["", "fuav46a", "[data-keyboard-nav] .fuav46a:focus{border-right-style:solid;}", "fcnogh1", "[data-keyboard-nav] .fcnogh1:focus{border-left-style:solid;}"],
+    "Ba8awiv": ["", "f19zilzp", "[data-keyboard-nav] .f19zilzp:focus{border-bottom-style:solid;}"],
+    "I50xcx": ["", "fcnogh1", "[data-keyboard-nav] .fcnogh1:focus{border-left-style:solid;}", "fuav46a", "[data-keyboard-nav] .fuav46a:focus{border-right-style:solid;}"],
+    "Bnmjwt4": ["", "f1kaj407", "[data-keyboard-nav] .f1kaj407:focus{border-top-color:var(--alias-color-neutral-neutralForeground1);}"],
+    "Jopkrh": ["", "f1r5nhpt", "[data-keyboard-nav] .f1r5nhpt:focus{border-right-color:var(--alias-color-neutral-neutralForeground1);}", "f1gdf1la", "[data-keyboard-nav] .f1gdf1la:focus{border-left-color:var(--alias-color-neutral-neutralForeground1);}"],
+    "hhrs2v": ["", "fzjgvwz", "[data-keyboard-nav] .fzjgvwz:focus{border-bottom-color:var(--alias-color-neutral-neutralForeground1);}"],
+    "B7jbng7": ["", "f1gdf1la", "[data-keyboard-nav] .f1gdf1la:focus{border-left-color:var(--alias-color-neutral-neutralForeground1);}", "f1r5nhpt", "[data-keyboard-nav] .f1r5nhpt:focus{border-right-color:var(--alias-color-neutral-neutralForeground1);}"],
+    "Big6zof": ["", "fv1iqnv", "[data-keyboard-nav] .fv1iqnv:focus{border-radius:2px;}"]
+  },
   root: {
@@ -25,2 +43,14 @@ "sj55zd": ["", "f16th3vw", ".f16th3vw{color:var(--alias-color-neutral-neutralForeground1);}"],
   button: {
+    "B4j52fo": ["", "f5ogflp", ".f5ogflp{border-top-width:1px;}"],
+    "Bekrc4i": ["", "f1hqa2wf", ".f1hqa2wf{border-right-width:1px;}", "finvdd3", ".finvdd3{border-left-width:1px;}"],
+    "Bn0qgzm": ["", "f1f09k3d", ".f1f09k3d{border-bottom-width:1px;}"],
+    "ibv6hh": ["", "finvdd3", ".finvdd3{border-left-width:1px;}", "f1hqa2wf", ".f1hqa2wf{border-right-width:1px;}"],
+    "icvyot": ["", "fzkkow9", ".fzkkow9{border-top-style:solid;}"],
+    "vrafjx": ["", "fcdblym", ".fcdblym{border-right-style:solid;}", "fjik90z", ".fjik90z{border-left-style:solid;}"],
+    "oivjwe": ["", "fg706s2", ".fg706s2{border-bottom-style:solid;}"],
+    "wvpqe5": ["", "fjik90z", ".fjik90z{border-left-style:solid;}", "fcdblym", ".fcdblym{border-right-style:solid;}"],
+    "g2u3we": ["", "f1p3nwhy", ".f1p3nwhy{border-top-color:transparent;}"],
+    "h3c5rm": ["", "f11589ue", ".f11589ue{border-right-color:transparent;}", "f1pdflbu", ".f1pdflbu{border-left-color:transparent;}"],
+    "B9xav0g": ["", "f1q5o8ev", ".f1q5o8ev{border-bottom-color:transparent;}"],
+    "zhjwy3": ["", "f1pdflbu", ".f1pdflbu{border-left-color:transparent;}", "f11589ue", ".f11589ue{border-right-color:transparent;}"],
     "z189sj": ["", "f81rol6", ".f81rol6{padding-right:10px;}", "frdkuqy", ".frdkuqy{padding-left:10px;}"],
@@ -81,3 +111,3 @@ "uwmqm3": ["", "frdkuqy", ".frdkuqy{padding-left:10px;}", "f81rol6", ".f81rol6{padding-right:10px;}"],
   state.className = react_make_styles_1.mergeClasses(styles.root, state.inline && styles.rootInline, state.context.disabled && styles.rootDisabled, state.className);
-  state.button.className = react_make_styles_1.mergeClasses(styles.button, state.inline && styles.buttonInline, state.size === 'small' && styles.buttonSmall, state.button.className);
+  state.button.className = react_make_styles_1.mergeClasses(styles.button, styles.focusIndicator, state.inline && styles.buttonInline, state.size === 'small' && styles.buttonSmall, state.button.className);
 
@@ -84,0 +114,0 @@ if (state.expandIcon) {

lib/components/AccordionHeader/useAccordionHeaderStyles.js

 import { __styles, mergeClasses } from '@fluentui/react-make-styles';
+import { createFocusIndicatorStyleRule } from '@fluentui/react-tabster';
 
 var useStyles = /*#__PURE__*/__styles({
+  focusIndicator: /*#__PURE__*/{
+    "B486eqv": ["i", "f2hkw1w", ".f2hkw1w:focus-visible{outline-style:none;}"],
+    "rkqiyj": ["", "f12vviyd", "[data-keyboard-nav] .f12vviyd:focus{border-top-width:1px;}"],
+    "Bs3nqqt": ["", "f8ccjn4", "[data-keyboard-nav] .f8ccjn4:focus{border-right-width:1px;}", "f1kizmkg", "[data-keyboard-nav] .f1kizmkg:focus{border-left-width:1px;}"],
+    "B4mky7d": ["", "f14ges4w", "[data-keyboard-nav] .f14ges4w:focus{border-bottom-width:1px;}"],
+    "Bviepcv": ["", "f1kizmkg", "[data-keyboard-nav] .f1kizmkg:focus{border-left-width:1px;}", "f8ccjn4", "[data-keyboard-nav] .f8ccjn4:focus{border-right-width:1px;}"],
+    "Bc28wk5": ["", "flnfwa4", "[data-keyboard-nav] .flnfwa4:focus{border-top-style:solid;}"],
+    "w1edd7": ["", "fuav46a", "[data-keyboard-nav] .fuav46a:focus{border-right-style:solid;}", "fcnogh1", "[data-keyboard-nav] .fcnogh1:focus{border-left-style:solid;}"],
+    "Ba8awiv": ["", "f19zilzp", "[data-keyboard-nav] .f19zilzp:focus{border-bottom-style:solid;}"],
+    "I50xcx": ["", "fcnogh1", "[data-keyboard-nav] .fcnogh1:focus{border-left-style:solid;}", "fuav46a", "[data-keyboard-nav] .fuav46a:focus{border-right-style:solid;}"],
+    "Bnmjwt4": ["", "f1kaj407", "[data-keyboard-nav] .f1kaj407:focus{border-top-color:var(--alias-color-neutral-neutralForeground1);}"],
+    "Jopkrh": ["", "f1r5nhpt", "[data-keyboard-nav] .f1r5nhpt:focus{border-right-color:var(--alias-color-neutral-neutralForeground1);}", "f1gdf1la", "[data-keyboard-nav] .f1gdf1la:focus{border-left-color:var(--alias-color-neutral-neutralForeground1);}"],
+    "hhrs2v": ["", "fzjgvwz", "[data-keyboard-nav] .fzjgvwz:focus{border-bottom-color:var(--alias-color-neutral-neutralForeground1);}"],
+    "B7jbng7": ["", "f1gdf1la", "[data-keyboard-nav] .f1gdf1la:focus{border-left-color:var(--alias-color-neutral-neutralForeground1);}", "f1r5nhpt", "[data-keyboard-nav] .f1r5nhpt:focus{border-right-color:var(--alias-color-neutral-neutralForeground1);}"],
+    "Big6zof": ["", "fv1iqnv", "[data-keyboard-nav] .fv1iqnv:focus{border-radius:2px;}"]
+  },
   root: {
@@ -17,2 +34,14 @@ "sj55zd": ["", "f16th3vw", ".f16th3vw{color:var(--alias-color-neutral-neutralForeground1);}"],
   button: {
+    "B4j52fo": ["", "f5ogflp", ".f5ogflp{border-top-width:1px;}"],
+    "Bekrc4i": ["", "f1hqa2wf", ".f1hqa2wf{border-right-width:1px;}", "finvdd3", ".finvdd3{border-left-width:1px;}"],
+    "Bn0qgzm": ["", "f1f09k3d", ".f1f09k3d{border-bottom-width:1px;}"],
+    "ibv6hh": ["", "finvdd3", ".finvdd3{border-left-width:1px;}", "f1hqa2wf", ".f1hqa2wf{border-right-width:1px;}"],
+    "icvyot": ["", "fzkkow9", ".fzkkow9{border-top-style:solid;}"],
+    "vrafjx": ["", "fcdblym", ".fcdblym{border-right-style:solid;}", "fjik90z", ".fjik90z{border-left-style:solid;}"],
+    "oivjwe": ["", "fg706s2", ".fg706s2{border-bottom-style:solid;}"],
+    "wvpqe5": ["", "fjik90z", ".fjik90z{border-left-style:solid;}", "fcdblym", ".fcdblym{border-right-style:solid;}"],
+    "g2u3we": ["", "f1p3nwhy", ".f1p3nwhy{border-top-color:transparent;}"],
+    "h3c5rm": ["", "f11589ue", ".f11589ue{border-right-color:transparent;}", "f1pdflbu", ".f1pdflbu{border-left-color:transparent;}"],
+    "B9xav0g": ["", "f1q5o8ev", ".f1q5o8ev{border-bottom-color:transparent;}"],
+    "zhjwy3": ["", "f1pdflbu", ".f1pdflbu{border-left-color:transparent;}", "f11589ue", ".f11589ue{border-right-color:transparent;}"],
     "z189sj": ["", "f81rol6", ".f81rol6{padding-right:10px;}", "frdkuqy", ".frdkuqy{padding-left:10px;}"],
@@ -73,3 +102,3 @@ "uwmqm3": ["", "frdkuqy", ".frdkuqy{padding-left:10px;}", "f81rol6", ".f81rol6{padding-right:10px;}"],
   state.className = mergeClasses(styles.root, state.inline && styles.rootInline, state.context.disabled && styles.rootDisabled, state.className);
-  state.button.className = mergeClasses(styles.button, state.inline && styles.buttonInline, state.size === 'small' && styles.buttonSmall, state.button.className);
+  state.button.className = mergeClasses(styles.button, styles.focusIndicator, state.inline && styles.buttonInline, state.size === 'small' && styles.buttonSmall, state.button.className);
 
@@ -76,0 +105,0 @@ if (state.expandIcon) {

package.json

 {
   "name": "@fluentui/react-accordion",
-  "version": "9.0.0-alpha.37",
+  "version": "9.0.0-alpha.38",
   "description": "Fluent UI accordion component",
@@ -5,0 +5,0 @@ "main": "lib-commonjs/index.js",

No alert changes

Improved metrics

Total package byte prevSize

420583

increased by2.3%

Lines of code

4728

increased by1.68%

No dependency changes