@wix/patterns 1.477.0 → 1.479.0

package/dist/types/version.d.ts

@@ -1,2 +1,2 @@
-export declare const version = "patterns@1.477.0";
+export declare const version = "patterns@1.479.0";
 //# sourceMappingURL=version.d.ts.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wix/patterns",
-  "version": "1.477.0",
+  "version": "1.479.0",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
   "types": "dist/types/index.d.ts",
@@ -191,6 +191,7 @@
     "stc:ts": "ts-node -T scripts/rename-st-css-files.ts",
     "sled:gen": "ts-node -T --project tsconfig.scripts.json scripts/generate-sled-story.ts",
     "docs:gen": "ts-node -T --project tsconfig.docs-gen.json scripts/generate-component-docs.ts",
+    "docs:check-links": "ts-node -T --project tsconfig.scripts.json scripts/check-doc-links.ts",
     "dts:bundle": "ts-node -T --project tsconfig.scripts.json scripts/dts-bundle/emit-sibling-types.ts && ts-node -T --project tsconfig.scripts.json scripts/dts-bundle/resolve-entries.ts && ts-node -T --project tsconfig.scripts.json scripts/dts-bundle/resolve-subpaths.ts && ts-node -T --project tsconfig.scripts.json scripts/dts-bundle/classify-types.ts && rollup -c scripts/dts-bundle/rollup.config.mjs && ts-node -T --project tsconfig.scripts.json scripts/dts-bundle/generate-shims.ts && ts-node -T --project tsconfig.scripts.json scripts/dts-bundle/validate-bundles.ts && ts-node -T --project tsconfig.scripts.json scripts/dts-bundle/generate-index.ts",
     "generate-translation-keys": "babel-cli"
   },
@@ -200,6 +201,7 @@
     "dist/types",
     "dist/docs",
     "dist/examples",
+    "dist/templates",
     "dist/dts-bundle",
     "!dist/**/__tests__",
     "src",
