@storybook/components 6.4.19 → 6.4.22

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.
@@ -156,7 +156,7 @@ var Detail = _theming.styled.div(function (_ref5) {
156
156
  minWidth: 200,
157
157
  maxWidth: 800,
158
158
  padding: 15,
159
- // Dont remove the mono fontFamily here even if it seem useless, this is used by the browser to calculate the length of a "ch" unit.
159
+ // Don't remove the mono fontFamily here even if it seems useless, this is used by the browser to calculate the length of a "ch" unit.
160
160
  fontFamily: theme.typography.fonts.mono,
161
161
  fontSize: theme.typography.size.s1,
162
162
  // Most custom stylesheet will reset the box-sizing to "border-box" and will break the tooltip.
@@ -76,12 +76,12 @@ A basic table:
76
76
 
77
77
  Let's throw in a crazy table, because why not?
78
78
 
79
- | | [React](app/react) | [React Native](app/react-native) | [Vue](app/vue) | [Angular](app/angular) | [Mithril](app/mithril) | [HTML](app/html) | [Marko](app/marko) | [Svelte](app/svelte) | [Riot](app/riot) | [Ember](app/ember) | [Preact](app/preact) |
80
- | --------------------------------- | :----------------: | :------------------------------: | :------------: | :--------------------: | :--------------------: | :--------------: | :----------------: | :------------------: | :--------------: | :----------------: | :------------------: |
81
- | [a11y](addons/a11y) | + | | + | + | + | + | + | | | + | + |
82
- | [actions](addons/actions) | + | + | + | + | + | + | + | + | + | + | + |
83
- | [backgrounds](addons/backgrounds) | + | \* | + | + | + | + | + | + | + | + | + |
84
- | [centered](addons/centered) | + | | + | + | + | + | | + | | + | + |
79
+ | | [React](app/react) | [React Native](app/react-native) | [Vue](app/vue) | [Angular](app/angular) | [HTML](app/html) | [Svelte](app/svelte) | [Ember](app/ember) | [Preact](app/preact) |
80
+ | --------------------------------- | :----------------: | :------------------------------: | :------------: | :--------------------: | :--------------: | :------------------: | :----------------: | :------------------: |
81
+ | [a11y](addons/a11y) | + | | + | + | + | | + | + |
82
+ | [actions](addons/actions) | + | + | + | + | + | + | + | + |
83
+ | [backgrounds](addons/backgrounds) | + | \* | + | + | + | + | + | + |
84
+ | [centered](addons/centered) | + | | + | + | + | + | + | + |
85
85
 
86
86
  ## Code
87
87
 
@@ -76,12 +76,12 @@ A basic table:
76
76
 
77
77
  Let's throw in a crazy table, because why not?
78
78
 
79
- | | [React](app/react) | [React Native](app/react-native) | [Vue](app/vue) | [Angular](app/angular) | [Mithril](app/mithril) | [HTML](app/html) | [Marko](app/marko) | [Svelte](app/svelte) | [Riot](app/riot) | [Ember](app/ember) | [Preact](app/preact) |
80
- | --------------------------------- | :----------------: | :------------------------------: | :------------: | :--------------------: | :--------------------: | :--------------: | :----------------: | :------------------: | :--------------: | :----------------: | :------------------: |
81
- | [a11y](addons/a11y) | + | | + | + | + | + | + | | | + | + |
82
- | [actions](addons/actions) | + | + | + | + | + | + | + | + | + | + | + |
83
- | [backgrounds](addons/backgrounds) | + | \* | + | + | + | + | + | + | + | + | + |
84
- | [centered](addons/centered) | + | | + | + | + | + | | + | | + | + |
79
+ | | [React](app/react) | [React Native](app/react-native) | [Vue](app/vue) | [Angular](app/angular) | [HTML](app/html) | [Svelte](app/svelte) | [Ember](app/ember) | [Preact](app/preact) |
80
+ | --------------------------------- | :----------------: | :------------------------------: | :------------: | :--------------------: | :--------------: | :------------------: | :----------------: | :------------------: |
81
+ | [a11y](addons/a11y) | + | | + | + | + | | + | + |
82
+ | [actions](addons/actions) | + | + | + | + | + | + | + | + |
83
+ | [backgrounds](addons/backgrounds) | + | \* | + | + | + | + | + | + |
84
+ | [centered](addons/centered) | + | | + | + | + | + | + | + |
85
85
 
86
86
  ## Code
87
87
 
@@ -117,7 +117,11 @@ var FlexSpaced = _theming.styled.div(function (_ref) {
117
117
  }
118
118
  },
119
119
  'input:first-of-type': {
120
- marginLeft: 0
120
+ marginLeft: 0,
121
+ flexGrow: 4
122
+ },
123
+ 'input:last-of-type': {
124
+ flexGrow: 3
121
125
  }
122
126
  };
123
127
  });
@@ -108,7 +108,7 @@ var Detail = styled.div(function (_ref5) {
108
108
  minWidth: 200,
109
109
  maxWidth: 800,
110
110
  padding: 15,
111
- // Dont remove the mono fontFamily here even if it seem useless, this is used by the browser to calculate the length of a "ch" unit.
111
+ // Don't remove the mono fontFamily here even if it seems useless, this is used by the browser to calculate the length of a "ch" unit.
112
112
  fontFamily: theme.typography.fonts.mono,
113
113
  fontSize: theme.typography.size.s1,
114
114
  // Most custom stylesheet will reset the box-sizing to "border-box" and will break the tooltip.
@@ -76,12 +76,12 @@ A basic table:
76
76
 
77
77
  Let's throw in a crazy table, because why not?
78
78
 
79
- | | [React](app/react) | [React Native](app/react-native) | [Vue](app/vue) | [Angular](app/angular) | [Mithril](app/mithril) | [HTML](app/html) | [Marko](app/marko) | [Svelte](app/svelte) | [Riot](app/riot) | [Ember](app/ember) | [Preact](app/preact) |
80
- | --------------------------------- | :----------------: | :------------------------------: | :------------: | :--------------------: | :--------------------: | :--------------: | :----------------: | :------------------: | :--------------: | :----------------: | :------------------: |
81
- | [a11y](addons/a11y) | + | | + | + | + | + | + | | | + | + |
82
- | [actions](addons/actions) | + | + | + | + | + | + | + | + | + | + | + |
83
- | [backgrounds](addons/backgrounds) | + | \* | + | + | + | + | + | + | + | + | + |
84
- | [centered](addons/centered) | + | | + | + | + | + | | + | | + | + |
79
+ | | [React](app/react) | [React Native](app/react-native) | [Vue](app/vue) | [Angular](app/angular) | [HTML](app/html) | [Svelte](app/svelte) | [Ember](app/ember) | [Preact](app/preact) |
80
+ | --------------------------------- | :----------------: | :------------------------------: | :------------: | :--------------------: | :--------------: | :------------------: | :----------------: | :------------------: |
81
+ | [a11y](addons/a11y) | + | | + | + | + | | + | + |
82
+ | [actions](addons/actions) | + | + | + | + | + | + | + | + |
83
+ | [backgrounds](addons/backgrounds) | + | \* | + | + | + | + | + | + |
84
+ | [centered](addons/centered) | + | | + | + | + | + | + | + |
85
85
 
86
86
  ## Code
87
87
 
@@ -76,12 +76,12 @@ A basic table:
76
76
 
77
77
  Let's throw in a crazy table, because why not?
78
78
 
79
- | | [React](app/react) | [React Native](app/react-native) | [Vue](app/vue) | [Angular](app/angular) | [Mithril](app/mithril) | [HTML](app/html) | [Marko](app/marko) | [Svelte](app/svelte) | [Riot](app/riot) | [Ember](app/ember) | [Preact](app/preact) |
80
- | --------------------------------- | :----------------: | :------------------------------: | :------------: | :--------------------: | :--------------------: | :--------------: | :----------------: | :------------------: | :--------------: | :----------------: | :------------------: |
81
- | [a11y](addons/a11y) | + | | + | + | + | + | + | | | + | + |
82
- | [actions](addons/actions) | + | + | + | + | + | + | + | + | + | + | + |
83
- | [backgrounds](addons/backgrounds) | + | \* | + | + | + | + | + | + | + | + | + |
84
- | [centered](addons/centered) | + | | + | + | + | + | | + | | + | + |
79
+ | | [React](app/react) | [React Native](app/react-native) | [Vue](app/vue) | [Angular](app/angular) | [HTML](app/html) | [Svelte](app/svelte) | [Ember](app/ember) | [Preact](app/preact) |
80
+ | --------------------------------- | :----------------: | :------------------------------: | :------------: | :--------------------: | :--------------: | :------------------: | :----------------: | :------------------: |
81
+ | [a11y](addons/a11y) | + | | + | + | + | | + | + |
82
+ | [actions](addons/actions) | + | + | + | + | + | + | + | + |
83
+ | [backgrounds](addons/backgrounds) | + | \* | + | + | + | + | + | + |
84
+ | [centered](addons/centered) | + | | + | + | + | + | + | + |
85
85
 
86
86
  ## Code
87
87
 
@@ -85,7 +85,11 @@ var FlexSpaced = styled.div(function (_ref) {
85
85
  }
86
86
  },
87
87
  'input:first-of-type': {
88
- marginLeft: 0
88
+ marginLeft: 0,
89
+ flexGrow: 4
90
+ },
91
+ 'input:last-of-type': {
92
+ flexGrow: 3
89
93
  }
90
94
  };
91
95
  });
