Skip to content

Commit

Permalink
Merge pull request #29055 from storybookjs/jeppe/fix-sidebar-min-width
Browse files Browse the repository at this point in the history 
UI: Fix sidebar not wrapping
  • Loading branch information
@JReinhold
JReinhold committed Sep 6, 2024
2 parents daf6159 + d5d5f68 commit e610404
Show file tree
Hide file tree
Showing 3 changed files with 175 additions and 31 deletions.
2 changes: 1 addition & 1 deletion code/core/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -307,7 +307,7 @@
"@ndelangen/get-tarball": "^3.0.7",
"@popperjs/core": "^2.6.0",
"@radix-ui/react-dialog": "^1.0.5",
"@radix-ui/react-scroll-area": "^1.0.5",
"@radix-ui/react-scroll-area": "1.2.0-rc.7",
"@radix-ui/react-slot": "^1.0.2",
"@storybook/docs-mdx": "4.0.0-next.1",
"@storybook/global": "^5.0.0",
Expand Down
36 changes: 36 additions & 0 deletions code/core/src/manager/components/sidebar/Sidebar.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -143,6 +143,42 @@ export const WithRefs: Story = {
},
};

export const WithRefsNarrow: Story = {
args: {
refs: {
wide: {
...refs.optimized,
title: 'This is a ref with a very long title',
},
},
},
parameters: {
viewport: {
options: {
narrow: {
name: 'narrow',
styles: {
width: '400px',
height: '800px',
},
},
},
},
chromatic: {
modes: {
narrow: {
viewport: 400,
},
},
},
},
globals: {
viewport: {
value: 'narrow',
},
},
};

