@automattic/vip-design-system 2.12.0 → 2.12.2

package/build/system/Dropdown/DropdownContent.d.ts

@@ -2,6 +2,7 @@
 import React from 'react';
 export interface DropdownContentProps {
     className?: string;
+    align?: 'start' | 'center' | 'end';
 }
 export declare const styles: {
     minWidth: number;

package/build/system/Dropdown/DropdownContent.js

@@ -1,4 +1,4 @@
-var _excluded = ["className"],
+var _excluded = ["className", "align"],
   _excluded2 = ["className"];
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
@@ -18,11 +18,14 @@ export var styles = {
 };
 export var DropdownContent = /*#__PURE__*/React.forwardRef(function (_ref, forwardRef) {
   var className = _ref.className,
+    _ref$align = _ref.align,
+    align = _ref$align === void 0 ? 'center' : _ref$align,
     props = _objectWithoutPropertiesLoose(_ref, _excluded);
   return _jsx(DropdownMenuPrimitive.DropdownMenuContent, _extends({
     className: classNames('vip-dropdown-menu-content', className),
     ref: forwardRef,
-    sx: styles
+    sx: styles,
+    align: align
   }, props));
 });
 DropdownContent.displayName = 'DropdownContent';

package/build/system/FilterDropdown/FilterDropdown.d.ts

@@ -1,5 +1,6 @@
 /** @jsxImportSource theme-ui */
 import React from 'react';
+import { DropdownContentProps } from '../Dropdown/DropdownContent';
 import { DropdownCheckboxItemProps } from '../Dropdown/DropdownItem';
 export type FilterDropdownCheckItemProps = DropdownCheckboxItemProps & {
     checked: boolean;
@@ -23,5 +24,6 @@ export type FilterDropdownProps = {
     label?: React.ReactNode | string;
     onSelect: (filter: FilterDropDownFilterProp, key: string) => void;
     defaultValue?: string | null;
+    contentProps?: DropdownContentProps;
 };
-export declare const FilterDropdown: ({ className, filters, label, onSelect, defaultValue, }: FilterDropdownProps) => React.JSX.Element;
+export declare const FilterDropdown: ({ className, filters, label, onSelect, defaultValue, contentProps, }: FilterDropdownProps) => React.JSX.Element;

package/build/system/FilterDropdown/FilterDropdown.js

@@ -33,7 +33,9 @@ export var FilterDropdown = function FilterDropdown(_ref2) {
     label = _ref2.label,
     onSelect = _ref2.onSelect,
     _ref2$defaultValue = _ref2.defaultValue,
-    defaultValue = _ref2$defaultValue === void 0 ? null : _ref2$defaultValue;
+    defaultValue = _ref2$defaultValue === void 0 ? null : _ref2$defaultValue,
+    _ref2$contentProps = _ref2.contentProps,
+    contentProps = _ref2$contentProps === void 0 ? {} : _ref2$contentProps;
   var translate = useTranslate();
   var filterKeys = Object.keys(filters);
   var firstFilter = filterKeys[0];
@@ -41,6 +43,7 @@ export var FilterDropdown = function FilterDropdown(_ref2) {
     filter = _useState[0],
     setFilter = _useState[1];
   return _jsx(Dropdown.Root, {
+    contentProps: contentProps,
     trigger: _jsxs(Button, {
       className: classNames('vip-filter-dropdown-trigger', className),
       variant: "secondary",

package/build/system/FilterDropdown/FilterDropdown.stories.d.ts

@@ -4,7 +4,7 @@ import { FilterDropdown } from './FilterDropdown';
 import type { StoryObj } from '@storybook/react';
 declare const _default: {
     title: string;
-    component: ({ className, filters, label, onSelect, defaultValue, }: import("./FilterDropdown").FilterDropdownProps) => import("react").JSX.Element;
+    component: ({ className, filters, label, onSelect, defaultValue, contentProps, }: import("./FilterDropdown").FilterDropdownProps) => import("react").JSX.Element;
     parameters: {
         docs: {
             description: {

package/build/system/Snackbar/Snackbar.js

@@ -80,9 +80,8 @@ export var Snackbar = /*#__PURE__*/React.forwardRef(function (_ref2, forwardRef)
     variant: "notice",
     sx: _extends({
       p: 4,
-      boxShadow: 'none',
+      boxShadow: 'low',
       bg: 'snackbar.background',
-      border: '1px solid',
       borderRadius: 1,
       color: 'snackbar.text',
       fontSize: 2,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@automattic/vip-design-system",
-  "version": "2.12.0",
+  "version": "2.12.2",
   "main": "build/system/index.js",
   "scripts": {
     "build-storybook": "storybook build",

package/src/system/Dropdown/DropdownContent.tsx

@@ -6,6 +6,7 @@ import React from 'react';
 
 export interface DropdownContentProps {
 	className?: string;
+	align?: 'start' | 'center' | 'end';
 }
 
 export const styles = {
@@ -18,11 +19,12 @@ export const styles = {
 };
 
 export const DropdownContent = React.forwardRef< HTMLDivElement, DropdownContentProps >(
-	( { className, ...props }, forwardRef ) => (
+	( { className, align = 'center', ...props }, forwardRef ) => (
 		<DropdownMenuPrimitive.DropdownMenuContent
 			className={ classNames( 'vip-dropdown-menu-content', className ) }
 			ref={ forwardRef }
 			sx={ styles }
+			align={ align }
 			{ ...props }
 		/>
 	)

package/src/system/FilterDropdown/FilterDropdown.tsx

@@ -7,6 +7,7 @@ import { MdCheck, MdKeyboardArrowDown } from 'react-icons/md';
 
 import { Button } from '../Button';
 import * as Dropdown from '../Dropdown';
+import { DropdownContentProps } from '../Dropdown/DropdownContent';
 import { DropdownCheckboxItemProps } from '../Dropdown/DropdownItem';
 import ScreenReaderText from '../ScreenReaderText';
 
@@ -43,6 +44,7 @@ export type FilterDropdownProps = {
 	label?: React.ReactNode | string;
 	onSelect: ( filter: FilterDropDownFilterProp, key: string ) => void;
 	defaultValue?: string | null;
+	contentProps?: DropdownContentProps;
 };
 
 export const FilterDropdown = ( {
@@ -51,6 +53,7 @@ export const FilterDropdown = ( {
 	label,
 	onSelect,
 	defaultValue = null,
+	contentProps = {},
 }: FilterDropdownProps ) => {
 	const translate = useTranslate();
 	const filterKeys = Object.keys( filters );
@@ -59,6 +62,7 @@ export const FilterDropdown = ( {
 
 	return (
 		<Dropdown.Root
+			contentProps={ contentProps }
 			trigger={
 				<Button
 					className={ classNames( 'vip-filter-dropdown-trigger', className ) }

package/src/system/Snackbar/Snackbar.tsx

@@ -88,9 +88,8 @@ export const Snackbar = React.forwardRef< HTMLDivElement, SnackbarProps >(
 				variant="notice"
 				sx={ {
 					p: 4,
-					boxShadow: 'none',
+					boxShadow: 'low',
 					bg: 'snackbar.background',
-					border: '1px solid',
 					borderRadius: 1,
 					color: 'snackbar.text',
 					fontSize: 2,