@eightshift/frontend-libs-tailwind 2.1.0 → 2.1.1

package/CHANGELOG.md

@@ -6,6 +6,12 @@ This projects adheres to [Semantic Versioning](https://semver.org/) and [Keep a
 
 ---
 
+## [2.1.1]
+
+### Changed
+
+- Updated Media and File pickers image component.
+
 ## [2.1.0]
 
 ### Changed
@@ -256,6 +262,7 @@ Co-authored with @piqusy
 - Initial release.
 
 [Unreleased]: https://github.com/infinum/eightshift-frontend-libs-tailwind/compare/master...HEAD
+[2.1.1]: https://github.com/infinum/eightshift-frontend-libs-tailwind/compare/2.1.0...2.1.1
 [2.1.0]: https://github.com/infinum/eightshift-frontend-libs-tailwind/compare/2.0.7...2.1.0
 [2.0.7]: https://github.com/infinum/eightshift-frontend-libs-tailwind/compare/2.0.6...2.0.7
 [2.0.6]: https://github.com/infinum/eightshift-frontend-libs-tailwind/compare/2.0.5...2.0.6

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@eightshift/frontend-libs-tailwind",
-	"version": "2.1.0",
+	"version": "2.1.1",
 	"description": "A framework for creating modern Gutenberg themes with styling provided by Tailwind CSS.",
 	"author": {
 		"name": "Eightshift team",
@@ -67,7 +67,7 @@
 		"@wordpress/api-fetch": "^7.32.0"
 	},
 	"peerDependencies": {
-		"@eightshift/ui-components": "^5.4.0"
+		"@eightshift/ui-components": "^5.5.0"
 	},
 	"sideEffects": false,
 	"lint-staged": {

package/scripts/components/file-picker.js

@@ -51,11 +51,6 @@ export const ManageFileButton = (props) => {
 
 	const strings = {
 		file: {
-			buttonTooltip: {
-				browse: __('Select a file from Media library', 'eightshift-frontend-libs-tailwind'),
-				upload: __('Upload a file', 'eightshift-frontend-libs-tailwind'),
-				replace: __('Replace file', 'eightshift-frontend-libs-tailwind'),
-			},
 			buttonLabel: {
 				browse: __('Select', 'eightshift-frontend-libs-tailwind'),
 				upload: __('Upload', 'eightshift-frontend-libs-tailwind'),
@@ -73,11 +68,6 @@ export const ManageFileButton = (props) => {
 			},
 		},
 		video: {
-			buttonTooltip: {
-				browse: __('Select a video from Media library', 'eightshift-frontend-libs-tailwind'),
-				upload: __('Upload a video', 'eightshift-frontend-libs-tailwind'),
-				replace: __('Replace video', 'eightshift-frontend-libs-tailwind'),
-			},
 			modalTitle: {
 				browse: __('Select a video', 'eightshift-frontend-libs-tailwind'),
 				upload: __('Upload a video', 'eightshift-frontend-libs-tailwind'),
@@ -85,11 +75,6 @@ export const ManageFileButton = (props) => {
 			},
 		},
 		image: {
-			buttonTooltip: {
-				browse: __('Select an image from Media library', 'eightshift-frontend-libs-tailwind'),
-				upload: __('Upload an image', 'eightshift-frontend-libs-tailwind'),
-				replace: __('Replace image', 'eightshift-frontend-libs-tailwind'),
-			},
 			modalTitle: {
 				browse: __('Select an image', 'eightshift-frontend-libs-tailwind'),
 				upload: __('Upload an image', 'eightshift-frontend-libs-tailwind'),
@@ -97,11 +82,6 @@ export const ManageFileButton = (props) => {
 			},
 		},
 		subtitle: {
-			buttonTooltip: {
-				browse: __('Select a subtitle file', 'eightshift-frontend-libs-tailwind'),
-				upload: __('Upload a subtitle file', 'eightshift-frontend-libs-tailwind'),
-				replace: __('Replace subtitle file', 'eightshift-frontend-libs-tailwind'),
-			},
 			modalTitle: {
 				browse: __('Select a subtitle file', 'eightshift-frontend-libs-tailwind'),
 				upload: __('Upload a subtitle file', 'eightshift-frontend-libs-tailwind'),
@@ -109,11 +89,6 @@ export const ManageFileButton = (props) => {
 			},
 		},
 		geoJson: {
-			buttonTooltip: {
-				browse: __('Select a GeoJSON file', 'eightshift-frontend-libs-tailwind'),
-				upload: __('Upload a GeoJSON file', 'eightshift-frontend-libs-tailwind'),
-				replace: __('Replace GeoJSON file', 'eightshift-frontend-libs-tailwind'),
-			},
 			modalTitle: {
 				browse: __('Select a GeoJSON file', 'eightshift-frontend-libs-tailwind'),
 				upload: __('Upload a GeoJSON file', 'eightshift-frontend-libs-tailwind'),
@@ -121,11 +96,6 @@ export const ManageFileButton = (props) => {
 			},
 		},
 		lottie: {
-			buttonTooltip: {
-				browse: __('Select a Lottie animation', 'eightshift-frontend-libs-tailwind'),
-				upload: __('Upload a Lottie animation', 'eightshift-frontend-libs-tailwind'),
-				replace: __('Replace Lottie animation', 'eightshift-frontend-libs-tailwind'),
-			},
 			modalTitle: {
 				browse: __('Select a Lottie animation', 'eightshift-frontend-libs-tailwind'),
 				upload: __('Upload a Lottie animation', 'eightshift-frontend-libs-tailwind'),
@@ -133,11 +103,6 @@ export const ManageFileButton = (props) => {
 			},
 		},
 		rive: {
-			buttonTooltip: {
-				browse: __('Select a Rive animation', 'eightshift-frontend-libs-tailwind'),
-				upload: __('Upload a Rive animation', 'eightshift-frontend-libs-tailwind'),
-				replace: __('Replace Rive animation', 'eightshift-frontend-libs-tailwind'),
-			},
 			modalTitle: {
 				browse: __('Select a Rive animation', 'eightshift-frontend-libs-tailwind'),
 				upload: __('Upload a Rive animation', 'eightshift-frontend-libs-tailwind'),
@@ -145,14 +110,12 @@ export const ManageFileButton = (props) => {
 			},
 		},
 		custom: {
-			buttonTooltip: labels?.buttonTooltip,
 			buttonLabel: labels?.buttonLabel,
 			modalTitle: labels?.modalTitle,
 			buttonIcon: labels?.buttonIcon,
 		},
 	};
 
-	const buttonTooltip = strings?.[kind]?.buttonTooltip?.[type] ?? strings.file.buttonTooltip?.[type];
 	const buttonLabel = strings?.[kind]?.buttonLabel?.[type] ?? strings.file.buttonLabel?.[type];
 	const buttonIcon = strings?.[kind]?.buttonIcon?.[type] ?? strings.file.buttonIcon?.[type];
 	const modalTitle = strings?.[kind]?.modalTitle?.[type] ?? strings.file.modalTitle?.[type];
@@ -216,17 +179,6 @@ export const FileSelector = (props) => {
 		labels,
 	};
 
-	const removeTooltips = {
-		file: __('Remove file', 'eightshift-frontend-libs-tailwind'),
-		image: __('Remove image', 'eightshift-frontend-libs-tailwind'),
-		video: __('Remove video', 'eightshift-frontend-libs-tailwind'),
-		subtitle: __('Remove subtitle file', 'eightshift-frontend-libs-tailwind'),
-		geoJson: __('Remove GeoJSON file', 'eightshift-frontend-libs-tailwind'),
-		lottie: __('Remove Lottie animation', 'eightshift-frontend-libs-tailwind'),
-		rive: __('Remove Rive animation', 'eightshift-frontend-libs-tailwind'),
-		custom: labels?.removeTooltip,
-	};
-
 	const fileIcons = {
 		image: icons.imageFile,
 		video: icons.videoFile,
@@ -256,12 +208,14 @@ export const FileSelector = (props) => {
 		>
 			<ManageFileButton
 				{...commonManageFileButtonProps}
+				buttonProps={{ className: 'es:grow' }}
 				currentId={fileId}
 				type='replace'
 			/>
 
 			<Button
 				onPress={() => onChange({ id: undefined, url: undefined })}
+				className='es:grow'
 				hidden={noDelete}
 			>
 				{__('Remove', 'eightshift-frontend-libs-tailwind')}

package/scripts/components/media-picker.js

@@ -64,23 +64,37 @@ export const MediaPicker = (props) => {
 			}
 			className={className}
 		>
-			<MediaButton
-				type='replace'
-				onChange={onChange}
-				currentId={imageId}
-				allowedTypes={allowedTypes}
-				buttonProps={{
-					type: 'glass',
-				}}
-			/>
+			{({ isDark, isTransparent }) => {
+				let buttonType = 'default';
 
-			<Button
-				onPress={() => onChange({ id: undefined, url: undefined })}
-				type='glass'
-				hidden={noDelete}
-			>
-				{__('Remove', 'eightshift-frontend-libs-tailwind')}
-			</Button>
+				if (!isTransparent) {
+					buttonType = isDark ? 'glass' : 'glassDark';
+				}
+
+				return (
+					<>
+						<MediaButton
+							type='replace'
+							onChange={onChange}
+							currentId={imageId}
+							allowedTypes={allowedTypes}
+							buttonProps={{
+								type: buttonType,
+								className: 'es:grow',
+							}}
+						/>
+
+						<Button
+							onPress={() => onChange({ id: undefined, url: undefined })}
+							className='es:grow'
+							type={buttonType}
+							hidden={noDelete}
+						>
+							{__('Remove', 'eightshift-frontend-libs-tailwind')}
+						</Button>
+					</>
+				);
+			}}
 		</FilePickerShell>
 	);
 };