@squiz/resource-browser 1.63.1-alpha.7 → 1.64.0

package/CHANGELOG.md

@@ -0,0 +1,7 @@
+# @squiz/resource-browser
+
+## 1.64.0
+
+### Minor Changes
+
+- e7d4c0f: Updated disabled styling for component-editing-ui & resource browser

package/lib/ResourcePicker/ResourcePicker.js

@@ -15,7 +15,7 @@ const clsx_1 = __importDefault(require("clsx"));
 const ResourcePicker = ({ resource, allowedTypes, error, isLoading, isDisabled, children, onClear, }) => {
     const isImagePicker = allowedTypes && allowedTypes.length === 1 && allowedTypes.includes('image');
     const isEmpty = resource === null && !isLoading && !error;
-    return (react_1.default.createElement("div", { className: (0, clsx_1.default)('resource-picker', isDisabled && 'bg-gray-300') },
+    return (react_1.default.createElement("div", { className: (0, clsx_1.default)('resource-picker', isDisabled && 'resource-picker--disabled') },
         isImagePicker ? (react_1.default.createElement(PhotoLibraryRounded_1.default, { "aria-hidden": true, className: "w-6 h-6" })) : (react_1.default.createElement(AdsClickRounded_1.default, { "aria-hidden": true, className: "w-6 h-6" })),
         isEmpty ? (react_1.default.createElement(generic_browser_lib_1.ModalTrigger, { showLabel: true, label: isImagePicker ? `Choose image` : `Choose asset`, icon: react_1.default.createElement(AddCircleOutlineRounded_1.default, { "aria-hidden": true, className: `!w-4 !h-4 text-blue-300 ${isDisabled ? 'text-gray-600' : ''}` }), isDisabled: isDisabled, scope: "squiz-rb-scope" }, children)) : (react_1.default.createElement("div", { className: "resource-picker-info" },
             react_1.default.createElement("div", { className: "resource-picker-info__layout" },

package/lib/index.css

@@ -792,10 +792,6 @@
   --tw-bg-opacity: 1;
   background-color: rgb(237 237 237 / var(--tw-bg-opacity));
 }
-.squiz-rb-scope .bg-gray-300 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(224 224 224 / var(--tw-bg-opacity));
-}
 .squiz-rb-scope .bg-white {
   --tw-bg-opacity: 1;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
@@ -1017,6 +1013,12 @@
   gap: 0.5rem;
   justify-items: center;
 }
+.squiz-rb-scope .resource-picker--disabled {
+  cursor: not-allowed;
+  border-width: 0px;
+  --tw-bg-opacity: 1;
+  background-color: rgb(247 247 247 / var(--tw-bg-opacity));
+}
 .squiz-rb-scope .spinner {
   display: inline-block;
   border-radius: 9999px;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@squiz/resource-browser",
-  "version": "1.63.1-alpha.7",
+  "version": "1.64.0",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
   "scripts": {
@@ -73,6 +73,5 @@
   },
   "volta": {
     "node": "18.15.0"
-  },
-  "gitHead": "5ae8c433076d96683b0a98113f0e69f7c0dd0bff"
+  }
 }

package/src/ResourcePicker/ResourcePicker.tsx

@@ -33,7 +33,7 @@ const ResourcePicker = ({
   const isEmpty = resource === null && !isLoading && !error;
 
   return (
-    <div className={clsx('resource-picker', isDisabled && 'bg-gray-300')}>
+    <div className={clsx('resource-picker', isDisabled && 'resource-picker--disabled')}>
       {isImagePicker ? (
         <PhotoLibraryRoundedIcon aria-hidden className="w-6 h-6" />
       ) : (

package/src/ResourcePicker/resource-picker.scss

@@ -10,4 +10,7 @@
       @apply justify-items-center;
     }
   }
+  &--disabled {
+    @apply bg-gray-50 border-0 cursor-not-allowed;
+  }
 }