Skip to content

Conversation

@nathanfranklin
Copy link
Member

@nathanfranklin nathanfranklin commented Jan 30, 2025

Overview

Add a simple section message storybook story

Related

None

Screenshots

Screenshot 2025-01-30 at 4 57 12 PM

Notes

@wesleyboar , just trying story book out.

Comment on lines +8 to +10
.message {
margin-bottom: 0;
} No newline at end of file
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think this style is not necessary, because the margin-bottom: 0 is already present for <p> (default element) and inherent for <div> (typical alternative element) (screenshot).

Musing on the current Message components styles…

I've long since thought:

  1. Some margin should always be present between multiple messages; perhaps:

    .container + .container:not(p) /* ignore `<p>` cuz it typically has margin */ {
    	margin-top: /* …something, maybe `1rem` */
    }
  2. The default tag should be <div>.
    So use of <p> by client can rely on whatever <p> margin they set (or allow from browser).

Comment on lines +1 to +6
.container {
display: flex;
flex-direction: column;
gap: 1rem;
padding: 1rem;
}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I would not add these styles to the demo, because:

  1. The lack of space between messages shows clients what will happen by default if they stack multiple.
  2. Storybook already adds space to the <body> in the preview window (via .sb-main-padded). If we start doing it for every .container (or .root or whatever the element may be classed), then we give ourselves a chore to remain consistent.

screenshot without these styles

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I love this! Seeing a new story is… indescribably satisfying.

I do notice:

  • the scope option is not working (screenshot)
  • the type option is ineffectual

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants