Skip to content

Commit 11d9cee

Browse files
valentinpalkovicvalentinpalkovic
authored
Merge pull request #33148 from storybookjs/version-non-patch-from-10.1.0-beta.2
Release: Prerelease 10.1.0-beta.3
2 parents d940835 + c685197 commit 11d9cee

File tree

26 files changed

+361
-228
lines changed

26 files changed

+361
-228
lines changed

‎CHANGELOG.prerelease.md‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,12 @@
1+
## 10.1.0-beta.3
2+
3+
- A11y: Make search clear button keyboard accessible - [#32590](https://github.com/storybookjs/storybook/pull/32590), thanks @ritoban23!
4+
- Angular: Add preset entry point for framework - [#33154](https://github.com/storybookjs/storybook/pull/33154), thanks @valentinpalkovic!
5+
- CLI: Fix framework config validation path and messages - [#33146](https://github.com/storybookjs/storybook/pull/33146), thanks @valentinpalkovic!
6+
- Manager: Added tokens and a dark color scheme for status colors - [#33081](https://github.com/storybookjs/storybook/pull/33081), thanks @MichaelArestad!
7+
- Remove yarn esbuild pnp plugin - [#33097](https://github.com/storybookjs/storybook/pull/33097), thanks @mrginglymus!
8+
- UI: Increase border contrast of Checkbox, Radio, and Range - [#33064](https://github.com/storybookjs/storybook/pull/33064), thanks @MichaelArestad!
9+
110
## 10.1.0-beta.2
211

312
- Automigration: Update description and link for addon-a11y-addon-test - [#33133](https://github.com/storybookjs/storybook/pull/33133), thanks @valentinpalkovic!

‎code/addons/docs/src/blocks/controls/Range.tsx‎

Lines changed: 100 additions & 120 deletions
Original file line numberDiff line numberDiff line change
@@ -11,148 +11,128 @@ import type { ControlProps, NumberValue, RangeConfig } from './types';
1111
type RangeProps = ControlProps<NumberValue | null> & RangeConfig;
1212

1313
const RangeInput = styled.input<{ min: number; max: number; value: number }>(
14-
({ theme, min, max, value, disabled }) => ({
15-
// Resytled using http://danielstern.ca/range.css/#/
16-
'&': {
17-
width: '100%',
18-
backgroundColor: 'transparent',
19-
appearance: 'none',
20-
},
21-
22-
'&::-webkit-slider-runnable-track': {
23-
background:
24-
theme.base === 'light'
25-
? `linear-gradient(to right,
26-
${theme.color.green} 0%, ${theme.color.green} ${((value - min) / (max - min)) * 100}%,
27-
${darken(0.02, theme.input.background)} ${((value - min) / (max - min)) * 100}%,
28-
${darken(0.02, theme.input.background)} 100%)`
29-
: `linear-gradient(to right,
30-
${theme.color.green} 0%, ${theme.color.green} ${((value - min) / (max - min)) * 100}%,
31-
${lighten(0.02, theme.input.background)} ${((value - min) / (max - min)) * 100}%,
32-
${lighten(0.02, theme.input.background)} 100%)`,
33-
boxShadow: `${theme.appBorderColor} 0 0 0 1px inset`,
14+
({ theme, min, max, value, disabled }) => {
15+
// Shared track background gradient
16+
const trackBackground =
17+
theme.base === 'light'
18+
? `linear-gradient(to right,
19+
${theme.color.green} 0%, ${theme.color.green} ${((value - min) / (max - min)) * 100}%,
20+
${darken(0.02, theme.input.background)} ${((value - min) / (max - min)) * 100}%,
21+
${darken(0.02, theme.input.background)} 100%)`
22+
: `linear-gradient(to right,
23+
${theme.color.green} 0%, ${theme.color.green} ${((value - min) / (max - min)) * 100}%,
24+
${lighten(0.02, theme.input.background)} ${((value - min) / (max - min)) * 100}%,
25+
${lighten(0.02, theme.input.background)} 100%)`;
26+
27+
// Shared track base styles
28+
const trackBaseStyles = {
29+
background: trackBackground,
3430
borderRadius: 6,
35-
width: '100%',
36-
height: 6,
31+
boxShadow: `${theme.base == 'dark' ? 'hsl(0 0 100 / 0.4)' : 'hsl(0 0 0 / 0.44)'} 0 0 0 1px inset`,
3732
cursor: disabled ? 'not-allowed' : 'pointer',
38-
},
33+
height: 6,
34+
width: '100%',
35+
};
36+
37+
const trackFocusStyles = {
38+
borderColor: rgba(theme.color.secondary, 0.4),
39+
};
3940

40-
'&::-webkit-slider-thumb': {
41-
marginTop: '-6px',
41+
// Shared thumb base styles
42+
const thumbBaseStyles = {
4243
width: 16,
4344
height: 16,
44-
45-
border: `1px solid ${theme.appBorderColor}`,
46-
borderRadius: '50px',
47-
boxShadow:
48-
theme.base === 'light' ? `0 1px 3px 0px ${rgba(theme.appBorderColor, 0.2)}` : 'unset',
45+
borderRadius: 50,
4946
cursor: disabled ? 'not-allowed' : 'grab',
50-
appearance: 'none',
5147
background: theme.input.background,
48+
border: `1px solid ${theme.base == 'dark' ? 'hsl(0 0 100 / 0.4)' : 'hsl(0 0 0 / 0.44)'}`,
49+
boxShadow:
50+
theme.base === 'light' ? `0 1px 3px 0px ${rgba(theme.appBorderColor, 0.2)}` : 'unset',
5251
transition: 'all 150ms ease-out',
52+
};
53+
54+
// Shared thumb hover styles
55+
const thumbHoverStyles = {
56+
background: `${darken(0.05, theme.input.background)}`,
57+
transform: 'scale3d(1.1, 1.1, 1.1) translateY(-1px)',
58+
transition: 'all 50ms ease-out',
59+
};
60+
61+
// Shared thumb active styles
62+
const thumbActiveStyles = {
63+
background: `${theme.input.background}`,
64+
transform: 'scale3d(1, 1, 1) translateY(0px)',
65+
};
66+
67+
const thumbFocusStyles = {
68+
borderColor: theme.color.secondary,
69+
boxShadow: theme.base === 'light' ? `0 0px 5px 0px ${theme.color.secondary}` : 'unset',
70+
};
71+
72+
return {
73+
// Restyled using http://danielstern.ca/range.css/#/
74+
appearance: 'none',
75+
backgroundColor: 'transparent',
76+
width: '100%',
5377

54-
'&:hover': {
55-
background: `${darken(0.05, theme.input.background)}`,
56-
transform: 'scale3d(1.1, 1.1, 1.1) translateY(-1px)',
57-
transition: 'all 50ms ease-out',
58-
},
78+
// Track styles
79+
'&::-webkit-slider-runnable-track': trackBaseStyles,
80+
81+
'&::-moz-range-track': trackBaseStyles,
5982

60-
'&:active': {
61-
background: `${theme.input.background}`,
62-
transform: 'scale3d(1, 1, 1) translateY(0px)',
63-
cursor: disabled ? 'not-allowed' : 'grab',
83+
'&::-ms-track': {
84+
...trackBaseStyles,
85+
color: 'transparent',
6486
},
65-
},
6687

67-
'&:focus': {
68-
outline: 'none',
88+
// Thumb styles
89+
'&::-moz-range-thumb': {
90+
...thumbBaseStyles,
6991

70-
'&::-webkit-slider-runnable-track': {
71-
borderColor: rgba(theme.color.secondary, 0.4),
92+
'&:hover': thumbHoverStyles,
93+
'&:active': thumbActiveStyles,
7294
},
7395

7496
'&::-webkit-slider-thumb': {
75-
borderColor: theme.color.secondary,
76-
boxShadow: theme.base === 'light' ? `0 0px 5px 0px ${theme.color.secondary}` : 'unset',
97+
...thumbBaseStyles,
98+
marginTop: '-6px',
99+
appearance: 'none',
100+
101+
'&:hover': thumbHoverStyles,
102+
'&:active': thumbActiveStyles,
77103
},
78-
},
79-
80-
'&::-moz-range-track': {
81-
background:
82-
theme.base === 'light'
83-
? `linear-gradient(to right,
84-
${theme.color.green} 0%, ${theme.color.green} ${((value - min) / (max - min)) * 100}%,
85-
${darken(0.02, theme.input.background)} ${((value - min) / (max - min)) * 100}%,
86-
${darken(0.02, theme.input.background)} 100%)`
87-
: `linear-gradient(to right,
88-
${theme.color.green} 0%, ${theme.color.green} ${((value - min) / (max - min)) * 100}%,
89-
${lighten(0.02, theme.input.background)} ${((value - min) / (max - min)) * 100}%,
90-
${lighten(0.02, theme.input.background)} 100%)`,
91-
boxShadow: `${theme.appBorderColor} 0 0 0 1px inset`,
92-
borderRadius: 6,
93-
width: '100%',
94-
height: 6,
95-
cursor: disabled ? 'not-allowed' : 'pointer',
96-
outline: 'none',
97-
},
98104

99-
'&::-moz-range-thumb': {
100-
width: 16,
101-
height: 16,
102-
border: `1px solid ${theme.appBorderColor}`,
103-
borderRadius: '50px',
104-
boxShadow:
105-
theme.base === 'light' ? `0 1px 3px 0px ${rgba(theme.appBorderColor, 0.2)}` : 'unset',
106-
cursor: disabled ? 'not-allowed' : 'grab',
107-
background: theme.input.background,
108-
transition: 'all 150ms ease-out',
105+
'&::-ms-thumb': {
106+
...thumbBaseStyles,
107+
marginTop: 0,
109108

110-
'&:hover': {
111-
background: `${darken(0.05, theme.input.background)}`,
112-
transform: 'scale3d(1.1, 1.1, 1.1) translateY(-1px)',
113-
transition: 'all 50ms ease-out',
109+
'&:hover': thumbHoverStyles,
110+
'&:active': thumbActiveStyles,
114111
},
115112

116-
'&:active': {
117-
background: `${theme.input.background}`,
118-
transform: 'scale3d(1, 1, 1) translateY(0px)',
119-
cursor: 'grabbing',
113+
'&:focus': {
114+
outline: 'none',
115+
116+
'&::-webkit-slider-runnable-track': trackFocusStyles,
117+
'&::-moz-range-track': trackFocusStyles,
118+
'&::-ms-track': trackFocusStyles,
119+
120+
'&::-webkit-slider-thumb': thumbFocusStyles,
121+
'&::-moz-range-thumb': thumbFocusStyles,
122+
'&::-ms-thumb': thumbFocusStyles,
120123
},
121-
},
122-
'&::-ms-track': {
123-
background:
124-
theme.base === 'light'
125-
? `linear-gradient(to right,
126-
${theme.color.green} 0%, ${theme.color.green} ${((value - min) / (max - min)) * 100}%,
127-
${darken(0.02, theme.input.background)} ${((value - min) / (max - min)) * 100}%,
128-
${darken(0.02, theme.input.background)} 100%)`
129-
: `linear-gradient(to right,
130-
${theme.color.green} 0%, ${theme.color.green} ${((value - min) / (max - min)) * 100}%,
131-
${lighten(0.02, theme.input.background)} ${((value - min) / (max - min)) * 100}%,
132-
${lighten(0.02, theme.input.background)} 100%)`,
133-
boxShadow: theme.base === 'light' ? `${theme.appBorderColor} 0 0 0 1px inset` : 'unset',
134-
color: 'transparent',
135-
width: '100%',
136-
height: '6px',
137-
cursor: 'pointer',
138-
},
139-
'&::-ms-fill-lower': {
140-
borderRadius: 6,
141-
},
142-
'&::-ms-fill-upper': {
143-
borderRadius: 6,
144-
},
145-
'&::-ms-thumb': {
146-
width: 16,
147-
height: 16,
148-
background: theme.input.background,
149-
border: `1px solid ${rgba(theme.appBorderColor, 0.2)}`,
150-
borderRadius: 50,
151-
cursor: disabled ? 'not-allowed' : 'grab',
152-
marginTop: 0,
153-
},
154-
'@supports (-ms-ime-align:auto)': { 'input[type=range]': { margin: '0' } },
155-
})
124+
125+
'&::-ms-fill-lower': {
126+
borderRadius: 6,
127+
},
128+
129+
'&::-ms-fill-upper': {
130+
borderRadius: 6,
131+
},
132+
133+
'@supports (-ms-ime-align:auto)': { 'input[type=range]': { margin: '0' } },
134+
};
135+
}
156136
);
157137

158138
const RangeLabel = styled.span({

‎code/core/package.json‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -261,7 +261,6 @@
261261
"@types/semver": "^7.5.8",
262262
"@types/ws": "^8",
263263
"@vitest/utils": "^3.2.4",
264-
"@yarnpkg/esbuild-plugin-pnp": "^3.0.0-rc.10",
265264
"@yarnpkg/fslib": "2.10.3",
266265
"@yarnpkg/libzip": "2.3.0",
267266
"ansi-to-html": "^0.7.2",

‎code/core/src/builder-manager/index.ts‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,6 @@ import { stringifyProcessEnvs } from 'storybook/internal/common';
44
import { logger } from 'storybook/internal/node-logger';
55

66
import { globalExternals } from '@fal-works/esbuild-plugin-global-externals';
7-
// TODO: Remove in SB11
8-
import { pnpPlugin } from '@yarnpkg/esbuild-plugin-pnp';
97
import { resolveModulePath } from 'exsolve';
108
import { join, parse } from 'pathe';
119
import sirv from 'sirv';
@@ -104,7 +102,7 @@ export const getConfig: ManagerBuilder['getConfig'] = async (options) => {
104102
tsconfig: tsconfigPath,
105103

106104
legalComments: 'external',
107-
plugins: [globalExternals(globalsModuleInfoMap), pnpPlugin()],
105+
plugins: [globalExternals(globalsModuleInfoMap)],
108106

109107
banner: {
110108
js: 'try{',

‎code/core/src/common/utils/validate-config.ts‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import {
66

77
import { resolveModulePath } from 'exsolve';
88

9+
import { extractFrameworkPackageName } from '..';
910
import { frameworkPackages } from './get-storybook-info';
1011

1112
const renderers = ['html', 'preact', 'react', 'server', 'svelte', 'vue', 'vue3', 'web-components'];
@@ -27,7 +28,8 @@ export function validateFrameworkName(
2728
}
2829

2930
// If we know about the framework, we don't need to validate it
30-
if (Object.keys(frameworkPackages).includes(frameworkName)) {
31+
const normalizedFrameworkName = extractFrameworkPackageName(frameworkName);
32+
if (Object.keys(frameworkPackages).includes(normalizedFrameworkName)) {
3133
return;
3234
}
3335

‎code/core/src/components/components/Badge/Badge.tsx‎

Lines changed: 14 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -31,45 +31,37 @@ const BadgeWrapper = styled.div<BadgeProps>(
3131
switch (status) {
3232
case 'critical': {
3333
return {
34-
color: theme.color.critical,
35-
background: theme.background.critical,
34+
color: theme.fgColor.critical,
35+
background: theme.bgColor.critical,
36+
boxShadow: `inset 0 0 0 1px ${theme.borderColor.critical}`,
3637
};
3738
}
3839
case 'negative': {
3940
return {
40-
color: theme.color.negativeText,
41-
background: theme.background.negative,
42-
boxShadow:
43-
theme.base === 'light'
44-
? `inset 0 0 0 1px ${transparentize(0.9, theme.color.negativeText)}`
45-
: 'none',
41+
color: theme.fgColor.negative,
42+
background: theme.bgColor.negative,
43+
boxShadow: `inset 0 0 0 1px ${theme.borderColor.negative}`,
4644
};
4745
}
4846
case 'warning': {
4947
return {
50-
color: theme.color.warningText,
51-
background: theme.background.warning,
52-
boxShadow:
53-
theme.base === 'light'
54-
? `inset 0 0 0 1px ${transparentize(0.9, theme.color.warningText)}`
55-
: 'none',
48+
color: theme.fgColor.warning,
49+
background: theme.bgColor.warning,
50+
boxShadow: `inset 0 0 0 1px ${theme.borderColor.warning}`,
5651
};
5752
}
5853
case 'neutral': {
5954
return {
60-
color: theme.textMutedColor,
61-
background: theme.base === 'light' ? theme.background.app : theme.barBg,
55+
color: theme.fgColor.muted,
56+
background: theme.base === 'dark' ? theme.barBg : theme.background.app,
6257
boxShadow: `inset 0 0 0 1px ${transparentize(0.8, theme.textMutedColor)}`,
6358
};
6459
}
6560
case 'positive': {
6661
return {
67-
color: theme.color.positiveText,
68-
background: theme.background.positive,
69-
boxShadow:
70-
theme.base === 'light'
71-
? `inset 0 0 0 1px ${transparentize(0.9, theme.color.positiveText)}`
72-
: 'none',
62+
color: theme.fgColor.positive,
63+
background: theme.bgColor.positive,
64+
boxShadow: `inset 0 0 0 1px ${theme.borderColor.positive}`,
7365
};
7466
}
7567
case 'active': {

0 commit comments

Comments
 (0)