Feedback Components

import { Notice } from '@wordpress/components';

function NoticeExamples() {
  return (
    <>
      <Notice status="info">
        Your settings have been updated.
      </Notice>

      <Notice status="success" isDismissible onRemove={() => {}}>
        Post published successfully!
      </Notice>

      <Notice status="warning">
        This action cannot be undone.
      </Notice>

      <Notice status="error" isDismissible={false}>
        An error occurred while saving.
      </Notice>
    </>
  );
}

import { Notice, Button } from '@wordpress/components';

function NoticeWithActions() {
  return (
    <Notice
      status="warning"
      actions={[
        {
          label: 'View Details',
          onClick: () => console.log('View clicked'),
          variant: 'primary',
        },
        {
          label: 'Dismiss',
          onClick: () => console.log('Dismissed'),
        },
      ]}
    >
      Update available for your plugin.
    </Notice>
  );
}

import { SnackbarList } from '@wordpress/components';
import { useState } from '@wordpress/element';

function SnackbarExample() {
  const [notices, setNotices] = useState([
    {
      id: '1',
      content: 'Item added to cart',
      status: 'success',
    },
  ]);

  const removeNotice = (id) => {
    setNotices(notices.filter((notice) => notice.id !== id));
  };

  return (
    <SnackbarList
      notices={notices}
      onRemove={removeNotice}
    />
  );
}

import { Modal, Button } from '@wordpress/components';
import { useState } from '@wordpress/element';

function ModalExample() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <>
      <Button onClick={() => setIsOpen(true)}>
        Open Modal
      </Button>

      {isOpen && (
        <Modal
          title="Settings"
          onRequestClose={() => setIsOpen(false)}
        >
          <p>Modal content goes here.</p>
          <Button variant="primary" onClick={() => setIsOpen(false)}>
            Save
          </Button>
        </Modal>
      )}
    </>
  );
}

import { ConfirmDialog, Button } from '@wordpress/components';
import { useState } from '@wordpress/element';

function DeleteConfirmation() {
  const [isOpen, setIsOpen] = useState(false);

  const handleConfirm = () => {
    console.log('Deleted');
    setIsOpen(false);
  };

  return (
    <>
      <Button isDestructive onClick={() => setIsOpen(true)}>
        Delete Item
      </Button>

      <ConfirmDialog
        isOpen={isOpen}
        onConfirm={handleConfirm}
        onCancel={() => setIsOpen(false)}
        confirmButtonText="Delete"
        cancelButtonText="Cancel"
      >
        Are you sure you want to delete this item? This action cannot be undone.
      </ConfirmDialog>
    </>
  );
}

import { Popover, Button } from '@wordpress/components';
import { useState } from '@wordpress/element';

function PopoverExample() {
  const [isVisible, setIsVisible] = useState(false);

  return (
    <div>
      <Button onClick={() => setIsVisible(!isVisible)}>
        Toggle Popover
      </Button>

      {isVisible && (
        <Popover
          position="bottom center"
          onClose={() => setIsVisible(false)}
        >
          <div style={{ padding: '16px' }}>
            Popover content
          </div>
        </Popover>
      )}
    </div>
  );
}

<Popover position="top left">Top left</Popover>
<Popover position="middle right">Middle right</Popover>
<Popover position="bottom center">Bottom center</Popover>

import { Tooltip, Button } from '@wordpress/components';
import { help } from '@wordpress/icons';

function TooltipExample() {
  return (
    <>
      <Tooltip text="Click for help">
        <Button icon={help} label="Help" />
      </Tooltip>

      <Tooltip text="Save changes" shortcut="Ctrl+S">
        <Button variant="primary">Save</Button>
      </Tooltip>
    </>
  );
}

<Button
  icon={save}
  label="Save"
  showTooltip
  shortcut="Ctrl+S"
/>

import { DropdownMenu } from '@wordpress/components';
import { more, trash, edit, external } from '@wordpress/icons';

function ActionsMenu() {
  return (
    <DropdownMenu
      icon={more}
      label="Actions"
      controls={[
        {
          title: 'Edit',
          icon: edit,
          onClick: () => console.log('Edit'),
        },
        {
          title: 'View',
          icon: external,
          onClick: () => console.log('View'),
        },
        {
          title: 'Delete',
          icon: trash,
          onClick: () => console.log('Delete'),
          isDestructive: true,
        },
      ]}
    />
  );
}

<DropdownMenu
  icon={more}
  controls={[
    [
      { title: 'Edit', icon: edit, onClick: () => {} },
      { title: 'Duplicate', onClick: () => {} },
    ],
    [
      { title: 'Delete', icon: trash, onClick: () => {}, isDestructive: true },
    ],
  ]}
/>

import { Dropdown, Button } from '@wordpress/components';
import { chevronDown } from '@wordpress/icons';

function CustomDropdown() {
  return (
    <Dropdown
      renderToggle={({ isOpen, onToggle }) => (
        <Button
          onClick={onToggle}
          icon={chevronDown}
          aria-expanded={isOpen}
        >
          Options
        </Button>
      )}
      renderContent={() => (
        <div style={{ padding: '16px' }}>
          <p>Custom dropdown content</p>
          <Button variant="primary">Action</Button>
        </div>
      )}
    />
  );
}

import { __experimentalDisclosure as Disclosure } from '@wordpress/components';

function DisclosureExample() {
  return (
    <Disclosure>
      <Disclosure.Trigger>Show Details</Disclosure.Trigger>
      <Disclosure.Content>
        <p>Hidden content that can be toggled</p>
      </Disclosure.Content>
    </Disclosure>
  );
}

import { SlotFillProvider, Slot, Fill } from '@wordpress/components';

function App() {
  return (
    <SlotFillProvider>
      <div>
        <h1>Header</h1>
        <Slot name="Toolbar" />
      </div>
    </SlotFillProvider>
  );
}

function Plugin() {
  return (
    <Fill name="Toolbar">
      <Button>Plugin Action</Button>
    </Fill>
  );
}