diff --git a/packages/ui/src/elements/ErrorPill/index.css b/packages/ui/src/elements/ErrorPill/index.css index 4e496155835..62248241ebe 100644 --- a/packages/ui/src/elements/ErrorPill/index.css +++ b/packages/ui/src/elements/ErrorPill/index.css @@ -19,15 +19,7 @@ .error-pill--fixed-width { width: var(--spacer-3); - height: var(--spacer-3); - border-radius: var(--radius-full); - position: relative; - } - - .error-pill__count { - letter-spacing: 0.5px; - margin-left: 0.5px; padding: 0; - border-radius: var(--radius-full); + position: relative; } } diff --git a/packages/ui/src/fields/Tabs/Tab/index.css b/packages/ui/src/fields/Tabs/Tab/index.css index 209923aaf33..07d789aacf5 100644 --- a/packages/ui/src/fields/Tabs/Tab/index.css +++ b/packages/ui/src/fields/Tabs/Tab/index.css @@ -1,44 +1,47 @@ @layer payload-default { .tabs-field__tab-button { display: flex; - padding-bottom: 1.25rem; + align-items: center; + justify-content: center; + gap: var(--spacer-1); + padding: var(--spacer-1) var(--spacer-2) var(--spacer-2-5); margin: 0; - margin-inline-end: 1.25rem; cursor: pointer; - opacity: 0.5; position: relative; white-space: nowrap; flex-shrink: 0; - gap: 0.625rem; outline: none; - - &:last-child { - margin: 0; - } + font-family: var(--text-body-medium-font-family); + font-size: var(--text-body-medium-font-size); + font-weight: var(--text-body-medium-font-weight); + line-height: var(--text-body-medium-line-height); + letter-spacing: var(--text-letter-spacing); + color: var(--text-default-secondary); &:after { - content: ' '; + content: ''; position: absolute; - right: 0; + left: var(--spacer-2); + right: var(--spacer-2); bottom: -1px; - left: 0; - height: 1px; - background: var(--text-default); + height: 3px; + background: var(--icon-brand); + border-radius: var(--radius-full); opacity: 0; + z-index: 1; } &:hover { - opacity: 0.75; - &:after { - opacity: 0.2; + background: var(--bg-default-tertiary); + opacity: 1; } } &:focus-visible { - border: 1px solid var(--border-selected-strong); - border-radius: var(--radius-medium, 0.3125rem); - background: var(--bg-default-secondary); + outline: 1px solid var(--border-selected-default); + outline-offset: -1px; + border-radius: var(--radius-medium); } } @@ -47,34 +50,35 @@ } .tabs-field__tab-button--active { - opacity: 1 !important; + font-weight: var(--text-body-medium-strong-font-weight); + color: var(--text-default-default); &:after { - opacity: 1 !important; - height: 2px; + background: var(--icon-brand); + opacity: 1; } - } - .tabs-field__tab-button__description { - margin-bottom: var(--spacer-2); + &:hover:after { + background: var(--icon-brand); + } } .tabs-field__tab-button--has-error { color: var(--text-danger-default); &:after { - background: var(--text-danger-default); + background: var(--border-danger-strong); + opacity: 1; + } + + &:hover:after { + background: var(--border-danger-strong); } } @media (max-width: 768px) { .tabs-field__tab-button { - margin: 0 0.9375rem 0 0; - padding-bottom: 0.625rem; - - &:last-child { - margin: 0; - } + padding-bottom: var(--spacer-2); } } } diff --git a/packages/ui/src/fields/Tabs/index.css b/packages/ui/src/fields/Tabs/index.css index 01cbad7d0ed..7d913c60013 100644 --- a/packages/ui/src/fields/Tabs/index.css +++ b/packages/ui/src/fields/Tabs/index.css @@ -1,6 +1,6 @@ @layer payload-default { .tabs-field { - margin-top: 2.5rem; + margin-top: var(--spacer-6); margin-left: calc(var(--gutter-h) * -1); margin-right: calc(var(--gutter-h) * -1); } @@ -15,11 +15,11 @@ } .tabs-field--within-collapsible { - margin: 0 calc(1.25rem * -1); + margin: 0 calc(var(--spacer-4) * -1); .tabs-field__content-wrap { - padding-left: 1.25rem; - padding-right: 1.25rem; + padding-left: var(--spacer-4); + padding-right: var(--spacer-4); } .tabs-field__tabs { @@ -27,7 +27,7 @@ &:after { content: ' '; display: block; - width: 1.25rem; + width: var(--spacer-4); } } } @@ -35,14 +35,27 @@ .tabs-field__tabs-wrap { overflow-x: auto; overflow-y: hidden; - margin-bottom: 1.25rem; + margin-bottom: var(--spacer-2-5); + position: relative; + padding-bottom: 2px; + + &:after { + content: ''; + position: absolute; + bottom: 2px; + left: 0; + right: 0; + height: 1px; + background: var(--border-default-default); + } } .tabs-field__tabs { - border-bottom: 1px solid var(--border-subtle); display: inline-flex; min-width: 100%; vertical-align: bottom; + position: relative; + z-index: 1; &:before, &:after { diff --git a/test/v4/collections/Tabs/index.ts b/test/v4/collections/Tabs/index.ts index 2ccd66f621f..5e0f778c3ec 100644 --- a/test/v4/collections/Tabs/index.ts +++ b/test/v4/collections/Tabs/index.ts @@ -33,6 +33,7 @@ const TabsFields: CollectionConfig = { name: 'featuredImage', type: 'text', label: 'Featured Image', + required: true, }, ], }, @@ -51,6 +52,97 @@ const TabsFields: CollectionConfig = { }, ], }, + { + label: 'Settings', + fields: [ + { + name: 'publishedAt', + type: 'date', + label: 'Published At', + }, + ], + }, + { + label: 'Analytics', + fields: [ + { + name: 'viewCount', + type: 'number', + label: 'View Count', + }, + ], + }, + { + label: 'Categories', + fields: [ + { + name: 'category', + type: 'text', + label: 'Category', + }, + ], + }, + { + label: 'Author Info', + fields: [ + { + name: 'authorName', + type: 'text', + label: 'Author Name', + }, + ], + }, + { + label: 'Related Posts', + fields: [ + { + name: 'relatedPosts', + type: 'text', + label: 'Related Posts', + }, + ], + }, + { + label: 'Comments', + fields: [ + { + name: 'commentsEnabled', + type: 'checkbox', + label: 'Comments Enabled', + }, + ], + }, + { + label: 'Social Sharing', + fields: [ + { + name: 'socialImage', + type: 'text', + label: 'Social Image', + }, + ], + }, + { + label: 'Advanced Options', + fields: [ + { + name: 'customCSS', + type: 'textarea', + label: 'Custom CSS', + }, + ], + }, + { + label: 'Permissions', + fields: [ + { + name: 'visibility', + type: 'select', + label: 'Visibility', + options: ['public', 'private', 'draft'], + }, + ], + }, ], }, ],