Move copy-field label outside of field (#1845)

Moves `copy-field` label outside of the div that contains the content
This commit is contained in:
Henry Wilkinson 2024-05-31 20:24:09 -04:00 committed by GitHub
parent d42de92d75
commit c2ce96c057
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

View File

@ -55,6 +55,13 @@ export class CopyField extends TailwindElement {
render() { render() {
return html` return html`
<label
class="${clsx(
"mb-1.5 inline-block font-sans text-xs leading-[1.4] text-neutral-800",
!this.label && !this.slottedChildren?.length && tw`hidden`,
)} "
><slot name="label">${this.label}</slot></label
>
<div <div
role="group" role="group"
class=${clsx( class=${clsx(
@ -63,13 +70,6 @@ export class CopyField extends TailwindElement {
this.monostyle && tw`font-monostyle`, this.monostyle && tw`font-monostyle`,
)} )}
> >
<label
class="${clsx(
"mb-1.5 inline-block font-sans text-xs leading-[1.4] text-neutral-800",
!this.label && !this.slottedChildren?.length && tw`hidden`,
)} "
><slot name="label">${this.label}</slot></label
>
<div class="relative inline-flex w-full items-stretch justify-start"> <div class="relative inline-flex w-full items-stretch justify-start">
<slot name="prefix"></slot> <slot name="prefix"></slot>
<span <span