diff --git a/packages/client/src/app/components/form-controls/delimiter.tsx b/packages/client/src/app/components/form-controls/delimiter.tsx new file mode 100644 index 000000000..c3be2651e --- /dev/null +++ b/packages/client/src/app/components/form-controls/delimiter.tsx @@ -0,0 +1,58 @@ +import React from 'react'; +import type { Delimiter } from '@ff-client/types/properties'; + +type Props = { + delimiter?: Delimiter; +}; + +import { labelText } from '@ff-client/styles/mixins'; +import { shadows } from '@ff-client/styles/variables'; +import styled from 'styled-components'; + +const DelimiterWrapper = styled.div` + position: relative; + min-height: 10px; + + &:before { + content: ''; + position: absolute; + top: 9px; + left: 0; + right: 0; + z-index: 1; + + height: 1px; + margin: 0 var(--margins); + + box-shadow: ${shadows.bottom}; + } + + div { + position: absolute; + left: -5px; + top: 0; + z-index: 2; + + background: var(--background-color); + padding: 0 5px; + + ${labelText}; + font-size: 11px; + + &:empty { + display: none; + } + } +`; + +export const DelimiterElement: React.FC = ({ delimiter }) => { + if (!delimiter) { + return null; + } + + return ( + +
{delimiter.name}
+
+ ); +}; diff --git a/packages/client/src/app/components/form-controls/index.tsx b/packages/client/src/app/components/form-controls/index.tsx index c3a2a7c9b..971a46991 100644 --- a/packages/client/src/app/components/form-controls/index.tsx +++ b/packages/client/src/app/components/form-controls/index.tsx @@ -10,6 +10,7 @@ import type { import { ErrorBoundary } from './boundaries/ErrorBoundary'; import { useVisibility } from './hooks/use-visibility'; +import { DelimiterElement } from './delimiter'; export type UpdateValue = (value: T) => void; @@ -55,6 +56,8 @@ export const FormComponent: React.FC = ({ return ( `}> + + ` background: ${colors.gray050}; overflow-y: auto; + + --background-color: ${colors.gray050}; + --margins: -18px; `; diff --git a/packages/client/src/app/pages/forms/edit/builder/tabs/integrations/property-editor/property-editor.styles.ts b/packages/client/src/app/pages/forms/edit/builder/tabs/integrations/property-editor/property-editor.styles.ts index c6c0999c7..2efdf90f2 100644 --- a/packages/client/src/app/pages/forms/edit/builder/tabs/integrations/property-editor/property-editor.styles.ts +++ b/packages/client/src/app/pages/forms/edit/builder/tabs/integrations/property-editor/property-editor.styles.ts @@ -9,13 +9,16 @@ export const PropertyEditorWrapper = styled.div` flex-direction: column; gap: ${spacings.xl}; - background: ${colors.white}; padding: ${spacings.xl}; + background: ${colors.white}; overflow-y: auto; ${scrollBar}; + --background-color: ${colors.white}; + --margins: -24px; + h1 { padding: 0; margin-top: -11px; diff --git a/packages/client/src/types/properties.ts b/packages/client/src/types/properties.ts index 10d53de50..1ded7c5dd 100644 --- a/packages/client/src/types/properties.ts +++ b/packages/client/src/types/properties.ts @@ -62,6 +62,11 @@ export type OptionGroup = { export type OptionCollection = Array