export const LoadingWithRefs: Story = {
args: {
...Loading.args,
Expand Down
168 changes: 138 additions & 30 deletions code/yarn.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4670,12 +4670,10 @@ __metadata:
languageName: node
linkType: hard

"@radix-ui/number@npm:1.0.1":
version: 1.0.1
resolution: "@radix-ui/number@npm:1.0.1"
dependencies:
"@babel/runtime": "npm:^7.13.10"
checksum: 10c0/42e4870cd14459da6da03e43c7507dc4c807ed787a87bda52912a0d1d6d5013326b697c18c9625fc6a2cf0af2b45d9c86747985b45358fd92ab646b983978e3c
"@radix-ui/number@npm:1.1.0":
version: 1.1.0
resolution: "@radix-ui/number@npm:1.1.0"
checksum: 10c0/a48e34d5ff1484de1b7cf5d7317fefc831d49e96a2229f300fd37b657bd8cfb59c922830c00ec02838ab21de3b299a523474592e4f30882153412ed47edce6a4
languageName: node
linkType: hard

Expand All @@ -4688,6 +4686,13 @@ __metadata:
languageName: node
linkType: hard

"@radix-ui/primitive@npm:1.1.0":
version: 1.1.0
resolution: "@radix-ui/primitive@npm:1.1.0"
checksum: 10c0/1dcc8b5401799416ff8bdb15c7189b4536c193220ad8fd348a48b88f804ee38cec7bd03e2b9641f7da24610e2f61f23a306911ce883af92c4e8c1abac634cb61
languageName: node
linkType: hard

"@radix-ui/react-compose-refs@npm:1.0.1":
version: 1.0.1
resolution: "@radix-ui/react-compose-refs@npm:1.0.1"
Expand All @@ -4703,6 +4708,19 @@ __metadata:
languageName: node
linkType: hard

"@radix-ui/react-compose-refs@npm:1.1.0":
version: 1.1.0
resolution: "@radix-ui/react-compose-refs@npm:1.1.0"
peerDependencies:
"@types/react": "*"
react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
peerDependenciesMeta:
"@types/react":
optional: true
checksum: 10c0/7e18706084397d9458ca3473d8565b10691da06f6499a78edbcc4bd72cde08f62e91120658d17d58c19fc39d6b1dffe0133cc4535c8f5fce470abd478f6107e5
languageName: node
linkType: hard

"@radix-ui/react-context@npm:1.0.1":
version: 1.0.1
resolution: "@radix-ui/react-context@npm:1.0.1"
Expand All @@ -4718,6 +4736,19 @@ __metadata:
languageName: node
linkType: hard

"@radix-ui/react-context@npm:1.1.0":
version: 1.1.0
resolution: "@radix-ui/react-context@npm:1.1.0"
peerDependencies:
"@types/react": "*"
react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
peerDependenciesMeta:
"@types/react":
optional: true
checksum: 10c0/c843980f568cc61b512708863ec84c42a02e0f88359b22ad1c0e290cea3e6d7618eccbd2cd37bd974fadaa7636cbed5bda27553722e61197eb53852eaa34f1bb
languageName: node
linkType: hard

"@radix-ui/react-dialog@npm:^1.0.5":
version: 1.0.5
resolution: "@radix-ui/react-dialog@npm:1.0.5"
Expand Down Expand Up @@ -4751,18 +4782,16 @@ __metadata:
languageName: node
linkType: hard

"@radix-ui/react-direction@npm:1.0.1":
version: 1.0.1
resolution: "@radix-ui/react-direction@npm:1.0.1"
dependencies:
"@babel/runtime": "npm:^7.13.10"
"@radix-ui/react-direction@npm:1.1.0":
version: 1.1.0
resolution: "@radix-ui/react-direction@npm:1.1.0"
peerDependencies:
"@types/react": "*"
react: ^16.8 || ^17.0 || ^18.0
react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
peerDependenciesMeta:
"@types/react":
optional: true
checksum: 10c0/b1a45b4d1d5070ca3b5864b920f6c6210c962bdb519abb62b38b1baef9d06737dc3d8ecdb61860b7504a735235a539652f5977c7299ec021da84e6b0f64d988a
checksum: 10c0/eb07d8cc3ae2388b824e0a11ae0e3b71fb0c49972b506e249cec9f27a5b7ef4305ee668c98b674833c92e842163549a83beb0a197dec1ec65774bdeeb61f932c
languageName: node
linkType: hard

Expand Down Expand Up @@ -4884,6 +4913,26 @@ __metadata:
languageName: node
linkType: hard

"@radix-ui/react-presence@npm:1.1.0":
version: 1.1.0
resolution: "@radix-ui/react-presence@npm:1.1.0"
dependencies:
"@radix-ui/react-compose-refs": "npm:1.1.0"
"@radix-ui/react-use-layout-effect": "npm:1.1.0"
peerDependencies:
"@types/react": "*"
"@types/react-dom": "*"
react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
peerDependenciesMeta:
"@types/react":
optional: true
"@types/react-dom":
optional: true
checksum: 10c0/58acb658b15b72991ad7a234ea90995902c470b3a182aa90ad03145cbbeaa40f211700c444bfa14cf47537cbb6b732e1359bc5396182de839bd680843c11bf31
languageName: node
linkType: hard

"@radix-ui/react-primitive@npm:1.0.3":
version: 1.0.3
resolution: "@radix-ui/react-primitive@npm:1.0.3"
Expand All @@ -4904,31 +4953,49 @@ __metadata:
languageName: node
linkType: hard

"@radix-ui/react-scroll-area@npm:^1.0.5":
version: 1.0.5
resolution: "@radix-ui/react-scroll-area@npm:1.0.5"
"@radix-ui/react-primitive@npm:2.0.0":
version: 2.0.0
resolution: "@radix-ui/react-primitive@npm:2.0.0"
dependencies:
"@babel/runtime": "npm:^7.13.10"
"@radix-ui/number": "npm:1.0.1"
"@radix-ui/primitive": "npm:1.0.1"
"@radix-ui/react-compose-refs": "npm:1.0.1"
"@radix-ui/react-context": "npm:1.0.1"
"@radix-ui/react-direction": "npm:1.0.1"
"@radix-ui/react-presence": "npm:1.0.1"
"@radix-ui/react-primitive": "npm:1.0.3"
"@radix-ui/react-use-callback-ref": "npm:1.0.1"
"@radix-ui/react-use-layout-effect": "npm:1.0.1"
"@radix-ui/react-slot": "npm:1.1.0"
peerDependencies:
"@types/react": "*"
"@types/react-dom": "*"
react: ^16.8 || ^17.0 || ^18.0
react-dom: ^16.8 || ^17.0 || ^18.0
react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
peerDependenciesMeta:
"@types/react":
optional: true
"@types/react-dom":
optional: true
checksum: 10c0/00cb6ca499252ca848c299212ba6976171cea7608b10b3f9a9639d6732dea2df1197ba0d97c001a4fdb29313c3e7fc2a490f6245dd3579617a0ffd85ae964fdd
languageName: node
linkType: hard

"@radix-ui/react-scroll-area@npm:1.2.0-rc.7":
version: 1.2.0-rc.7
resolution: "@radix-ui/react-scroll-area@npm:1.2.0-rc.7"
dependencies:
"@radix-ui/number": "npm:1.1.0"
"@radix-ui/primitive": "npm:1.1.0"
"@radix-ui/react-compose-refs": "npm:1.1.0"
"@radix-ui/react-context": "npm:1.1.0"
"@radix-ui/react-direction": "npm:1.1.0"
"@radix-ui/react-presence": "npm:1.1.0"
"@radix-ui/react-primitive": "npm:2.0.0"
"@radix-ui/react-use-callback-ref": "npm:1.1.0"
"@radix-ui/react-use-layout-effect": "npm:1.1.0"
peerDependencies:
"@types/react": "*"
"@types/react-dom": "*"
react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
peerDependenciesMeta:
"@types/react":
optional: true
"@types/react-dom":
optional: true
checksum: 10c0/a08818aeeb15920a02e708699a8bdc85c26eab0579ab741129b464a799b5d9a04f81810a2d200f1cf4aef03452067770e87b0f81593a689350fcd7e51819e4cb
checksum: 10c0/61bc26101508d9956ed07e7464cd90a37439b9d2fec2c4ee4f4383d10a8e19d34b7be4dafaa04ded05b46a3519168fa5898328bd814fed73da06c1bcbd2b884e
languageName: node
linkType: hard

Expand All @@ -4948,6 +5015,21 @@ __metadata:
languageName: node
linkType: hard

"@radix-ui/react-slot@npm:1.1.0":
version: 1.1.0
resolution: "@radix-ui/react-slot@npm:1.1.0"
dependencies:
"@radix-ui/react-compose-refs": "npm:1.1.0"
peerDependencies:
"@types/react": "*"
react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
peerDependenciesMeta:
"@types/react":
optional: true
checksum: 10c0/a2e8bfb70c440506dd84a1a274f9a8bc433cca37ceae275e53552c9122612e3837744d7fc6f113d6ef1a11491aa914f4add71d76de41cb6d4db72547a8e261ae
languageName: node
linkType: hard

"@radix-ui/react-use-callback-ref@npm:1.0.1":
version: 1.0.1
resolution: "@radix-ui/react-use-callback-ref@npm:1.0.1"
Expand All @@ -4963,6 +5045,19 @@ __metadata:
languageName: node
linkType: hard

"@radix-ui/react-use-callback-ref@npm:1.1.0":
version: 1.1.0
resolution: "@radix-ui/react-use-callback-ref@npm:1.1.0"
peerDependencies:
"@types/react": "*"
react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
peerDependenciesMeta:
"@types/react":
optional: true
checksum: 10c0/e954863f3baa151faf89ac052a5468b42650efca924417470efd1bd254b411a94c69c30de2fdbb90187b38cb984795978e12e30423dc41e4309d93d53b66d819
languageName: node
linkType: hard

"@radix-ui/react-use-controllable-state@npm:1.0.1":
version: 1.0.1
resolution: "@radix-ui/react-use-controllable-state@npm:1.0.1"
Expand Down Expand Up @@ -5010,6 +5105,19 @@ __metadata:
languageName: node
linkType: hard

"@radix-ui/react-use-layout-effect@npm:1.1.0":
version: 1.1.0
resolution: "@radix-ui/react-use-layout-effect@npm:1.1.0"
peerDependencies:
"@types/react": "*"
react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
peerDependenciesMeta:
"@types/react":
optional: true
checksum: 10c0/9bf87ece1845c038ed95863cfccf9d75f557c2400d606343bab0ab3192b9806b9840e6aa0a0333fdf3e83cf9982632852192f3e68d7d8367bc8c788dfdf8e62b
languageName: node
linkType: hard

"@rollup/pluginutils@npm:^5.0.2, @rollup/pluginutils@npm:^5.1.0":
version: 5.1.0
resolution: "@rollup/pluginutils@npm:5.1.0"
Expand Down Expand Up @@ -5915,7 +6023,7 @@ __metadata:
"@ndelangen/get-tarball": "npm:^3.0.7"
"@popperjs/core": "npm:^2.6.0"
"@radix-ui/react-dialog": "npm:^1.0.5"
"@radix-ui/react-scroll-area": "npm:^1.0.5"
"@radix-ui/react-scroll-area": "npm:1.2.0-rc.7"
"@radix-ui/react-slot": "npm:^1.0.2"
"@storybook/csf": "npm:^0.1.11"
"@storybook/docs-mdx": "npm:4.0.0-next.1"
Expand Down

0 comments on commit e610404

Please sign in to comment.