@@ -67,7 +67,7 @@ const Detail = styled.div(({
67
67
  minWidth: 200,
68
68
  maxWidth: 800,
69
69
  padding: 15,
70
- // Dont remove the mono fontFamily here even if it seem useless, this is used by the browser to calculate the length of a "ch" unit.
70
+ // Don't remove the mono fontFamily here even if it seems useless, this is used by the browser to calculate the length of a "ch" unit.
71
71
  fontFamily: theme.typography.fonts.mono,
72
72
  fontSize: theme.typography.size.s1,
73
73
  // Most custom stylesheet will reset the box-sizing to "border-box" and will break the tooltip.
@@ -76,12 +76,12 @@ A basic table:
76
76
 
77
77
  Let's throw in a crazy table, because why not?
78
78
 
79
- | | [React](app/react) | [React Native](app/react-native) | [Vue](app/vue) | [Angular](app/angular) | [Mithril](app/mithril) | [HTML](app/html) | [Marko](app/marko) | [Svelte](app/svelte) | [Riot](app/riot) | [Ember](app/ember) | [Preact](app/preact) |
80
- | --------------------------------- | :----------------: | :------------------------------: | :------------: | :--------------------: | :--------------------: | :--------------: | :----------------: | :------------------: | :--------------: | :----------------: | :------------------: |
81
- | [a11y](addons/a11y) | + | | + | + | + | + | + | | | + | + |
82
- | [actions](addons/actions) | + | + | + | + | + | + | + | + | + | + | + |
83
- | [backgrounds](addons/backgrounds) | + | \* | + | + | + | + | + | + | + | + | + |
84
- | [centered](addons/centered) | + | | + | + | + | + | | + | | + | + |
79
+ | | [React](app/react) | [React Native](app/react-native) | [Vue](app/vue) | [Angular](app/angular) | [HTML](app/html) | [Svelte](app/svelte) | [Ember](app/ember) | [Preact](app/preact) |
80
+ | --------------------------------- | :----------------: | :------------------------------: | :------------: | :--------------------: | :--------------: | :------------------: | :----------------: | :------------------: |
81
+ | [a11y](addons/a11y) | + | | + | + | + | | + | + |
82
+ | [actions](addons/actions) | + | + | + | + | + | + | + | + |
83
+ | [backgrounds](addons/backgrounds) | + | \* | + | + | + | + | + | + |
84
+ | [centered](addons/centered) | + | | + | + | + | + | + | + |
85
85
 
86
86
  ## Code
87
87
 
@@ -76,12 +76,12 @@ A basic table:
76
76
 
77
77
  Let's throw in a crazy table, because why not?
78
78
 
79
- | | [React](app/react) | [React Native](app/react-native) | [Vue](app/vue) | [Angular](app/angular) | [Mithril](app/mithril) | [HTML](app/html) | [Marko](app/marko) | [Svelte](app/svelte) | [Riot](app/riot) | [Ember](app/ember) | [Preact](app/preact) |
80
- | --------------------------------- | :----------------: | :------------------------------: | :------------: | :--------------------: | :--------------------: | :--------------: | :----------------: | :------------------: | :--------------: | :----------------: | :------------------: |
81
- | [a11y](addons/a11y) | + | | + | + | + | + | + | | | + | + |
82
- | [actions](addons/actions) | + | + | + | + | + | + | + | + | + | + | + |
83
- | [backgrounds](addons/backgrounds) | + | \* | + | + | + | + | + | + | + | + | + |
84
- | [centered](addons/centered) | + | | + | + | + | + | | + | | + | + |
79
+ | | [React](app/react) | [React Native](app/react-native) | [Vue](app/vue) | [Angular](app/angular) | [HTML](app/html) | [Svelte](app/svelte) | [Ember](app/ember) | [Preact](app/preact) |
80
+ | --------------------------------- | :----------------: | :------------------------------: | :------------: | :--------------------: | :--------------: | :------------------: | :----------------: | :------------------: |
81
+ | [a11y](addons/a11y) | + | | + | + | + | | + | + |
82
+ | [actions](addons/actions) | + | + | + | + | + | + | + | + |
83
+ | [backgrounds](addons/backgrounds) | + | \* | + | + | + | + | + | + |
84
+ | [centered](addons/centered) | + | | + | + | + | + | + | + |
85
85
 
86
86
  ## Code
87
87
 
@@ -50,7 +50,11 @@ const FlexSpaced = styled.div(({
50
50
  }
51
51
  },
52
52
  'input:first-of-type': {
53
- marginLeft: 0
53
+ marginLeft: 0,
54
+ flexGrow: 4
55
+ },
56
+ 'input:last-of-type': {
57
+ flexGrow: 3
54
58
  }
55
59
  }));
56
60
  export const DateControl = ({
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@storybook/components",
3
- "version": "6.4.19",
3
+ "version": "6.4.22",
4
4
  "description": "Core Storybook Components",
5
5
  "keywords": [
6
6
  "storybook"
@@ -41,9 +41,9 @@
41
41
  },
42
42
  "dependencies": {
43
43
  "@popperjs/core": "^2.6.0",
44
- "@storybook/client-logger": "6.4.19",
44
+ "@storybook/client-logger": "6.4.22",
45
45
  "@storybook/csf": "0.0.2--canary.87bc651.0",
46
- "@storybook/theming": "6.4.19",
46
+ "@storybook/theming": "6.4.22",
47
47
  "@types/color-convert": "^2.0.0",
48
48
  "@types/overlayscrollbars": "^1.12.0",
49
49
  "@types/react-syntax-highlighter": "11.0.5",
@@ -76,6 +76,6 @@
76
76
  "publishConfig": {
77
77
  "access": "public"
78
78
  },
79
- "gitHead": "6a0da15e6413e00b31f14b3accd082ca328e45a2",
79
+ "gitHead": "8dd4fa6ef42f803ec276be18fb78644a827d5b74",
80
80
  "sbmodern": "dist/modern/index.js"
81
81
  }