Are there breaking changes

[odama626]

Are the breaking changes coming from picocss to Yohn/Picocss?

and are these documented?

[Yohn]

There shouldn't be any breaking changes yet in the switch, which is why I stayed in the version 2 tag, but please let me know if you do have any breaking changes happen!

I do plan to document breaking changes, but from what I can recall, I haven't introduced any as of now.

[odama626]

I just noticed that dialog headers with the close button are a breaking change

[Yohn]

What changed about them? Can I see an example, before and after?

[odama626]

before (note I have changed the --pico-border-radius value)

after

here is the markup

<dialog open>
      <article>
        <header>
          <Show when={props.onDismiss}>
            <button aria-label='Close' rel='prev' onClick={props.onDismiss} />
          </Show>
          <p>
            <strong>Sign Guestbook</strong>
          </p>
        </header>
        </article>
        </dialog>

I just realized it happens when I have a form element after the header element

[Yohn]

whats your html look like? include the form tag.

[odama626]

here is one of the shorter ones

    <dialog open={props.open}>
      <article>
        <header>
          <button
            aria-label='Close'
            rel='prev'
            onClick={() => {
              props.setOpen(false);
            }}
          />
          <p>
            <strong>Create a new Group</strong>
          </p>
        </header>
        <form use:formSubmit={submit}>
          <label>
            <p>Name</p>
            <input name='name' placeholder={groupExample()} required use:validate={[groupExists]} />
            {errors.name && <ErrorMessage error={errors.name} />}
          </label>
          {errors.form && <ErrorMessage error={errors.form} />}
          <footer>
            <button type='submit'>Create</button>
          </footer>
        </form>
      </article>
    </dialog>
    ```

[Yohn]

If you could move that <form use:formSubmit={submit}> tag between the article and header, it should be fine.

    <dialog open={props.open}>
      <article>
        <form use:formSubmit={submit}>
          <header>
            <button
              aria-label='Close'
              rel='prev'
              onClick={() => {
                props.setOpen(false);
              }}
            />
            <p>
              <strong>Create a new Group</strong>
            </p>
          </header>
          <label>
            <p>Name</p>
            <input name='name' placeholder={groupExample()} required use:validate={[groupExists]} />
            {errors.name && <ErrorMessage error={errors.name} />}
          </label>
          {errors.form && <ErrorMessage error={errors.form} />}
          <footer>
            <button type='submit'>Create</button>
          </footer>
        </form>
      </article>
    </dialog>

[odama626]

yeah, that worked,

I had just added this locally, but I guess it being a little more rigid for size constraints makes sense

article > form > footer {
  margin-right: calc(var(--pico-block-spacing-horizontal) * -1);
  margin-left: calc(var(--pico-block-spacing-horizontal) * -1);
  padding: calc(var(--pico-block-spacing-vertical) * 0.66) var(--pico-block-spacing-horizontal);
  background-color: var(--pico-card-sectioning-background-color);
}
article > form > header {
  margin-top: calc(var(--pico-block-spacing-vertical) * -1);
  margin-bottom: var(--pico-block-spacing-vertical);
  border-bottom: var(--pico-border-width) solid var(--pico-card-border-color);
  border-top-right-radius: var(--pico-border-radius);
  border-top-left-radius: var(--pico-border-radius);
}
article > form > footer {
  margin-top: var(--pico-block-spacing-vertical);
  margin-bottom: calc(var(--pico-block-spacing-vertical) * -1);
  border-top: var(--pico-border-width) solid var(--pico-card-border-color);
  border-bottom-right-radius: var(--pico-border-radius);
  border-bottom-left-radius: var(--pico-border-radius);
} ```

[odama626]

it looks like I can move to your package now, I just made the form changes and made the commit. I haven't seen any other issues yet

[odama626]

I can't scroll in a form in a dialog

[Yohn]

Can I see how you ended up doing your form in the modal? A codepen would be awesome so I could play with the styling as well. For the CSS cdn you can use this url: https://cdn.jsdelivr.net/gh/Yohn/PicoCSS/css/pico.min.css