histoire-dev / histoire-dev/histoire

Don't use Wrapper for rendering controls

Open
#585 4 comments 4 reactions 0 assignees View on GitHub
to triage
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:

![image](https://github.com/histoire-dev/histoire/assets/11403551/52d546c1-d133-4c93-850f-50aa29a9df62)

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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.