histoire-dev / histoire-dev/histoire
Don't use Wrapper for rendering controls
- Dominant language
- TypeScript
- Stars
- 3.6k
- Forks
- 212
- PR merge metrics
- No merged PRs in 30d
Description
### Describe the bug
Thank you ver much for the Wrapper feature, that's a great addition and allowed me to remove some hacks I had put in place to style the container. However, it appears the Controls are also wrapped in the wrapper container, adding additional styles there like:

I have added a background colour, border and padding to the Wrapper causing this. If there is a conditional way to ignore some classes for the controls slot, that could also work.
On a side note, there's a small bug in the types. If we try to use the `wrapper` property as shown in the docs:
```ts
props.story.meta?.wrapper
```
give an error:
```
Property 'wrapper' does not exist on type 'StoryMeta'.
```
Same for `variant`. So type-checking fails.
### Reproduction
https://stackblitz.com/edit/histoire-vue3-starter-awaeqh
Please note that the reproduction is crashing my browser in the `npm install` stage, but I assume that would reproduce the issue locally.
### System Info
```shell
System:
OS: Linux 5.15 Ubuntu 22.04.3 LTS 22.04.3 LTS (Jammy Jellyfish)
CPU: (16) x64 13th Gen Intel(R) Core(TM) i5-13500H
Memory: 6.50 GB / 7.58 GB
Container: Yes
Shell: 5.1.16 - /bin/bash
Binaries:
Node: 18.17.1 - ~/.asdf/installs/nodejs/18.17.1/bin/node
npm: 9.6.7 - ~/.asdf/plugins/nodejs/shims/npm
npmPackages:
@histoire/plugin-vue: 0.17.1 => 0.17.1
@vitejs/plugin-vue: 4.3.3 => 4.3.3
histoire: 0.17.0 => 0.17.0
vite: 4.4.9 => 4.4.9
```
### Used Package Manager
npm
### Validations
- [X] Follow our [Code of Conduct](https://github.com/histoire-dev/histoire/blob/main/CODE_OF_CONDUCT.md)
- [X] Read the [Contributing Guidelines](https://github.com/histoire-dev/histoire/blob/main/CONTRIBUTING.md).
- [X] Read the [docs](https://histoire.dev/guide/).
- [X] Check that there isn't [already an issue](https://github.com/histoire-dev/histoire/issues) that reports the same bug to avoid creating a duplicate.
- [X] Check that this is a concrete bug. For Q&A open a [GitHub Discussion](https://github.com/histoire-dev/histoire/discussions).
- [X] The provided reproduction is a [minimal reproducible example](https://stackoverflow.com/help/minimal-reproducible-example) of the bug.
Contributor guide
Research direction
Start with the wrapper and controls rendering behavior, then inspect the StoryMeta type definitions referenced in the report. Use the linked StackBlitz reproduction or the listed Histoire Vue setup to verify that controls are not affected by wrapper styling and that wrapper and variant type-check correctly.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript, vite
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 38/100