@fluentui/react-tabs 9.0.0-rc.3 → 9.0.0-rc.4

package/CHANGELOG.json

@@ -2,7 +2,36 @@
   "name": "@fluentui/react-tabs",
   "entries": [
     {
-      "date": "Mon, 23 May 2022 18:54:54 GMT",
+      "date": "Thu, 26 May 2022 21:00:06 GMT",
+      "tag": "@fluentui/react-tabs_v9.0.0-rc.4",
+      "version": "9.0.0-rc.4",
+      "comments": {
+        "none": [
+          {
+            "author": "olfedias@microsoft.com",
+            "package": "@fluentui/react-tabs",
+            "commit": "7bd33dbd7ddfc579e288c8081b8921be8cf421c5",
+            "comment": "improve formatting in stories"
+          }
+        ],
+        "prerelease": [
+          {
+            "author": "gcox@microsoft.com",
+            "package": "@fluentui/react-tabs",
+            "commit": "2062c540d7ec78d424593cb18b0834e511dbc196",
+            "comment": "Update README.md"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tabs",
+            "comment": "Bump @fluentui/react-tabster to v9.0.0-rc.12",
+            "commit": "3cf55ce998048554bf6a550de44403843ea8ede0"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Mon, 23 May 2022 18:56:49 GMT",
       "tag": "@fluentui/react-tabs_v9.0.0-rc.3",
       "version": "9.0.0-rc.3",
       "comments": {

package/CHANGELOG.md

@@ -1,12 +1,22 @@
 # Change Log - @fluentui/react-tabs
 
-This log was last generated on Mon, 23 May 2022 18:54:54 GMT and should not be manually modified.
+This log was last generated on Thu, 26 May 2022 21:00:06 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.0.0-rc.4](https://github.com/microsoft/fluentui/tree/@fluentui/react-tabs_v9.0.0-rc.4)
+
+Thu, 26 May 2022 21:00:06 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tabs_v9.0.0-rc.3..@fluentui/react-tabs_v9.0.0-rc.4)
+
+### Changes
+
+- Update README.md ([PR #23200](https://github.com/microsoft/fluentui/pull/23200) by gcox@microsoft.com)
+- Bump @fluentui/react-tabster to v9.0.0-rc.12 ([PR #23267](https://github.com/microsoft/fluentui/pull/23267) by beachball)
+
 ## [9.0.0-rc.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-tabs_v9.0.0-rc.3)
 
-Mon, 23 May 2022 18:54:54 GMT 
+Mon, 23 May 2022 18:56:49 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tabs_v9.0.0-rc.2..@fluentui/react-tabs_v9.0.0-rc.3)
 
 ### Changes

package/README.md

@@ -2,4 +2,50 @@
 
 **React Tabs components for [Fluent UI React](https://developer.microsoft.com/en-us/fluentui)**
 
-These are not production-ready components and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release.
+- A `TabList` provides single selection from a list of tabs.
+- When a `Tab` is selected, the content associated with the selected tab is displayed and other content is hidden.
+- A `TabList` has options to control how tabs are displayed:
+  - horizontal or vertical
+  - transparent or subtle appearance
+  - small or medium size tabs
+- Each `Tab` typically contains a text header and often includes an icon.
+
+## Usage
+
+To display tabs, declare a `TabList` with a list of `Tab` components as children.
+
+Text is typically used within each tab, but you can place any content you like.
+You can add an icon to a tab through the `icon` property.
+
+Each `Tab` requires a unique `value`.
+The value is passed as part of the data parameter when a tab is clicked and the `onTabSelect` event is raised.
+The `selectedValue` property allows you to control the selected tab.
+
+```tsx
+import { SelectTabData, SelectTabEvent, TabList, Tab } from '@fluentui/react-components';
+import { CalendarMonthRegular } from '@fluentui/react-icons';
+
+export const TabExample = () => {
+  const [selectedValue, setSelectedValue] = React.useState<TabValue>('conditions');
+
+  const onTabSelect = (event: SelectTabEvent, data: SelectTabData) => {
+    console.log(`The ${data.value} tab was selected`);
+    setSelectedValue(data.value);
+  };
+
+  return (
+    <TabList selectedValue={selectedValue} onTabSelect={onTabSelect}>
+      <Tab value="tab1">First Tab</Tab>
+      <Tab value="tab2" icon={<CalendarMonthRegular />}>
+        Second Tab
+      </Tab>
+      <Tab value="tab3">Third Tab</Tab>
+      <Tab value="tab4">Fourth Tab</Tab>
+    </TabList>
+  );
+};
+```
+
+### More information
+
+See [SPEC.md](./Spec.md) to learn more specifics how the `TabList` and `Tab` were built.

package/lib/components/Tab/useTabStyles.js

@@ -126,7 +126,7 @@ const useRootStyles = /*#__PURE__*/__styles({
 
 const useFocusStyles = /*#__PURE__*/__styles({
   "base": {
-    "B486eqv": "f2hkw1w",
+    "Brovlpu": "ftqa4ok",
     "Bnmjwt4": "flfsvnh",
     "Jopkrh": ["f1781m5e", "flvaaa9"],
     "hhrs2v": "f50u1b5",
@@ -138,7 +138,7 @@ const useFocusStyles = /*#__PURE__*/__styles({
     "Bgwpjed": "fpt6wn7"
   }
 }, {
-  "i": [".f2hkw1w:focus-visible{outline-style:none;}"],
+  "f": [".ftqa4ok:focus{outline-style:none;}"],
   "d": ["[data-keyboard-nav] .flfsvnh:focus{border-top-color:transparent;}", "[data-keyboard-nav] .f1781m5e:focus{border-right-color:transparent;}", "[data-keyboard-nav] .flvaaa9:focus{border-left-color:transparent;}", "[data-keyboard-nav] .f50u1b5:focus{border-bottom-color:transparent;}", "[data-keyboard-nav] .fgeg2qa:focus{outline-width:var(--strokeWidthThick);}", "[data-keyboard-nav] .f19j8a82:focus{outline-color:transparent;}", "[data-keyboard-nav] .fhcq1yo:focus{outline-style:solid;}", "[data-keyboard-nav] .f1gkya50:focus{box-shadow:var(--shadow4),0 0 0 var(--strokeWidthThick) var(--colorStrokeFocus2);}", "[data-keyboard-nav] .fpt6wn7:focus{z-index:1;}"]
 });
 /** Indicator styles for when pending selection */

package/lib-commonjs/components/Tab/useTabStyles.js

@@ -137,7 +137,7 @@ const useRootStyles = /*#__PURE__*/react_1.__styles({
 
 const useFocusStyles = /*#__PURE__*/react_1.__styles({
   "base": {
-    "B486eqv": "f2hkw1w",
+    "Brovlpu": "ftqa4ok",
     "Bnmjwt4": "flfsvnh",
     "Jopkrh": ["f1781m5e", "flvaaa9"],
     "hhrs2v": "f50u1b5",
@@ -149,7 +149,7 @@ const useFocusStyles = /*#__PURE__*/react_1.__styles({
     "Bgwpjed": "fpt6wn7"
   }
 }, {
-  "i": [".f2hkw1w:focus-visible{outline-style:none;}"],
+  "f": [".ftqa4ok:focus{outline-style:none;}"],
   "d": ["[data-keyboard-nav] .flfsvnh:focus{border-top-color:transparent;}", "[data-keyboard-nav] .f1781m5e:focus{border-right-color:transparent;}", "[data-keyboard-nav] .flvaaa9:focus{border-left-color:transparent;}", "[data-keyboard-nav] .f50u1b5:focus{border-bottom-color:transparent;}", "[data-keyboard-nav] .fgeg2qa:focus{outline-width:var(--strokeWidthThick);}", "[data-keyboard-nav] .f19j8a82:focus{outline-color:transparent;}", "[data-keyboard-nav] .fhcq1yo:focus{outline-style:solid;}", "[data-keyboard-nav] .f1gkya50:focus{box-shadow:var(--shadow4),0 0 0 var(--strokeWidthThick) var(--colorStrokeFocus2);}", "[data-keyboard-nav] .fpt6wn7:focus{z-index:1;}"]
 });
 /** Indicator styles for when pending selection */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-tabs",
-  "version": "9.0.0-rc.3",
+  "version": "9.0.0-rc.4",
   "description": "Fluent UI React tabs components",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -34,7 +34,7 @@
   "dependencies": {
     "@griffel/react": "1.0.5",
     "@fluentui/react-context-selector": "9.0.0-rc.9",
-    "@fluentui/react-tabster": "9.0.0-rc.11",
+    "@fluentui/react-tabster": "9.0.0-rc.12",
     "@fluentui/react-theme": "9.0.0-rc.9",
     "@fluentui/react-utilities": "9.0.0-rc.9",
     "tslib": "^2.1.0"