@storybook/components 6.4.0-beta.22 → 6.4.0-beta.23

package/dist/cjs/bar/bar.js

@@ -63,12 +63,14 @@ var Side = _theming.styled.div({
   display: 'flex',
   whiteSpace: 'nowrap',
   flexBasis: 'auto',
-  flexShrink: 0
+  flexShrink: 0,
+  marginLeft: 3,
+  marginRight: 3
 }, function (_ref) {
   var left = _ref.left;
   return left ? {
     '& > *': {
-      marginLeft: 15
+      marginLeft: 4
     }
   } : {};
 }, function (_ref2) {
@@ -76,7 +78,7 @@ var Side = _theming.styled.div({
   return right ? {
     marginLeft: 30,
     '& > *': {
-      marginRight: 15
+      marginRight: 4
     }
   } : {};
 });

package/dist/cjs/bar/button.js

@@ -15,6 +15,10 @@ var _react = _interopRequireDefault(require("react"));
 
 var _theming = require("@storybook/theming");
 
+var _polished = require("polished");
+
+var _core = require("@popperjs/core");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
@@ -84,36 +88,40 @@ var IconButton = (0, _theming.styled)(ButtonOrLink, {
 })(function (_ref4) {
   var theme = _ref4.theme;
   return {
-    display: 'inline-flex',
-    justifyContent: 'center',
     alignItems: 'center',
-    height: 40,
-    background: 'none',
+    background: 'transparent',
+    border: 'none',
+    borderRadius: 4,
     color: 'inherit',
-    padding: 0,
     cursor: 'pointer',
-    // Icon Buttons may have text depending on user preferences.
-    // While we don't recommend having text for IconButtons, this style ensures that the text is the correct size.
-    fontWeight: 'bold',
+    display: 'inline-flex',
     fontSize: 13,
-    border: '0 solid transparent',
-    borderTop: '3px solid transparent',
-    borderBottom: '3px solid transparent',
-    transition: 'color 0.2s linear, border-bottom-color 0.2s linear',
-    '&:hover, &:focus': {
-      outline: '0 none',
+    fontWeight: 'bold',
+    height: 28,
+    justifyContent: 'center',
+    marginTop: 6,
+    padding: '8px 7px',
+    '&:hover, &:focus-visible': {
+      background: (0, _polished.transparentize)(0.88, theme.color.secondary),
       color: theme.color.secondary
     },
+    '&:focus-visible': {
+      outline: _core.auto // Ensures links have the same focus style
+
+    },
+    '&:focus:not(:focus-visible)': {
+      outline: 'none'
+    },
     '& > svg': {
-      width: 15
+      width: 14
     }
   };
 }, function (_ref5) {
   var active = _ref5.active,
       theme = _ref5.theme;
   return active ? {
-    outline: '0 none',
-    borderBottomColor: theme.color.secondary
+    backgroundColor: theme.background.hoverable,
+    color: theme.color.secondary
   } : {};
 });
 exports.IconButton = IconButton;

package/dist/cjs/bar/button.stories.js

@@ -0,0 +1,60 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.WithTextActive = exports.WithText = exports.Active = exports._IconButton = exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _button = require("./button");
+
+var _icon = require("../icon/icon");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _default = {
+  component: _button.IconButton,
+  title: 'Basics/IconButton'
+};
+exports.default = _default;
+
+var _IconButton = function _IconButton() {
+  return /*#__PURE__*/_react.default.createElement(_button.IconButton, null, /*#__PURE__*/_react.default.createElement(_icon.Icons, {
+    icon: "bookmark"
+  }));
+};
+
+exports._IconButton = _IconButton;
+_IconButton.displayName = "_IconButton";
+
+var Active = function Active() {
+  return /*#__PURE__*/_react.default.createElement(_button.IconButton, {
+    active: true
+  }, /*#__PURE__*/_react.default.createElement(_icon.Icons, {
+    icon: "beaker"
+  }));
+};
+
+exports.Active = Active;
+Active.displayName = "Active";
+
+var WithText = function WithText() {
+  return /*#__PURE__*/_react.default.createElement(_button.IconButton, null, /*#__PURE__*/_react.default.createElement(_icon.Icons, {
+    icon: "circlehollow"
+  }), "\xA0Howdy!");
+};
+
+exports.WithText = WithText;
+WithText.displayName = "WithText";
+
+var WithTextActive = function WithTextActive() {
+  return /*#__PURE__*/_react.default.createElement(_button.IconButton, {
+    active: true
+  }, /*#__PURE__*/_react.default.createElement(_icon.Icons, {
+    icon: "circlehollow"
+  }), "\xA0Howdy!");
+};
+
+exports.WithTextActive = WithTextActive;
+WithTextActive.displayName = "WithTextActive";

package/dist/cjs/bar/separator.js

@@ -37,9 +37,11 @@ var Separator = _theming.styled.span(function (_ref) {
   var theme = _ref.theme;
   return {
     width: 1,
-    height: 24,
+    height: 20,
     background: theme.appBorderColor,
-    marginTop: 8
+    marginTop: 10,
+    marginLeft: 6,
+    marginRight: 2
   };
 }, function (_ref2) {
   var force = _ref2.force;

package/dist/cjs/tabs/tabs.js

@@ -99,7 +99,7 @@ var Wrapper = _theming.styled.div(function (_ref) {
 var TabBar = _theming.styled.div({
   overflow: 'hidden',
   '&:first-of-type': {
-    marginLeft: 0
+    marginLeft: -3
   }
 });
 

package/dist/cjs/tooltip/TooltipNote.js

@@ -34,7 +34,7 @@ var Note = _theming.styled.div(function (_ref) {
     whiteSpace: 'nowrap',
     pointerEvents: 'none',
     zIndex: -1,
-    background: 'rgba(0, 0, 0, 0.4)',
+    background: theme.base === 'light' ? 'rgba(60, 60, 60, 0.9)' : 'rgba(20, 20, 20, 0.85)',
     margin: 6
   };
 });

package/dist/esm/bar/bar.js

@@ -33,12 +33,14 @@ var Side = styled.div({
   display: 'flex',
   whiteSpace: 'nowrap',
   flexBasis: 'auto',
-  flexShrink: 0
+  flexShrink: 0,
+  marginLeft: 3,
+  marginRight: 3
 }, function (_ref) {
   var left = _ref.left;
   return left ? {
     '& > *': {
-      marginLeft: 15
+      marginLeft: 4
     }
   } : {};
 }, function (_ref2) {
@@ -46,7 +48,7 @@ var Side = styled.div({
   return right ? {
     marginLeft: 30,
     '& > *': {
-      marginRight: 15
+      marginRight: 4
     }
   } : {};
 });

package/dist/esm/bar/button.js

@@ -10,6 +10,8 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 
 import React from 'react';
 import { styled, isPropValid } from '@storybook/theming';
+import { transparentize } from 'polished';
+import { auto } from '@popperjs/core';
 
 var ButtonOrLink = function ButtonOrLink(_ref) {
   var children = _ref.children,
@@ -71,36 +73,40 @@ export var IconButton = styled(ButtonOrLink, {
 })(function (_ref4) {
   var theme = _ref4.theme;
   return {
-    display: 'inline-flex',
-    justifyContent: 'center',
     alignItems: 'center',
-    height: 40,
-    background: 'none',
+    background: 'transparent',
+    border: 'none',
+    borderRadius: 4,
     color: 'inherit',
-    padding: 0,
     cursor: 'pointer',
-    // Icon Buttons may have text depending on user preferences.
-    // While we don't recommend having text for IconButtons, this style ensures that the text is the correct size.
-    fontWeight: 'bold',
+    display: 'inline-flex',
     fontSize: 13,
-    border: '0 solid transparent',
-    borderTop: '3px solid transparent',
-    borderBottom: '3px solid transparent',
-    transition: 'color 0.2s linear, border-bottom-color 0.2s linear',
-    '&:hover, &:focus': {
-      outline: '0 none',
+    fontWeight: 'bold',
+    height: 28,
+    justifyContent: 'center',
+    marginTop: 6,
+    padding: '8px 7px',
+    '&:hover, &:focus-visible': {
+      background: transparentize(0.88, theme.color.secondary),
       color: theme.color.secondary
     },
+    '&:focus-visible': {
+      outline: auto // Ensures links have the same focus style
+
+    },
+    '&:focus:not(:focus-visible)': {
+      outline: 'none'
+    },
     '& > svg': {
-      width: 15
+      width: 14
     }
   };
 }, function (_ref5) {
   var active = _ref5.active,
       theme = _ref5.theme;
   return active ? {
-    outline: '0 none',
-    borderBottomColor: theme.color.secondary
+    backgroundColor: theme.background.hoverable,
+    color: theme.color.secondary
   } : {};
 });
 IconButton.displayName = 'IconButton';

package/dist/esm/bar/button.stories.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import { IconButton } from './button';
+import { Icons } from '../icon/icon';
+export default {
+  component: IconButton,
+  title: 'Basics/IconButton'
+};
+export var _IconButton = function _IconButton() {
+  return /*#__PURE__*/React.createElement(IconButton, null, /*#__PURE__*/React.createElement(Icons, {
+    icon: "bookmark"
+  }));
+};
+_IconButton.displayName = "_IconButton";
+export var Active = function Active() {
+  return /*#__PURE__*/React.createElement(IconButton, {
+    active: true
+  }, /*#__PURE__*/React.createElement(Icons, {
+    icon: "beaker"
+  }));
+};
+Active.displayName = "Active";
+export var WithText = function WithText() {
+  return /*#__PURE__*/React.createElement(IconButton, null, /*#__PURE__*/React.createElement(Icons, {
+    icon: "circlehollow"
+  }), "\xA0Howdy!");
+};
+WithText.displayName = "WithText";
+export var WithTextActive = function WithTextActive() {
+  return /*#__PURE__*/React.createElement(IconButton, {
+    active: true
+  }, /*#__PURE__*/React.createElement(Icons, {
+    icon: "circlehollow"
+  }), "\xA0Howdy!");
+};
+WithTextActive.displayName = "WithTextActive";

package/dist/esm/bar/separator.js

@@ -4,9 +4,11 @@ export var Separator = styled.span(function (_ref) {
   var theme = _ref.theme;
   return {
     width: 1,
-    height: 24,
+    height: 20,
     background: theme.appBorderColor,
-    marginTop: 8
+    marginTop: 10,
+    marginLeft: 6,
+    marginRight: 2
   };
 }, function (_ref2) {
   var force = _ref2.force;

package/dist/esm/tabs/tabs.js

@@ -65,7 +65,7 @@ var Wrapper = styled.div(function (_ref) {
 export var TabBar = styled.div({
   overflow: 'hidden',
   '&:first-of-type': {
-    marginLeft: 0
+    marginLeft: -3
   }
 });
 var Content = styled.div({

package/dist/esm/tooltip/TooltipNote.js

@@ -20,7 +20,7 @@ var Note = styled.div(function (_ref) {
     whiteSpace: 'nowrap',
     pointerEvents: 'none',
     zIndex: -1,
-    background: 'rgba(0, 0, 0, 0.4)',
+    background: theme.base === 'light' ? 'rgba(60, 60, 60, 0.9)' : 'rgba(20, 20, 20, 0.85)',
     margin: 6
   };
 });

package/dist/modern/bar/bar.js

@@ -7,19 +7,21 @@ const Side = styled.div({
   display: 'flex',
   whiteSpace: 'nowrap',
   flexBasis: 'auto',
-  flexShrink: 0
+  flexShrink: 0,
+  marginLeft: 3,
+  marginRight: 3
 }, ({
   left
 }) => left ? {
   '& > *': {
-    marginLeft: 15
+    marginLeft: 4
   }
 } : {}, ({
   right
 }) => right ? {
   marginLeft: 30,
   '& > *': {
-    marginRight: 15
+    marginRight: 4
   }
 } : {});
 Side.displayName = 'Side';

package/dist/modern/bar/button.js

@@ -4,6 +4,8 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 
 import React from 'react';
 import { styled, isPropValid } from '@storybook/theming';
+import { transparentize } from 'polished';
+import { auto } from '@popperjs/core';
 
 const ButtonOrLink = (_ref) => {
   let {
@@ -65,34 +67,38 @@ export const IconButton = styled(ButtonOrLink, {
 })(({
   theme
 }) => ({
-  display: 'inline-flex',
-  justifyContent: 'center',
   alignItems: 'center',
-  height: 40,
-  background: 'none',
+  background: 'transparent',
+  border: 'none',
+  borderRadius: 4,
   color: 'inherit',
-  padding: 0,
   cursor: 'pointer',
-  // Icon Buttons may have text depending on user preferences.
-  // While we don't recommend having text for IconButtons, this style ensures that the text is the correct size.
-  fontWeight: 'bold',
+  display: 'inline-flex',
   fontSize: 13,
-  border: '0 solid transparent',
-  borderTop: '3px solid transparent',
-  borderBottom: '3px solid transparent',
-  transition: 'color 0.2s linear, border-bottom-color 0.2s linear',
-  '&:hover, &:focus': {
-    outline: '0 none',
+  fontWeight: 'bold',
+  height: 28,
+  justifyContent: 'center',
+  marginTop: 6,
+  padding: '8px 7px',
+  '&:hover, &:focus-visible': {
+    background: transparentize(0.88, theme.color.secondary),
     color: theme.color.secondary
   },
+  '&:focus-visible': {
+    outline: auto // Ensures links have the same focus style
+
+  },
+  '&:focus:not(:focus-visible)': {
+    outline: 'none'
+  },
   '& > svg': {
-    width: 15
+    width: 14
   }
 }), ({
   active,
   theme
 }) => active ? {
-  outline: '0 none',
-  borderBottomColor: theme.color.secondary
+  backgroundColor: theme.background.hoverable,
+  color: theme.color.secondary
 } : {});
 IconButton.displayName = 'IconButton';

package/dist/modern/bar/button.stories.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import { IconButton } from './button';
+import { Icons } from '../icon/icon';
+export default {
+  component: IconButton,
+  title: 'Basics/IconButton'
+};
+export const _IconButton = () => /*#__PURE__*/React.createElement(IconButton, null, /*#__PURE__*/React.createElement(Icons, {
+  icon: "bookmark"
+}));
+_IconButton.displayName = "_IconButton";
+export const Active = () => /*#__PURE__*/React.createElement(IconButton, {
+  active: true
+}, /*#__PURE__*/React.createElement(Icons, {
+  icon: "beaker"
+}));
+Active.displayName = "Active";
+export const WithText = () => /*#__PURE__*/React.createElement(IconButton, null, /*#__PURE__*/React.createElement(Icons, {
+  icon: "circlehollow"
+}), "\xA0Howdy!");
+WithText.displayName = "WithText";
+export const WithTextActive = () => /*#__PURE__*/React.createElement(IconButton, {
+  active: true
+}, /*#__PURE__*/React.createElement(Icons, {
+  icon: "circlehollow"
+}), "\xA0Howdy!");
+WithTextActive.displayName = "WithTextActive";

package/dist/modern/bar/separator.js

@@ -5,9 +5,11 @@ export const Separator = styled.span(({
   theme
 }) => ({
   width: 1,
-  height: 24,
+  height: 20,
   background: theme.appBorderColor,
-  marginTop: 8
+  marginTop: 10,
+  marginLeft: 6,
+  marginRight: 2
 }), ({
   force
 }) => force ? {} : {

package/dist/modern/tabs/tabs.js

@@ -28,7 +28,7 @@ const Wrapper = styled.div(({
 export const TabBar = styled.div({
   overflow: 'hidden',
   '&:first-of-type': {
-    marginLeft: 0
+    marginLeft: -3
   }
 });
 const Content = styled.div({

package/dist/modern/tooltip/TooltipNote.js

@@ -15,7 +15,7 @@ const Note = styled.div(({
   whiteSpace: 'nowrap',
   pointerEvents: 'none',
   zIndex: -1,
-  background: 'rgba(0, 0, 0, 0.4)',
+  background: theme.base === 'light' ? 'rgba(60, 60, 60, 0.9)' : 'rgba(20, 20, 20, 0.85)',
   margin: 6
 }));
 export const TooltipNote = (_ref) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/components",
-  "version": "6.4.0-beta.22",
+  "version": "6.4.0-beta.23",
   "description": "Core Storybook Components",
   "keywords": [
     "storybook"
@@ -41,9 +41,9 @@
   },
   "dependencies": {
     "@popperjs/core": "^2.6.0",
-    "@storybook/client-logger": "6.4.0-beta.22",
+    "@storybook/client-logger": "6.4.0-beta.23",
     "@storybook/csf": "0.0.2--canary.87bc651.0",
-    "@storybook/theming": "6.4.0-beta.22",
+    "@storybook/theming": "6.4.0-beta.23",
     "@types/color-convert": "^2.0.0",
     "@types/overlayscrollbars": "^1.12.0",
     "@types/react-syntax-highlighter": "11.0.5",
@@ -76,6 +76,6 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "680a207c0b7d5daee89633349c7320a3ac29b3c6",
+  "gitHead": "34dd760d275faabff6855b84bb64bb69adc1ec1a",
   "sbmodern": "dist/modern/index.js"
 }