@wix/patterns 1.359.0 → 1.363.0

package/src/components/CollectionViewsDropdown/CollectionViewsDropdown.uni.driver.ts

@@ -8,6 +8,7 @@ import { ViewsDropdownListItemUniDriver } from './ViewsDropdownListItem.uni.driv
 import { ManageViewPopoverUniDriver } from './ManageViewPopover.uni.driver';
 import { CollectionSaveViewModalUniDriver } from './modals/SaveView/CollectionSaveViewModal.uni.driver';
 import { CollectionRenameViewModalUniDriver } from './modals/RenameView/CollectionRenameViewModal.uni.driver';
+import { SaveToNewViewFooterUniDriver } from './SaveToNewViewFooter.uni.driver';
 
 export const CollectionViewsDropdownUniDriver = (
   base: UniDriver,
@@ -16,10 +17,16 @@ export const CollectionViewsDropdownUniDriver = (
   const viewsDropdownDriverBase = () =>
     base.$('[data-hook="collection-views-dropdown"]');
 
-  const manageViewPopover = () => ManageViewPopoverUniDriver(base, body);
+  // In redesign mode the manage view popover (3-dots menu) is rendered inside
+  // the dropdown list as a suffix on the selected view item. The dropdown
+  // content is rendered in a portal, so we search `body` instead of `base`.
+  // In legacy mode the popover is next to the dropdown inside `base`, but
+  // searching `body` still finds it because `base` is within `body`.
+  const manageViewPopover = () => ManageViewPopoverUniDriver(body, body);
   const getSaveViewModal = () => CollectionSaveViewModalUniDriver(base, body);
   const getRenameViewModal = () =>
     CollectionRenameViewModalUniDriver(base, body);
+  const saveToNewViewFooter = () => SaveToNewViewFooterUniDriver(body, body);
 
   const getDropdownLayoutBase = async () => {
     const contentDataHook = await viewsDropdownDriverBase().attr(
@@ -66,8 +73,48 @@ export const CollectionViewsDropdownUniDriver = (
     );
   };
 
-  const openManageViewPopover = () => manageViewPopover().open();
-  const saveNewViewActionClick = () => manageViewPopover().clickSaveNewView();
+  const open = () => viewsDropdownDriver().inputDriver.click();
+
+  /**
+   * Detect redesign mode by checking whether the popover trigger lives
+   * inside `base` (legacy — standalone next to the dropdown) or only
+   * inside the dropdown portal / body (redesign — suffix on selected item).
+   */
+  // const isRedesignMode = async () => {
+  //   return !(
+  //     await base.$('[data-hook="manage-view-popover-button"]').exists()
+  //   );
+  // };
+
+  const openManageViewPopover = async () => {
+    // In redesign mode the 3-dots button is inside the dropdown list on the
+    // selected view, so we need to ensure the dropdown is open first.
+    // In legacy mode opening the dropdown is harmless — the trigger is always
+    // accessible in the component tree.
+    const isOpen = await viewsDropdownDriver().dropdownLayoutDriver.isShown();
+    if (!isOpen) {
+      await open();
+    }
+    await manageViewPopover().open();
+  };
+
+  const saveNewViewClick = async () => {
+    const isOpen = await viewsDropdownDriver().dropdownLayoutDriver.isShown();
+    if (!isOpen) {
+      await open();
+    }
+
+    // Redesign: "Save to New View" is in the dropdown footer
+    const footerExists = await saveToNewViewFooter().exists();
+    if (footerExists) {
+      return saveToNewViewFooter().clickSaveNewView();
+    }
+
+    // Legacy: "Save to New View" is inside the ManageViewPopover
+    await manageViewPopover().open();
+    await manageViewPopover().clickSaveNewView();
+  };
+
   const deleteViewActionClick = () => manageViewPopover().clickDeleteView();
   const saveViewChangesActionClick = () =>
     manageViewPopover().clickSaveChanges();
@@ -84,7 +131,24 @@ export const CollectionViewsDropdownUniDriver = (
         .$('[data-hook="initial-loader"]')
         .exists(),
     /** Get the currently selected view name */
-    getSelected: () => viewsDropdownDriver().inputDriver.getValue(),
+    getSelected: async () => {
+      // When the dropdown is open and in editing mode (disableEditing=false),
+      // the input value shows the search text and the selected label moves to
+      // the placeholder. After onSelect fires (disableEditing=true) the value
+      // switches back to the selected label but the dropdown may still be
+      // visually shown. Try the value first; fall back to the placeholder.
+      const isOpen = await viewsDropdownDriver().dropdownLayoutDriver.isShown();
+      if (isOpen) {
+        const selectedId =
+          await viewsDropdownDriver().dropdownLayoutDriver.getSelectedOptionId();
+        if (!selectedId) {
+          return '';
+        }
+        const value = await viewsDropdownDriver().inputDriver.getValue();
+        return value || viewsDropdownDriver().inputDriver.getPlaceholder();
+      }
+      return viewsDropdownDriver().inputDriver.getValue();
+    },
     /** Get the dropdown input text */
     getInputValue: () => viewsDropdownDriver().inputDriver.getValue(),
     /** Indicates input is ready-only */
@@ -98,7 +162,7 @@ export const CollectionViewsDropdownUniDriver = (
     hasTotal: () =>
       viewsDropdownDriver().inputDriver.suffixComponentExists('.total-count'),
     /** Opens views dropdown */
-    open: () => viewsDropdownDriver().inputDriver.click(),
+    open,
     /** Enter dropdown input text */
     enterText: (value: string) =>
       viewsDropdownDriver().inputDriver.enterText(value),
@@ -159,8 +223,8 @@ export const CollectionViewsDropdownUniDriver = (
     openManageViewPopover,
     /** Clicks the Save Changes action in the Manage View popover */
     saveViewChangesActionClick,
-    /** Clicks the Save as New View action in the Manage View popover */
-    saveNewViewActionClick,
+    /** Clicks the Save to New View button (auto-detects redesign vs legacy) */
+    saveNewViewActionClick: saveNewViewClick,
     /** Clicks the Rename action in the Manage View popover */
     renameViewActionClick,
     /** Clicks the Set as Default View action in the Manage View popover */
@@ -169,8 +233,21 @@ export const CollectionViewsDropdownUniDriver = (
     deleteViewActionClick,
     /** Get DropdownLayoutOptionUniDriver of a Save Changes option */
     getSaveViewChangesBtn: () => manageViewPopover().getSaveChangesBtn(),
-    /** Get DropdownLayoutOptionUniDriver of a Save as New View option */
-    getSaveNewViewBtn: () => manageViewPopover().getSaveNewViewBtn(),
+    /** Get the Save to New View button (auto-detects redesign vs legacy) */
+    getSaveNewViewBtn: async () => {
+      const isOpen = await viewsDropdownDriver().dropdownLayoutDriver.isShown();
+      if (!isOpen) {
+        await open();
+      }
+      // Redesign: footer button; Legacy: popover menu item
+      const footerExists = await saveToNewViewFooter().exists();
+      if (footerExists) {
+        return saveToNewViewFooter().getSaveNewViewBtn();
+      }
+
+      // Fallback to popover (e.g. popover not yet open in legacy mode)
+      return manageViewPopover().getSaveNewViewBtn();
+    },
     /** Get DropdownLayoutOptionUniDriver of a Delete View option */
     getDeleteViewBtn: () => manageViewPopover().getDeleteViewBtn(),
     /** Get DropdownLayoutOptionUniDriver of a Rename option */
@@ -180,8 +257,7 @@ export const CollectionViewsDropdownUniDriver = (
 
     /** Saves new view with a defined name and current filters / sort / columns */
     saveNewView: async (name: string) => {
-      await openManageViewPopover();
-      await saveNewViewActionClick();
+      await saveNewViewClick();
       const saveViewModal = getSaveViewModal();
       await saveViewModal.fillViewNameInput(name);
       await saveViewModal.clickSaveButton();

package/src/components/CollectionViewsDropdown/ManageViewPopover.tsx

@@ -1,50 +1,85 @@
-import { TextButton, PopoverMenu } from '@wix/design-system';
-import React from 'react';
+import { IconButton, PopoverMenu, TextButton } from '@wix/design-system';
+import React, { useImperativeHandle, useRef, forwardRef } from 'react';
 import { observer } from 'mobx-react-lite';
 import {
   ChevronDown,
+  MoreSmall,
   Confirm,
   Duplicate,
   Edit,
   Delete,
   Flag,
   FlagDismiss,
+  Pin,
+  Revert,
 } from '@wix/wix-ui-icons-common';
 import { FiltersMap } from '@wix/bex-core';
 import { CollectionViewsState } from '../../state';
 import { useWixPatternsContainer } from '@wix/bex-core/react';
 
+export interface ManageViewPopoverHandle {
+  focusTrigger: () => void;
+}
+
 export interface ManageViewPopoverProps<T, F extends FiltersMap> {
   state: CollectionViewsState<T, F>;
   origin: string;
+  /** When true, renders as an inline IconButton inside the dropdown */
+  redesign?: boolean;
 }
 
 function _ManageViewPopover<T, F extends FiltersMap>(
   props: ManageViewPopoverProps<T, F>,
+  ref: React.Ref<ManageViewPopoverHandle>,
 ) {
   const container = useWixPatternsContainer();
-  const { state } = props;
+  const { state, redesign } = props;
   const { views, table, emitter, isViewChanged } = state;
+  const buttonRef = useRef<HTMLButtonElement>(null);
+
+  useImperativeHandle(ref, () => ({
+    focusTrigger: () => buttonRef.current?.focus(),
+  }));
 
   const { translate: t } = container;
 
+  const triggerElement = redesign ? (
+    <IconButton
+      ref={buttonRef}
+      tabIndex={0}
+      size="tiny"
+      dataHook="manage-view-popover-button"
+      onClick={(e) => {
+        // Stop propagation so clicking the 3-dots button doesn't select
+        // the dropdown option it sits inside of.
+        e.stopPropagation();
+        // Prevent default so the click doesn't trigger form submission
+        // or other native behavior while inside DropdownLayout.
+        e.preventDefault();
+      }}
+    >
+      <MoreSmall />
+    </IconButton>
+  ) : (
+    <TextButton
+      size="small"
+      as="button"
+      dataHook="manage-view-popover-button"
+      suffixIcon={<ChevronDown />}
+    >
+      {t('cairo.manageView.CTA')}
+    </TextButton>
+  );
+
   return (
     <PopoverMenu
       minWidth={271}
+      {...(redesign && { placement: 'right', appendTo: 'window' })}
       onShow={() => {
         emitter.emit('openManageViewPopoverMenu');
       }}
       dataHook="manage-view-popover"
-      triggerElement={
-        <TextButton
-          size="small"
-          as="button"
-          dataHook="manage-view-popover-button"
-          suffixIcon={<ChevronDown />}
-        >
-          {t('cairo.manageView.CTA')}
-        </TextButton>
-      }
+      triggerElement={triggerElement}
     >
       <PopoverMenu.MenuItem
         text={t('cairo.manageView.saveChanges.CTA')}
@@ -54,38 +89,26 @@ function _ManageViewPopover<T, F extends FiltersMap>(
           !isViewChanged ||
           views.currentView?.isPreset
         }
-        // subtitle={
-        //   views.currentView?.isPreset
-        //     ? t('cairo.manageView.saveChanges.disabled.predefinedView.tooltip')
-        //     : !isViewChanged
-        //     ? t('cairo.manageView.saveChanges.disabled.tooltip')
-        //     : undefined
-        // }
         prefixIcon={<Confirm />}
         onClick={() => {
           state.saveViewChanges();
         }}
       />
-      <PopoverMenu.MenuItem
-        dataHook="save-new-view"
-        disabled={views.reachedViewsLimit}
-        onClick={() => {
-          views.saveViewModal.open();
-          table.closeSidePanel();
-        }}
-        text={t('cairo.manageView.saveNewView.CTA')}
-        prefixIcon={<Duplicate />}
-      />
+      {!redesign && (
+        <PopoverMenu.MenuItem
+          dataHook="save-new-view"
+          disabled={views.reachedViewsLimit}
+          onClick={() => {
+            views.saveViewModal.open();
+            table.closeSidePanel();
+          }}
+          text={t('cairo.manageView.saveNewView.CTA')}
+          prefixIcon={<Duplicate />}
+        />
+      )}
       <PopoverMenu.MenuItem
         dataHook="rename-view"
         disabled={views.currentView?.isPreset || isViewChanged}
-        // subtitle={
-        //   views.currentView?.isPreset
-        //     ? t('cairo.manageView.Rename.disabled.predefinedView.tooltip')
-        //     : isViewChanged
-        //     ? t('cairo.manageView.Rename.disabled.tooltip')
-        //     : undefined
-        // }
         onClick={() => {
           views.renameViewModal.open();
           table.closeSidePanel();
@@ -96,11 +119,6 @@ function _ManageViewPopover<T, F extends FiltersMap>(
       <PopoverMenu.MenuItem
         dataHook="set-as-default-view"
         disabled={!views.currentView || (isViewChanged && !views.isDefaultView)}
-        // subtitle={
-        //   isViewChanged && !views.isDefaultView
-        //     ? t('cairo.manageView.setAsDefault.tooltip')
-        //     : undefined
-        // }
         onClick={() => {
           state.setAsDefaultView();
         }}
@@ -109,16 +127,23 @@ function _ManageViewPopover<T, F extends FiltersMap>(
             ? t('cairo.manageView.setAsDefault.reset.CTA')
             : t('cairo.manageView.setAsDefault.CTA')
         }
-        prefixIcon={views.isDefaultView ? <FlagDismiss /> : <Flag />}
+        prefixIcon={
+          views.isDefaultView ? (
+            redesign ? (
+              <Revert />
+            ) : (
+              <FlagDismiss />
+            )
+          ) : redesign ? (
+            <Pin />
+          ) : (
+            <Flag />
+          )
+        }
       />
       <PopoverMenu.MenuItem
         dataHook="delete-view"
         disabled={!views.isCurrentViewSelected || views.currentView?.isPreset}
-        // subtitle={
-        //   views.isCurrentViewSelected && views.currentView?.isPreset
-        //     ? t('cairo.manageView.Delete.disabled.predefinedView.tooltip')
-        //     : undefined
-        // }
         onClick={() => {
           state.deleteView();
         }}
@@ -129,4 +154,10 @@ function _ManageViewPopover<T, F extends FiltersMap>(
   );
 }
 
-export const ManageViewPopover = observer(_ManageViewPopover);
+export const ManageViewPopover = observer(
+  forwardRef(_ManageViewPopover),
+) as <T, F extends FiltersMap>(
+  props: ManageViewPopoverProps<T, F> & {
+    ref?: React.Ref<ManageViewPopoverHandle>;
+  },
+) => React.ReactElement | null;

package/src/components/CollectionViewsDropdown/ManageViewPopover.uni.driver.ts

@@ -37,6 +37,19 @@ export const ManageViewPopoverUniDriver = (
     );
   };
 
+  /**
+   * In redesign mode the "Save to New View" item is removed from the popover
+   * (moved to a dropdown footer), so all option indices shift by -1.
+   * This helper detects which mode we're in by checking for the save-new-view item.
+   */
+  const getSaveNewViewOffset = async () => {
+    const contentElement = await getContentElement();
+    const hasSaveNew = await contentElement
+      .$('[data-hook="save-new-view"]')
+      .exists();
+    return hasSaveNew ? 1 : 0;
+  };
+
   return {
     ...baseUniDriverFactory(base),
     exists: () => manageViewPopoverDriver().exists(),
@@ -51,7 +64,7 @@ export const ManageViewPopoverUniDriver = (
     /** Trigger save changes action */
     clickSaveChanges: () =>
       manageViewPopoverDriver().clickAtChildByDataHook('save-changes-to-view'),
-    /** Trigger save new view action */
+    /** Trigger save new view action (legacy mode only) */
     clickSaveNewView: () =>
       manageViewPopoverDriver().clickAtChildByDataHook('save-new-view'),
     /** Trigger rename view action */
@@ -63,30 +76,33 @@ export const ManageViewPopoverUniDriver = (
     /** Trigger delete view action */
     clickDeleteView: () =>
       manageViewPopoverDriver().clickAtChildByDataHook('delete-view'),
-    /** Get save changes btn */
+    /** Get save changes btn (always at index 0) */
     getSaveChangesBtn: async () => {
       const dropdownLayoutDriver = await getDropdownLayoutDriver();
       return dropdownLayoutDriver.optionById(0);
     },
-    /** Get save new view btn */
+    /** Get save new view btn (legacy mode only, index 1) */
     getSaveNewViewBtn: async () => {
       const dropdownLayoutDriver = await getDropdownLayoutDriver();
       return dropdownLayoutDriver.optionById(1);
     },
-    /** Get rename view btn */
+    /** Get rename view btn (auto-detects redesign vs legacy offset) */
     getRenameViewBtn: async () => {
       const dropdownLayoutDriver = await getDropdownLayoutDriver();
-      return dropdownLayoutDriver.optionById(2);
+      const offset = await getSaveNewViewOffset();
+      return dropdownLayoutDriver.optionById(1 + offset);
     },
-    /** Get set as default view btn */
+    /** Get set as default view btn (auto-detects redesign vs legacy offset) */
     getSetAsDefaultViewBtn: async () => {
       const dropdownLayoutDriver = await getDropdownLayoutDriver();
-      return dropdownLayoutDriver.optionById(3);
+      const offset = await getSaveNewViewOffset();
+      return dropdownLayoutDriver.optionById(2 + offset);
     },
-    /** Get delete view btn */
+    /** Get delete view btn (auto-detects redesign vs legacy offset) */
     getDeleteViewBtn: async () => {
       const dropdownLayoutDriver = await getDropdownLayoutDriver();
-      return dropdownLayoutDriver.optionById(4);
+      const offset = await getSaveNewViewOffset();
+      return dropdownLayoutDriver.optionById(3 + offset);
     },
   };
 };

package/src/components/CollectionViewsDropdown/SaveToNewViewFooter.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import { observer } from 'mobx-react-lite';
+import { Divider, ListItemAction } from '@wix/design-system';
+import { Add } from '@wix/wix-ui-icons-common';
+import { FiltersMap } from '@wix/bex-core';
+import { CollectionViewsState } from '../../state';
+import { useWixPatternsContainer } from '@wix/bex-core/react';
+
+export interface SaveToNewViewFooterProps<T, F extends FiltersMap> {
+  state: CollectionViewsState<T, F>;
+}
+
+function _SaveToNewViewFooter<T, F extends FiltersMap>({
+  state,
+}: SaveToNewViewFooterProps<T, F>) {
+  const { translate: t } = useWixPatternsContainer();
+  const { views: viewsState } = state;
+
+  return (
+    <div data-hook="save-to-new-view-footer">
+      <Divider />
+      <ListItemAction
+        size="medium"
+        weight="thin"
+        dataHook="save-to-new-view"
+        prefixIcon={<Add />}
+        disabled={viewsState.reachedViewsLimit}
+        onClick={() => {
+          viewsState.saveViewModal.open();
+          state.table.closeSidePanel();
+        }}
+        title={t('cairo.manageView.saveNewView.CTA')}
+      />
+    </div>
+  );
+}
+
+export const SaveToNewViewFooter = observer(_SaveToNewViewFooter);

package/src/components/CollectionViewsDropdown/SaveToNewViewFooter.uni.driver.ts

@@ -0,0 +1,21 @@
+import type { UniDriver } from '@wix/wix-ui-test-utils/unidriver';
+import { TextButtonUniDriver } from '@wix/design-system/dist/testkit/unidriver';
+import { baseUniDriverFactory } from '../../unidriver';
+
+export const SaveToNewViewFooterUniDriver = (
+  base: UniDriver,
+  body: UniDriver,
+) => {
+  const footerBase = () => base.$('[data-hook="save-to-new-view-footer"]');
+  const saveButton = () =>
+    TextButtonUniDriver(base.$('[data-hook="save-to-new-view"]'), body);
+
+  return {
+    ...baseUniDriverFactory(base),
+    exists: () => footerBase().exists(),
+    /** Click the "Save to New View" button */
+    clickSaveNewView: () => saveButton().click(),
+    /** Get the "Save to New View" TextButton driver */
+    getSaveNewViewBtn: () => saveButton(),
+  };
+};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "ViewsDropdown3368516299";
+var _namespace_ = "ViewsDropdown514972543";
 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":"ViewsDropdown3368516299__root"};
+export var classes = {"root":"ViewsDropdown514972543__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/CollectionViewsDropdown/ViewsDropdown.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react';
+import React, { useMemo, useRef } from 'react';
 import { observer } from 'mobx-react-lite';
 import {
   Box,
@@ -11,7 +11,10 @@ import { FiltersMap } from '@wix/bex-core';
 import { ViewsDropdownModals } from './ViewsDropdownModals';
 import { View } from '../../model';
 import { classes, st } from './ViewsDropdown.st.css.js';
-import { ManageViewPopover } from './ManageViewPopover';
+import {
+  ManageViewPopover,
+  ManageViewPopoverHandle,
+} from './ManageViewPopover';
 import {
   buildCategoryOption,
   buildViewOption,
@@ -19,9 +22,12 @@ import {
   getViewName,
 } from './viewsDropdownRenderHelpers';
 import { AutoCompleteReadonly } from './AutoCompleteReadonly';
+import { SaveToNewViewFooter } from './SaveToNewViewFooter';
 import { ViewsDropdownPrefix } from './ViewsDropdownPrefix';
 import { useWixPatternsContainer } from '../..';
 
+export const VIEWS_REDESIGN_EXPERIMENT = 'specs.cairo.ViewsRedesign';
+
 export type ViewsDropdownProps<T, F extends FiltersMap> = {
   state: CollectionViewsState<T, F>;
   onSelect?: (view: View<F>) => void;
@@ -38,6 +44,9 @@ function _ViewsDropdown<T, F extends FiltersMap>({
   ...dropdownProps
 }: ViewsDropdownProps<T, F>) {
   const container = useWixPatternsContainer();
+  const isRedesign = container.internalExperiments?.enabled(
+    VIEWS_REDESIGN_EXPERIMENT,
+  );
   const { views: viewsState } = state;
   const { currentView, collection, localSearchState } = viewsState;
   const { filteredCategoriesWithViews } = localSearchState;
@@ -45,22 +54,51 @@ function _ViewsDropdown<T, F extends FiltersMap>({
   const showLoader =
     collection.result.status.isIdle || collection.result.status.isLoading;
 
+  const manageViewRef = useRef<ManageViewPopoverHandle>(null);
   const viewsOptions = useMemo(() => {
     const { viewsWithoutCategory, categories } = filteredCategoriesWithViews;
 
+    const buildOption = (view: (typeof viewsWithoutCategory)[number]) => {
+      const isSelected = currentView?.id === view.id;
+      const option = buildViewOption({
+        view,
+        viewsState,
+        suffix:
+          isRedesign && isSelected ? (
+            <ManageViewPopover
+              ref={manageViewRef}
+              origin="MainToolbar"
+              state={state}
+              redesign
+            />
+          ) : undefined,
+      });
+
+      if (isRedesign && isSelected) {
+        return {
+          ...option,
+          onDrillIn: () => manageViewRef.current?.focusTrigger(),
+        };
+      }
+
+      return option;
+    };
+
     return [
-      ...viewsWithoutCategory.map((view) =>
-        buildViewOption({ view, viewsState }),
-      ),
+      ...viewsWithoutCategory.map(buildOption),
       ...categories.flatMap((category) => [
-        // Skip category header if category has no displayable name
         ...(getCategoryName({ category, viewsState })
           ? [buildCategoryOption({ category, viewsState })]
           : []),
-        ...category.views.map((view) => buildViewOption({ view, viewsState })),
+        ...category.views.map(buildOption),
       ]),
     ];
-  }, [filteredCategoriesWithViews, container.initTask.status]);
+  }, [
+    filteredCategoriesWithViews,
+    container.initTask.status,
+    currentView?.id,
+    isRedesign,
+  ]);
 
   const { options, fixedFooter } = showLoader
     ? {
@@ -79,7 +117,9 @@ function _ViewsDropdown<T, F extends FiltersMap>({
       }
     : {
         options: viewsOptions,
-        fixedFooter: undefined,
+        fixedFooter: isRedesign ? (
+          <SaveToNewViewFooter state={state} />
+        ) : undefined,
       };
 
   const {
@@ -104,7 +144,7 @@ function _ViewsDropdown<T, F extends FiltersMap>({
             localSearchState.setInputValueAndScheduleSearch(e.target.value)
           }
           clearInput={() => localSearchState.clearSearch()}
-          dropdownWidth={dropdownWidth}
+          dropdownWidth={isRedesign ? '264px' : dropdownWidth}
           popoverProps={{ placement: 'bottom-start' }}
           {...dropdownProps}
           onInputClicked={(e) => {
@@ -164,9 +204,11 @@ function _ViewsDropdown<T, F extends FiltersMap>({
         />
       </Box>
 
-      <Box verticalAlign="middle" paddingLeft="SP2">
-        <ManageViewPopover origin="MainToolbar" state={state} />
-      </Box>
+      {!isRedesign && (
+        <Box verticalAlign="middle" paddingLeft="SP2">
+          <ManageViewPopover origin="MainToolbar" state={state} />
+        </Box>
+      )}
 
       <ViewsDropdownModals state={state} />
     </Box>

package/src/components/CollectionViewsDropdown/ViewsDropdownPrefix.tsx

@@ -1,9 +1,15 @@
 import { Box, Input, Tooltip } from '@wix/design-system';
-import { FlagSmall, StatusAlertSmall } from '@wix/wix-ui-icons-common';
+import {
+  FlagSmall,
+  PinSmall,
+  StatusAlertSmall,
+} from '@wix/wix-ui-icons-common';
 import React from 'react';
 import { FiltersMap } from '@wix/bex-core';
 import { CollectionViewsState } from '../../state';
 import { observer } from 'mobx-react-lite';
+import { useWixPatternsContainer } from '../..';
+import { VIEWS_REDESIGN_EXPERIMENT } from './ViewsDropdown';
 
 export type ViewsDropdownPrefixProps<T, F extends FiltersMap> = {
   state: CollectionViewsState<T, F>;
@@ -13,6 +19,10 @@ export function _ViewsDropdownPrefix<T, F extends FiltersMap>(
   props: ViewsDropdownPrefixProps<T, F>,
 ) {
   const { state } = props;
+  const container = useWixPatternsContainer();
+  const isRedesign = container.internalExperiments?.enabled(
+    VIEWS_REDESIGN_EXPERIMENT,
+  );
 
   const { views } = state;
   const {
@@ -44,10 +54,11 @@ export function _ViewsDropdownPrefix<T, F extends FiltersMap>(
   }
 
   if (views.isDefaultView) {
+    const DefaultIcon = isRedesign ? PinSmall : FlagSmall;
     return (
       <Input.Affix>
         <Box dataHook="view-default">
-          <FlagSmall />
+          <DefaultIcon />
         </Box>
       </Input.Affix>
     );