diff --git a/.vscode/launch.json b/.vscode/launch.json index 688631f7c..37077c2e2 100644 --- a/.vscode/launch.json +++ b/.vscode/launch.json @@ -31,7 +31,7 @@ "env": { "BABEL_ENV": "development" }, - "program": "${workspaceFolder}/test/dev/index.js", + "program": "${workspaceFolder}/test/dev.js", "skipFiles": [ "/**" ], @@ -39,7 +39,7 @@ "--nolazy" ], "args": [ - "e2e/fields" + "fields" ] }, ] diff --git a/src/admin/components/forms/FieldDescription/index.tsx b/src/admin/components/forms/FieldDescription/index.tsx index 0ec54ac76..338d72338 100644 --- a/src/admin/components/forms/FieldDescription/index.tsx +++ b/src/admin/components/forms/FieldDescription/index.tsx @@ -2,8 +2,11 @@ import React from 'react'; import { Props, isComponent } from './types'; import './index.scss'; +const baseClass = 'field-description'; + const FieldDescription: React.FC = (props) => { const { + className, description, value, } = props; @@ -17,7 +20,10 @@ const FieldDescription: React.FC = (props) => { if (description) { return (
{typeof description === 'function' ? description({ value }) : description}
diff --git a/src/admin/components/forms/FieldDescription/types.ts b/src/admin/components/forms/FieldDescription/types.ts index 094537da3..198151626 100644 --- a/src/admin/components/forms/FieldDescription/types.ts +++ b/src/admin/components/forms/FieldDescription/types.ts @@ -9,6 +9,7 @@ export type Description = string | DescriptionFunction | DescriptionComponent export type Props = { description?: Description value?: unknown; + className?: string } export function isComponent(description: Description): description is DescriptionComponent { diff --git a/src/admin/components/forms/field-types/Tabs/index.scss b/src/admin/components/forms/field-types/Tabs/index.scss index e69de29bb..f372c98c4 100644 --- a/src/admin/components/forms/field-types/Tabs/index.scss +++ b/src/admin/components/forms/field-types/Tabs/index.scss @@ -0,0 +1,91 @@ +@import '../../../../scss/styles.scss'; + +.tabs-field { + margin-left: calc(var(--gutter-h) * -1); + margin-right: calc(var(--gutter-h) * -1); + margin-bottom: base(2); + + &__tabs, + &__content-wrap { + padding-left: var(--gutter-h); + padding-right: var(--gutter-h); + } + + &--within-collapsible { + margin-left: calc(#{$baseline} * -1); + margin-right: calc(#{$baseline} * -1); + margin-bottom: 0; + + .tabs-field__tabs, + .tabs-field__content-wrap { + padding-left: $baseline; + padding-right: $baseline; + } + } + + &__tabs { + border-bottom: 1px solid var(--theme-elevation-100); + margin-bottom: $baseline; + } + + &__tab-button { + @extend %btn-reset; + @extend %h4; + padding-bottom: base(.5); + margin: 0 $baseline 0 0; + cursor: pointer; + opacity: .5; + position: relative; + + &:last-child { + margin: 0; + } + + &:after { + content: ' '; + position: absolute; + right: 0; + bottom: -1px; + left: 0; + height: 1px; + background: var(--theme-elevation-800); + opacity: 0; + } + + &:hover { + opacity: .75; + + &:after { + opacity: .2; + } + } + } + + &__tab-button--active { + opacity: 1 !important; + + &:after { + opacity: 1 !important; + height: 2px; + } + } + + &__description { + margin-bottom: $baseline; + } + + @include small-break { + &--within-collapsible { + margin-left: calc(var(--gutter-h) * -1); + margin-right: calc(var(--gutter-h) * -1); + } + + &__tab-button { + margin: 0 base(.75) 0 0; + + &:last-child { + margin: 0; + } + } + } +} diff --git a/src/admin/components/forms/field-types/Tabs/index.tsx b/src/admin/components/forms/field-types/Tabs/index.tsx index 38c019eae..4a5da62b3 100644 --- a/src/admin/components/forms/field-types/Tabs/index.tsx +++ b/src/admin/components/forms/field-types/Tabs/index.tsx @@ -5,6 +5,7 @@ import { Props } from './types'; import { fieldAffectsData } from '../../../../../fields/config/types'; import FieldDescription from '../../FieldDescription'; import toKebabCase from '../../../../../utilities/toKebabCase'; +import { useCollapsible } from '../../../elements/Collapsible/provider'; import './index.scss'; @@ -22,6 +23,7 @@ const TabsField: React.FC = (props) => { }, } = props; + const isWithinCollapsible = useCollapsible(); const [active, setActive] = useState(0); const activeTab = tabs[active]; @@ -30,6 +32,7 @@ const TabsField: React.FC = (props) => {
@@ -38,7 +41,10 @@ const TabsField: React.FC = (props) => {