@@ -225,11 +227,11 @@
   ],
   "dependencies": {
     "@wix/agent-platform-bm-sdk": "^1.0.0",
-    "@wix/bex-core": "2.383.0",
-    "@wix/bex-utils": "2.170.0",
+    "@wix/bex-core": "2.385.0",
+    "@wix/bex-utils": "2.172.0",
     "@wix/essentials": "^0.1.26",
-    "@wix/patterns-fields": "1.105.0",
-    "@wix/patterns-fields-utils": "1.86.0",
+    "@wix/patterns-fields": "1.107.0",
+    "@wix/patterns-fields-utils": "1.88.0",
     "@wix/sdk": "^1.15.22",
     "@wix/wix-style-react-incubator": "^3.23.1",
     "@wix/wix-ui-test-utils": "^1.1.9",
@@ -292,7 +294,7 @@
     "@wix/awaiter-utils": "^1.0.76",
     "@wix/babel-cli": "^1.11.0",
     "@wix/business-manager-api": "^1.470.0",
-    "@wix/cairo-integration-utils": "1.145.0",
+    "@wix/cairo-integration-utils": "1.147.0",
     "@wix/ci-build-info": "^1.0.0",
     "@wix/crm": "^1.0.93",
     "@wix/dashboard": "^1.3.39",
@@ -436,7 +438,8 @@
     "validations": {
       "source": [
         "lint",
-        "check-wix-design-system-version"
+        "check-wix-design-system-version",
+        "docs:check-links"
       ],
       "postBuild": [
         "type-check:tests",
@@ -453,5 +456,5 @@
   "wallaby": {
     "autoDetect": true
   },
-  "falconPackageHash": "5cefc3ca4e09b0877d0a032d004f0be236ae6aa7b8a55d253ed7cb34"
+  "falconPackageHash": "fcc6d9e1e6dd4b22aaf130e9701eede2694f29c736a75964eb67e4d5"
 }

package/src/components/CardContainer/CardContainer.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "CardContainer3407076452";
+var _namespace_ = "CardContainer89175386";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"CardContainer3407076452__root"};
+export var classes = {"root":"CardContainer89175386__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/CmsFieldManagement/CmsFieldForm.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "CmsFieldForm1674214116";
+var _namespace_ = "CmsFieldForm1053411839";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"CmsFieldForm1674214116__root","fullBleedDivider":"CmsFieldForm1674214116__fullBleedDivider"};
+export var classes = {"root":"CmsFieldForm1053411839__root","fullBleedDivider":"CmsFieldForm1053411839__fullBleedDivider"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/CmsFieldManagement/CmsFieldModal.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "CmsFieldModal3283484593";
+var _namespace_ = "CmsFieldModal818483420";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"CmsFieldModal3283484593__root","modal":"CmsFieldModal3283484593__modal"};
+export var classes = {"root":"CmsFieldModal818483420__root","modal":"CmsFieldModal818483420__modal"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/CmsFieldManagement/Sections/ValidationAndDefaultsSection.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../stylable-esm-runtime.js"
 
 
 
-var _namespace_ = "ValidationAndDefaultsSection2638218180";
+var _namespace_ = "ValidationAndDefaultsSection2674945069";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"ValidationAndDefaultsSection2638218180__root","accordionWrapper":"ValidationAndDefaultsSection2638218180__accordionWrapper"};
+export var classes = {"root":"ValidationAndDefaultsSection2674945069__root","accordionWrapper":"ValidationAndDefaultsSection2674945069__accordionWrapper"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/Collapse/Collapse.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "Collapse4129688331";
+var _namespace_ = "Collapse1905004565";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"Collapse4129688331__root","exit":"Collapse4129688331__exit"};
+export var classes = {"root":"Collapse1905004565__root","exit":"Collapse1905004565__exit"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/CollectionPageHeaderNew/CollectionPageHeader.tsx

@@ -35,7 +35,7 @@ export interface CollectionPageHeaderProps {
   /**
    * `text`: The title text. \
    * `hideTotal`: Determines whether to hide the number of total entities on the title of the page. \
-   * `badges`: Badges rendered at the end of the title row, after the total. Their size is always `small`. Each badge accepts `text`, `skin`, `prefixIcon`, `suffixIcon`, and an optional `tooltip` shown on hover or keyboard focus. \
+   * `badges`: Badges rendered at the end of the title row, after the total. Their size is `small` (`medium` on mobile). Each badge accepts `text`, `skin`, `prefixIcon`, `suffixIcon`, and an optional `tooltip` shown on hover or keyboard focus. \
    * The minimized header shows the title text on its own, so badges are not rendered while it is collapsed.
    * @external
    */
@@ -52,17 +52,17 @@ export interface CollectionPageHeaderProps {
   subtitle?: PageSubTitleProps;
 
   /**
-   * A [`PrimaryActions`](./?path=/story/features-actions-primary-actions--primary-actions) component to be rendered on the header.
+   * A [`PrimaryActions`](./?path=/story/features-actions-primaryactions--primaryactions) component to be rendered on the header.
    * A primary button w/o PopoverMenu component to be rendered in the header.
-   * @overrideType [PrimaryActions](./?path=/story/features-actions-primary-actions--primary-actions)
+   * @overrideType [PrimaryActions](./?path=/story/features-actions-primaryactions--primaryactions)
    * @external
    */
   primaryAction?: PrimaryActionsElement;
 
   /**
-   * A [`SecondaryActions`](./?path=/story/features-actions-secondary-actions--secondary-actions) component to be rendered on the header.
+   * A [`SecondaryActions`](./?path=/story/features-actions-secondaryactions--secondaryactions) component to be rendered on the header.
    * A Secondary button w/o PopoverMenu component to be rendered on the header
-   * @overrideType [SecondaryActions](./?path=/story/features-actions-secondary-actions--secondary-actions)
+   * @overrideType [SecondaryActions](./?path=/story/features-actions-secondaryactions--secondaryactions)
    * @external
    */
   secondaryActions?: SecondaryActionsElement;

package/src/components/CollectionPageNew/CollectionPage.st.css

@@ -7,16 +7,22 @@
   -st-states: mobile, panel;
 }
 
-.root [data-hook="page-header-wrapper"] {
+.root [data-hook='page-header-wrapper'] {
   --wds-space-300: 18px;
 }
 
 .root:mobile {
-  --wds-page-header-padding-horizontal: 0;
-  --wds-page-header-padding-horizontal-small: 0;
+  /* `0px`, not `0`: WDS uses these inside `calc(100% - ...)`, where a unitless 0 is invalid. */
+  --wds-page-header-padding-horizontal: 0px;
+  --wds-page-header-padding-horizontal-small: 0px;
   --wds-color-fill-surface-sunken: #ffffff;
 }
 
+/* The fixed footer that holds the mobile primary action sits flush with the bottom edge. */
+.root:mobile :has(> [data-hook='collection-page-mobile-primary-action']) {
+  padding-bottom: 0;
+}
+
 .root:panel {
   overflow: hidden;
   position: relative;

package/src/components/CollectionPageNew/CollectionPage.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "CollectionPage639137216";
+var _namespace_ = "CollectionPage1459539195";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"CollectionPage639137216__root"};
+export var classes = {"root":"CollectionPage1459539195__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/CollectionSectionHeader/CollectionSectionHeader.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "CollectionSectionHeader2580768530";
+var _namespace_ = "CollectionSectionHeader1925118531";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"CollectionSectionHeader2580768530__root","summaryIcon":"CollectionSectionHeader2580768530__summaryIcon"};
+export var classes = {"root":"CollectionSectionHeader1925118531__root","summaryIcon":"CollectionSectionHeader1925118531__summaryIcon"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/CollectionTable/CollectionTable.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "CollectionTable2518731116";
+var _namespace_ = "CollectionTable2371852919";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"CollectionTable2518731116__root"};
+export var classes = {"root":"CollectionTable2371852919__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/CollectionTable/CollectionTableWSRTable.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "CollectionTableWSRTable3004287980";
+var _namespace_ = "CollectionTableWSRTable2831281580";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"CollectionTableWSRTable3004287980__root"};
+export var classes = {"root":"CollectionTableWSRTable2831281580__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/CollectionToolbar/CollectionToolbar.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "CollectionToolbar3194474827";
+var _namespace_ = "CollectionToolbar1474840426";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"CollectionToolbar3194474827__root","right":"CollectionToolbar3194474827__right","left":"CollectionToolbar3194474827__left","fullWidth":"CollectionToolbar3194474827__fullWidth"};
+export var classes = {"root":"CollectionToolbar1474840426__root","right":"CollectionToolbar1474840426__right","left":"CollectionToolbar1474840426__left","fullWidth":"CollectionToolbar1474840426__fullWidth"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/CollectionToolbar/SearchOrCustomFilter.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "SearchOrCustomFilter2727495205";
+var _namespace_ = "SearchOrCustomFilter1302990876";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"SearchOrCustomFilter2727495205__root","search":"SearchOrCustomFilter2727495205__search","searchMobile":"SearchOrCustomFilter2727495205__searchMobile"};
+export var classes = {"root":"SearchOrCustomFilter1302990876__root","search":"SearchOrCustomFilter1302990876__search","searchMobile":"SearchOrCustomFilter1302990876__searchMobile"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/CollectionToolbar/ToolbarOverflowMenu.tsx

@@ -1,5 +1,6 @@
 import React, {
   ReactElement,
+  ReactNode,
   useCallback,
   useEffect,
   useRef,
@@ -19,12 +20,14 @@ import {
   DataCollection,
   MoreSmall,
 } from '@wix/wix-ui-icons-common/lazy';
+import uniqueId from 'lodash/uniqueId';
 import { useWixPatternsContainer } from '@wix/bex-core/react';
 import { ViewTypeState } from '../../state/ViewTypeState';
 import {
   layoutOptions,
   layoutConfig,
 } from '../TableGridSwitchButton/layoutConfig';
+import { DisabledTooltip } from '../DisabledTooltip';
 
 type Translate = ReturnType<typeof useWixPatternsContainer>['translate'];
 type Focusable = { focus: () => void };
@@ -41,6 +44,8 @@ export interface ToolbarOverflowSecondaryItem {
   prefixIcon: ReactElement;
   onClick: () => void;
   dataHook?: string;
+  disabled?: boolean;
+  disabledDescription?: ReactNode;
 }
 
 export interface ToolbarOverflowLayoutSwitchConfig {
@@ -182,6 +187,16 @@ function MainView({
 }) {
   const firstItemRef = useRef<Focusable | null>(null);
   const layoutSwitchRef = useRef<Focusable | null>(null);
+  const [descriptionIdPrefix] = useState(() =>
+    uniqueId('toolbar-overflow-disabled-description-'),
+  );
+  const disabledDescriptionId = (
+    item: ToolbarOverflowSecondaryItem,
+    index: number,
+  ) =>
+    item.disabled && item.disabledDescription
+      ? `${descriptionIdPrefix}${index}`
+      : undefined;
 
   useEffect(() => {
     const target = focusTarget.current;
@@ -246,22 +261,38 @@ function MainView({
         />
       )}
       {secondaryItems.map((item, index) => (
-        <ListItemAction
-          key={index}
-          ref={
-            !isFirstItemPrimary && !layoutSwitchConfig && index === 0
-              ? firstItemRef
-              : undefined
-          }
-          size="medium"
-          title={item.text}
-          onClick={() => {
-            item.onClick();
-            onItemClick();
-          }}
-          prefixIcon={item.prefixIcon}
-          dataHook={item.dataHook}
-        />
+        <React.Fragment key={index}>
+          <DisabledTooltip
+            content={item.disabledDescription}
+            disabled={!item.disabledDescription}
+            placement="left"
+            width="100%"
+            dataHook={item.dataHook && `${item.dataHook}-disabled-tooltip`}
+          >
+            <ListItemAction
+              ref={
+                !isFirstItemPrimary && !layoutSwitchConfig && index === 0
+                  ? firstItemRef
+                  : undefined
+              }
+              size="medium"
+              title={item.text}
+              onClick={() => {
+                item.onClick();
+                onItemClick();
+              }}
+              prefixIcon={item.prefixIcon}
+              dataHook={item.dataHook}
+              disabled={item.disabled}
+              aria-describedby={disabledDescriptionId(item, index)}
+            />
+          </DisabledTooltip>
+          {disabledDescriptionId(item, index) && (
+            <span id={disabledDescriptionId(item, index)} hidden>
+              {item.disabledDescription}
+            </span>
+          )}
+        </React.Fragment>
       ))}
     </>
   );

package/src/components/CollectionToolbar/useToolbarOverflowItems.ts

@@ -13,6 +13,7 @@ import {
   UploadExport,
   DownloadImport,
 } from '@wix/wix-ui-icons-common/lazy';
+import type { ImportButtonProps } from '../ImportButton/ImportProps';
 
 export interface ToolbarOverflowItems {
   primaryItems: ToolbarOverflowPrimaryItem[];
@@ -81,11 +82,17 @@ export function useToolbarOverflowItems(
     }
 
     if (props.importButton && importState) {
+      const { disabled, disabledReason }: Partial<ImportButtonProps> =
+        React.isValidElement<ImportButtonProps>(props.importButton)
+          ? props.importButton.props
+          : {};
       secondaryItems.push({
         text: t('cairo.import.import', { defaultValue: '' }),
         prefixIcon: React.createElement(DownloadImport),
         onClick: () => importState.open(),
         dataHook: 'overflow-import',
+        disabled,
+        disabledDescription: disabledReason,
       });
     }
 

package/src/components/CollectionViewsDropdown/AutoCompleteReadonly.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "AutoCompleteReadonly743691857";
+var _namespace_ = "AutoCompleteReadonly2201278997";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"AutoCompleteReadonly743691857__root"};
+export var classes = {"root":"AutoCompleteReadonly2201278997__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/CollectionViewsDropdown/ViewsDropdown.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "ViewsDropdown1944484198";
+var _namespace_ = "ViewsDropdown1632747698";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"ViewsDropdown1944484198__root"};
+export var classes = {"root":"ViewsDropdown1632747698__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/CustomFieldModal/CustomFieldForm.tsx

@@ -134,9 +134,12 @@ export const _CustomFieldForm = (props: CustomFieldFormProps) => {
             <FormField
               dataHook="custom-field-modal-field-key"
               required
-              label={t(
-                'cairo.customFields.addCustomField.modal.advancedSettings.key.title',
-              )}
+              label={
+                fieldModal.text.keyLabel ??
+                t(
+                  'cairo.customFields.addCustomField.modal.advancedSettings.key.title',
+                )
+              }
               infoContent={
                 mode === 'new'
                   ? t(
@@ -152,7 +155,7 @@ export const _CustomFieldForm = (props: CustomFieldFormProps) => {
                 disabled={mode === 'edit'}
                 value={key.value}
                 onChange={(e) => {
-                  key.onChange(e.target.value.toLowerCase());
+                  key.onChange(e.target.value);
                   customFieldModalBiReporter.reportKeyFormFieldChange();
                 }}
                 placeholder={t(
@@ -199,15 +202,16 @@ export const _CustomFieldForm = (props: CustomFieldFormProps) => {
                       'cairo.customFields.addCustomField.modal.advancedSettings',
                     ),
                   toggleIconPlacement: 'start',
-                  suffix: state.settingsHasError ? (
-                    <Box
-                      verticalAlign="middle"
-                      color="R10"
-                      dataHook="custom-field-modal-settings-error"
-                    >
-                      <StatusAlertFilledSmall />
-                    </Box>
-                  ) : undefined,
+                  suffix:
+                    state.showValidationErrors && state.settingsHasError ? (
+                      <Box
+                        verticalAlign="middle"
+                        color="R10"
+                        dataHook="custom-field-modal-settings-error"
+                      >
+                        <StatusAlertFilledSmall />
+                      </Box>
+                    ) : undefined,
                   open: settings.isOn,
                   onToggle: () => {
                     settings.toggle();
@@ -229,6 +233,7 @@ export const _CustomFieldForm = (props: CustomFieldFormProps) => {
                         <SettingsSection
                           fieldType={type.value}
                           lockedRules={lockedProperties}
+                          showValidationErrors={state.showValidationErrors}
                         />
                       )}
                     </Box>

package/src/components/CustomFieldModal/CustomFieldFormPiiFields.st.css

@@ -0,0 +1,15 @@
+@property st-global(--wds-tooltip-label-font-line-height-medium);
+@property st-global(--wds-font-line-height-body-small);
+@property st-global(--wds-font-line-height-body-tiny);
+@property st-global(--wsr-text-line-height-small);
+
+.tooltipText {
+  /* Rich tooltip content needs the same line height as WDS's string content. */
+  --wds-font-line-height-body-tiny: var(
+    --wds-tooltip-label-font-line-height-medium,
+    var(
+      --wds-font-line-height-body-small,
+      var(--wsr-text-line-height-small, 18px)
+    )
+  );
+}

package/src/components/CustomFieldModal/CustomFieldFormPiiFields.st.css.ts

@@ -0,0 +1,25 @@
+// @ts-nocheck
+
+
+import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
+
+
+
+var _namespace_ = "CustomFieldFormPiiFields3308205986";
+var _style_ = classesRuntime.bind(null, _namespace_);
+
+export var cssStates = statesRuntime.bind(null, _namespace_);
+export var style = _style_;
+export var st: import("@stylable/runtime").STFunction = _style_;
+
+export var namespace = _namespace_;
+export var classes = {"root":"CustomFieldFormPiiFields3308205986__root","tooltipText":"CustomFieldFormPiiFields3308205986__tooltipText"};
+export var keyframes = {}; 
+export var layers = {};
+export var containers = {};
+export var stVars = {}; 
+export var vars = {"wds-tooltip-label-font-line-height-medium":"--wds-tooltip-label-font-line-height-medium","wds-font-line-height-body-small":"--wds-font-line-height-body-small","wds-font-line-height-body-tiny":"--wds-font-line-height-body-tiny","wsr-text-line-height-small":"--wsr-text-line-height-small"}; 
+
+
+
+