Merge pull request #5562 from storybooks/v5-style-refinements

V5 style refinements
storybookjs · Feb 19, 2019 · 7f8bcf4 · 7f8bcf4
1 parent 6e256da
commit 7f8bcf4
Show file tree

Hide file tree

Showing 54 changed files with 1,641 additions and 4,595 deletions.
diff --git a/addons/a11y/src/components/Tabs.js b/addons/a11y/src/components/Tabs.js
@@ -11,7 +11,7 @@ const Container = styled.div({
 
 const List = styled.div(({ theme }) => ({
   boxShadow: `${theme.appBorderColor} 0 -1px 0 0 inset`,
-  background: '#f8f8fc',
+  background: 'rgba(0,0,0,.05)',
   flexWrap: 'wrap',
   display: 'flex',
 }));

diff --git a/addons/actions/package.json b/addons/actions/package.json
@@ -29,6 +29,7 @@
     "global": "^4.3.2",
     "lodash": "^4.17.11",
     "make-error": "^1.3.5",
+    "polished": "^2.3.3",
     "prop-types": "^15.6.2",
     "react": "^16.8.1",
     "react-inspector": "^2.3.0",

diff --git a/addons/actions/src/components/ActionLogger/style.js b/addons/actions/src/components/ActionLogger/style.js
@@ -1,4 +1,5 @@
 import { styled } from '@storybook/theming';
+import { opacify } from 'polished';
 
 export const Actions = styled.pre({
   flex: 1,
@@ -18,7 +19,7 @@ export const Action = styled.div({
 });
 
 export const Counter = styled.div(({ theme }) => ({
-  backgroundColor: 'rgba(0, 0, 0, 0.5)',
+  backgroundColor: opacify(0.5, theme.appBorderColor),
   color: theme.color.inverseText,
   fontSize: theme.typography.size.s1,
   fontWeight: theme.typography.weight.bold,

diff --git a/addons/knobs/src/components/Panel.js b/addons/knobs/src/components/Panel.js
@@ -177,10 +177,10 @@ export default class KnobPanel extends PureComponent {
             <Link
               href="https://github.com/storybooks/storybook/tree/master/addons/knobs"
               target="_blank"
+              withArrow
             >
               dynamically interact with components
-            </Link>{' '}
-            using knobs.
+            </Link>
           </Fragment>
         </Placeholder>
       );

diff --git a/addons/knobs/src/components/__tests__/__snapshots__/Panel.js.snap b/addons/knobs/src/components/__tests__/__snapshots__/Panel.js.snap
@@ -40,8 +40,8 @@ Array [
 
 .emotion-0 {
   min-width: 100px;
-  min-height: 32px;
-  margin-right: 16px;
+  font-weight: 700;
+  margin-right: 15px;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -135,8 +135,8 @@ Array [
 
 .emotion-0 {
   min-width: 100px;
-  min-height: 32px;
-  margin-right: 16px;
+  font-weight: 700;
+  margin-right: 15px;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;

diff --git a/addons/knobs/src/components/types/Checkboxes.js b/addons/knobs/src/components/types/Checkboxes.js
@@ -2,31 +2,31 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { styled } from '@storybook/theming';
 
+const CheckboxesWrapper = styled.div(({ isInline }) =>
+  isInline
+    ? {
+        display: 'flex',
+        flexWrap: 'wrap',
+        alignItems: 'center',
+        '> * + *': {
+          marginLeft: 10,
+        },
+      }
+    : {}
+);
+
 const CheckboxFieldset = styled.fieldset({
   border: 0,
   padding: 0,
   margin: 0,
 });
 
 const CheckboxLabel = styled.label({
-  fontSize: 11,
-  padding: '5px',
+  padding: '3px 0 3px 5px',
+  lineHeight: '18px',
+  display: 'inline-block',
 });
 
-const flex = ({ isInline }) => {
-  if (isInline) {
-    return {
-      display: 'flex',
-      flexWrap: 'wrap',
-      alignItems: 'center',
-      height: '100%',
-    };
-  }
-  return null;
-};
-
-const FlexWrapper = styled.div(flex);
-
 class CheckboxesType extends Component {
   constructor(props) {
     super(props);
@@ -82,7 +82,7 @@ class CheckboxesType extends Component {
 
     return (
       <CheckboxFieldset>
-        <FlexWrapper isInline={isInline}>{this.renderCheckboxList(knob)}</FlexWrapper>
+        <CheckboxesWrapper isInline={isInline}>{this.renderCheckboxList(knob)}</CheckboxesWrapper>
       </CheckboxFieldset>
     );
   }

diff --git a/addons/knobs/src/components/types/Options.js b/addons/knobs/src/components/types/Options.js
@@ -6,6 +6,8 @@ import { styled } from '@storybook/theming';
 import RadiosType from './Radio';
 import CheckboxesType from './Checkboxes';
 
+// TODO: Apply the Storybook theme to react-select
+
 const OptionsSelect = styled(ReactSelect)({
   width: '100%',
   maxWidth: '300px',

diff --git a/addons/knobs/src/components/types/Radio.js b/addons/knobs/src/components/types/Radio.js
@@ -2,22 +2,23 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { styled } from '@storybook/theming';
 
-const flex = ({ isInline }) => {
-  if (isInline) {
-    return {
-      display: 'flex',
-      flexWrap: 'wrap',
-      alignItems: 'center',
-    };
-  }
-  return null;
-};
-
-const RadiosWrapper = styled.div(flex);
+const RadiosWrapper = styled.div(({ isInline }) =>
+  isInline
+    ? {
+        display: 'flex',
+        flexWrap: 'wrap',
+        alignItems: 'center',
+        '> * + *': {
+          marginLeft: 10,
+        },
+      }
+    : {}
+);
 
 const RadioLabel = styled.label({
-  fontSize: 11,
-  padding: '5px',
+  padding: '3px 0 3px 5px',
+  lineHeight: '18px',
+  display: 'inline-block',
 });
 
 class RadiosType extends Component {