From c1e18d0ad3ed02f33dd4261b623b59b88b36c8c5 Mon Sep 17 00:00:00 2001
From: Alfredo Narvaez <alfredonado@gmail.com>
Date: Mon, 9 Feb 2026 16:16:20 +0100
Subject: [PATCH 1/4] feat(components/molecule/photoUploader): hide delete
 button

---
 .../demo/articles/HideDeleteButtonArticle.js  | 81 +++++++++++++++++++
 .../photoUploader/src/PhotosPreview/index.js  |  3 +
 .../photoUploader/src/ThumbCard/index.js      | 38 +++++----
 .../molecule/photoUploader/src/index.js       |  5 ++
 .../photoUploader/src/styles/index.scss       |  2 +-
 5 files changed, 111 insertions(+), 18 deletions(-)
 create mode 100644 components/molecule/photoUploader/demo/articles/HideDeleteButtonArticle.js

diff --git a/components/molecule/photoUploader/demo/articles/HideDeleteButtonArticle.js b/components/molecule/photoUploader/demo/articles/HideDeleteButtonArticle.js
new file mode 100644
index 0000000000..6ca90388b0
--- /dev/null
+++ b/components/molecule/photoUploader/demo/articles/HideDeleteButtonArticle.js
@@ -0,0 +1,81 @@
+import PropTypes from 'prop-types'
+
+import {Article, Code, H2, Paragraph} from '@s-ui/documentation-library'
+
+import MoleculePhotoUploader from '../../src/index.js'
+import {
+  _addPhotoTextButton,
+  _addPhotoTextSkeleton,
+  _callbackPhotosRejected,
+  _callbackPhotosUploaded,
+  _callbackUploadPhoto,
+  _dragPhotoDividerTextInitialContent,
+  _dragPhotoTextInitialContent,
+  _dropPhotosHere,
+  _errorCorruptedPhotoUploaded,
+  _errorFileExcededMaxSize,
+  _errorFormatPhotoUploaded,
+  _errorInitialPhotoDownloadError,
+  _limitPhotosUploaded,
+  _mainPhotoLabel,
+  _maxPhotos,
+  _notificationErrorFormatPhotoUploaded,
+  _uploadingPhotosText
+} from '../config.js'
+import {
+  _addMorePhotosIcon,
+  _deleteIcon,
+  _dragPhotosIcon,
+  _infoIcon,
+  _rejectPhotosIcon,
+  _retryErrorPhotosIcon,
+  _rotateIcon
+} from '../icons.js'
+
+const HideDeleteButtonArticle = ({className}) => {
+  return (
+    <Article className={className}>
+      <H2>Hide Delete Button</H2>
+      <Paragraph>
+        When <Code>hideDeleteButton</Code> prop is set to <Code>true</Code>, the delete button will be hidden from the
+        thumb cards. This is useful when you want to prevent users from deleting uploaded photos.
+      </Paragraph>
+      <Paragraph>Try uploading some photos below to see how the delete button is hidden:</Paragraph>
+      <MoleculePhotoUploader
+        addMorePhotosIcon={_addMorePhotosIcon}
+        addPhotoTextButton={_addPhotoTextButton}
+        addPhotoTextSkeleton={_addPhotoTextSkeleton}
+        callbackPhotosRejected={_callbackPhotosRejected}
+        callbackPhotosUploaded={_callbackPhotosUploaded}
+        callbackUploadPhoto={_callbackUploadPhoto}
+        deleteIcon={_deleteIcon}
+        dragPhotosIcon={_dragPhotosIcon}
+        dragPhotoTextInitialContent={_dragPhotoTextInitialContent}
+        dragPhotoDividerTextInitialContent={_dragPhotoDividerTextInitialContent}
+        dropPhotosHereText={_dropPhotosHere}
+        errorCorruptedPhotoUploadedText={_errorCorruptedPhotoUploaded}
+        errorFileExcededMaxSizeText={_errorFileExcededMaxSize}
+        errorFormatPhotoUploadedText={_errorFormatPhotoUploaded}
+        errorInitialPhotoDownloadErrorText={_errorInitialPhotoDownloadError}
+        hideDeleteButton={true}
+        infoIcon={_infoIcon}
+        limitPhotosUploadedText={_limitPhotosUploaded}
+        mainPhotoLabel={_mainPhotoLabel}
+        maxPhotos={_maxPhotos}
+        notificationErrorFormatPhotoUploaded={_notificationErrorFormatPhotoUploaded}
+        rejectPhotosIcon={_rejectPhotosIcon}
+        retryIcon={_retryErrorPhotosIcon}
+        rotateIcon={_rotateIcon}
+        uploadingPhotosText={_uploadingPhotosText}
+      />
+    </Article>
+  )
+}
+
+HideDeleteButtonArticle.displayName = 'HideDeleteButtonArticle'
+
+HideDeleteButtonArticle.propTypes = {
+  className: PropTypes.string
+}
+
+export default HideDeleteButtonArticle
diff --git a/components/molecule/photoUploader/src/PhotosPreview/index.js b/components/molecule/photoUploader/src/PhotosPreview/index.js
index d1d20784f1..a3c4b4304a 100644
--- a/components/molecule/photoUploader/src/PhotosPreview/index.js
+++ b/components/molecule/photoUploader/src/PhotosPreview/index.js
@@ -43,6 +43,7 @@ const PhotosPreview = ({
   dragIcon,
   errorInitialPhotoDownloadErrorText,
   files,
+  hideDeleteButton,
   inputId,
   isPhotoUploaderFully,
   mainPhotoLabel,
@@ -178,6 +179,7 @@ const PhotosPreview = ({
               deleteButtonAriaLabel={deleteButtonAriaLabel}
               deleteIcon={deleteIcon()}
               dragIcon={dragIcon()}
+              hideDeleteButton={hideDeleteButton}
               iconSize={thumbIconSize}
               image={file}
               index={index}
@@ -253,6 +255,7 @@ PhotosPreview.propTypes = {
   dragIcon: PropTypes.node,
   errorInitialPhotoDownloadErrorText: PropTypes.string.isRequired,
   files: PropTypes.array.isRequired,
+  hideDeleteButton: PropTypes.bool,
   inputId: PropTypes.string.isRequired,
   isPhotoUploaderFully: PropTypes.bool.isRequired,
   mainPhotoLabel: PropTypes.string.isRequired,
diff --git a/components/molecule/photoUploader/src/ThumbCard/index.js b/components/molecule/photoUploader/src/ThumbCard/index.js
index dd552dab9e..4a33824706 100644
--- a/components/molecule/photoUploader/src/ThumbCard/index.js
+++ b/components/molecule/photoUploader/src/ThumbCard/index.js
@@ -22,6 +22,7 @@ const ThumbCard = ({
   deleteButtonAriaLabel,
   deleteIcon,
   dragIcon,
+  hideDeleteButton = false,
   iconSize = ATOM_ICON_SIZES.small,
   image,
   index,
@@ -66,23 +67,25 @@ const ThumbCard = ({
       </div>
       <Content file={image} index={index} />
       <div className={ACTION_THUMB_CARD_CLASS_NAME}>
-        <div className={BUTTON_THUMB_CARD_CLASS_NAME}>
-          <AtomButton
-            aria-label={`${deleteButtonAriaLabel} ${thumbCardLabel}`}
-            design={atomButtonDesigns.LINK}
-            fullWidth
-            onClick={() => callbackDeleteItem(index)}
-            size={atomButtonSizes.SMALL}
-            tabIndex="0"
-            type="button"
-          >
-            <div className={`${BUTTON_THUMB_CARD_CLASS_NAME}Icon`}>
-              <AtomIcon color={ATOM_ICON_COLORS.currentColor} size={iconSize}>
-                {deleteIcon}
-              </AtomIcon>
-            </div>
-          </AtomButton>
-        </div>
+        {!hideDeleteButton && (
+          <div className={BUTTON_THUMB_CARD_CLASS_NAME}>
+            <AtomButton
+              aria-label={`${deleteButtonAriaLabel} ${thumbCardLabel}`}
+              design={atomButtonDesigns.LINK}
+              fullWidth
+              onClick={() => callbackDeleteItem(index)}
+              size={atomButtonSizes.SMALL}
+              tabIndex="0"
+              type="button"
+            >
+              <div className={`${BUTTON_THUMB_CARD_CLASS_NAME}Icon`}>
+                <AtomIcon color={ATOM_ICON_COLORS.currentColor} size={iconSize}>
+                  {deleteIcon}
+                </AtomIcon>
+              </div>
+            </AtomButton>
+          </div>
+        )}
         {hasErrors ? (
           <div className={BUTTON_THUMB_CARD_CLASS_NAME}>
             <AtomButton
@@ -135,6 +138,7 @@ ThumbCard.propTypes = {
   deleteButtonAriaLabel: PropTypes.string.isRequired,
   deleteIcon: PropTypes.node.isRequired,
   dragIcon: PropTypes.node.isRequired,
+  hideDeleteButton: PropTypes.bool,
   iconSize: PropTypes.oneOf(Object.keys(ATOM_ICON_SIZES)),
   image: PropTypes.object.isRequired,
   index: PropTypes.number,
diff --git a/components/molecule/photoUploader/src/index.js b/components/molecule/photoUploader/src/index.js
index d5773c4e70..88197e7f46 100644
--- a/components/molecule/photoUploader/src/index.js
+++ b/components/molecule/photoUploader/src/index.js
@@ -68,6 +68,7 @@ const MoleculePhotoUploader = forwardRef(
       errorFormatPhotoUploadedText,
       errorInitialPhotoDownloadErrorText,
       errorSaveImageEndpoint,
+      hideDeleteButton = false,
       id = DEFAULT_INPUT_ID,
       infoIcon = noop,
       initialPhotos = [],
@@ -313,6 +314,7 @@ const MoleculePhotoUploader = forwardRef(
                 deleteIcon={deleteIcon}
                 dragDelay={dragDelay}
                 dragIcon={dragIcon}
+                hideDeleteButton={hideDeleteButton}
                 errorInitialPhotoDownloadErrorText={errorInitialPhotoDownloadErrorText}
                 files={files}
                 inputId={id}
@@ -454,6 +456,9 @@ MoleculePhotoUploader.propTypes = {
   /** Text showed when the user drag files into the dropzone, to indicate he can drop */
   dropPhotosHereText: PropTypes.string.isRequired,
 
+  /** Hide the delete button on thumb cards */
+  hideDeleteButton: PropTypes.bool,
+
   /** Id of the input element */
   id: PropTypes.string,
 
diff --git a/components/molecule/photoUploader/src/styles/index.scss b/components/molecule/photoUploader/src/styles/index.scss
index 0d7a2f9cd9..0f72fab3c9 100644
--- a/components/molecule/photoUploader/src/styles/index.scss
+++ b/components/molecule/photoUploader/src/styles/index.scss
@@ -301,7 +301,7 @@ $skeleton-class: '#{$base-class}-skeleton';
       display: flex;
       justify-content: center;
       padding: $p-photo-uploader-action-buttons;
-      width: 50%;
+      width: 100%;
 
       &:first-of-type {
         border-radius: 0 0 0 $bdrs-photo-uploader-thumb-card;

From 0bb84182ebfe00833c2d8965689bbf71ec5cbb47 Mon Sep 17 00:00:00 2001
From: Alfredo Narvaez <alfredonado@gmail.com>
Date: Mon, 9 Feb 2026 16:16:42 +0100
Subject: [PATCH 2/4] feat(components/molecule/photoUploader/demo): add hide
 delete button demo

---
 components/molecule/photoUploader/demo/index.js | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/components/molecule/photoUploader/demo/index.js b/components/molecule/photoUploader/demo/index.js
index f85f7b7516..21264c3026 100644
--- a/components/molecule/photoUploader/demo/index.js
+++ b/components/molecule/photoUploader/demo/index.js
@@ -1,6 +1,7 @@
 import {Code, H1, Paragraph} from '@s-ui/documentation-library'
 
 import DefaultArticle from './articles/DefaultArticle.js'
+import HideDeleteButtonArticle from './articles/HideDeleteButtonArticle.js'
 import InitialPhotosArticle from './articles/InitialPhotosArticle.js'
 import WithContentArticle from './articles/WithContentArticle.js'
 import {CLASS_DEMO_SECTION} from './config.js'
@@ -15,6 +16,8 @@ const Demo = () => {
       </Paragraph>
       <DefaultArticle className={CLASS_DEMO_SECTION} />
       <br />
+      <HideDeleteButtonArticle className={CLASS_DEMO_SECTION} />
+      <br />
       <InitialPhotosArticle className={CLASS_DEMO_SECTION} />
       <br />
       <WithContentArticle className={CLASS_DEMO_SECTION} />

From c8553f2f7936f7043637015fc44ff0a44fe26ed4 Mon Sep 17 00:00:00 2001
From: Alfredo Narvaez <alfredonado@gmail.com>
Date: Wed, 11 Feb 2026 12:42:29 +0100
Subject: [PATCH 3/4] feat(components/molecule/photoUploader): update prop name

---
 .../molecule/photoUploader/src/PhotosPreview/index.js     | 6 +++---
 components/molecule/photoUploader/src/ThumbCard/index.js  | 6 +++---
 components/molecule/photoUploader/src/index.js            | 8 ++++----
 3 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/components/molecule/photoUploader/src/PhotosPreview/index.js b/components/molecule/photoUploader/src/PhotosPreview/index.js
index a3c4b4304a..4921938a5c 100644
--- a/components/molecule/photoUploader/src/PhotosPreview/index.js
+++ b/components/molecule/photoUploader/src/PhotosPreview/index.js
@@ -43,7 +43,7 @@ const PhotosPreview = ({
   dragIcon,
   errorInitialPhotoDownloadErrorText,
   files,
-  hideDeleteButton,
+  showDeleteButton,
   inputId,
   isPhotoUploaderFully,
   mainPhotoLabel,
@@ -179,7 +179,7 @@ const PhotosPreview = ({
               deleteButtonAriaLabel={deleteButtonAriaLabel}
               deleteIcon={deleteIcon()}
               dragIcon={dragIcon()}
-              hideDeleteButton={hideDeleteButton}
+              showDeleteButton={showDeleteButton}
               iconSize={thumbIconSize}
               image={file}
               index={index}
@@ -255,7 +255,7 @@ PhotosPreview.propTypes = {
   dragIcon: PropTypes.node,
   errorInitialPhotoDownloadErrorText: PropTypes.string.isRequired,
   files: PropTypes.array.isRequired,
-  hideDeleteButton: PropTypes.bool,
+  showDeleteButton: PropTypes.bool,
   inputId: PropTypes.string.isRequired,
   isPhotoUploaderFully: PropTypes.bool.isRequired,
   mainPhotoLabel: PropTypes.string.isRequired,
diff --git a/components/molecule/photoUploader/src/ThumbCard/index.js b/components/molecule/photoUploader/src/ThumbCard/index.js
index 4a33824706..686410b6d3 100644
--- a/components/molecule/photoUploader/src/ThumbCard/index.js
+++ b/components/molecule/photoUploader/src/ThumbCard/index.js
@@ -22,7 +22,7 @@ const ThumbCard = ({
   deleteButtonAriaLabel,
   deleteIcon,
   dragIcon,
-  hideDeleteButton = false,
+  showDeleteButton = true,
   iconSize = ATOM_ICON_SIZES.small,
   image,
   index,
@@ -67,7 +67,7 @@ const ThumbCard = ({
       </div>
       <Content file={image} index={index} />
       <div className={ACTION_THUMB_CARD_CLASS_NAME}>
-        {!hideDeleteButton && (
+        {showDeleteButton && (
           <div className={BUTTON_THUMB_CARD_CLASS_NAME}>
             <AtomButton
               aria-label={`${deleteButtonAriaLabel} ${thumbCardLabel}`}
@@ -138,7 +138,7 @@ ThumbCard.propTypes = {
   deleteButtonAriaLabel: PropTypes.string.isRequired,
   deleteIcon: PropTypes.node.isRequired,
   dragIcon: PropTypes.node.isRequired,
-  hideDeleteButton: PropTypes.bool,
+  showDeleteButton: PropTypes.bool,
   iconSize: PropTypes.oneOf(Object.keys(ATOM_ICON_SIZES)),
   image: PropTypes.object.isRequired,
   index: PropTypes.number,
diff --git a/components/molecule/photoUploader/src/index.js b/components/molecule/photoUploader/src/index.js
index 88197e7f46..1cfba840f5 100644
--- a/components/molecule/photoUploader/src/index.js
+++ b/components/molecule/photoUploader/src/index.js
@@ -68,7 +68,7 @@ const MoleculePhotoUploader = forwardRef(
       errorFormatPhotoUploadedText,
       errorInitialPhotoDownloadErrorText,
       errorSaveImageEndpoint,
-      hideDeleteButton = false,
+      showDeleteButton = true,
       id = DEFAULT_INPUT_ID,
       infoIcon = noop,
       initialPhotos = [],
@@ -314,7 +314,7 @@ const MoleculePhotoUploader = forwardRef(
                 deleteIcon={deleteIcon}
                 dragDelay={dragDelay}
                 dragIcon={dragIcon}
-                hideDeleteButton={hideDeleteButton}
+                showDeleteButton={showDeleteButton}
                 errorInitialPhotoDownloadErrorText={errorInitialPhotoDownloadErrorText}
                 files={files}
                 inputId={id}
@@ -456,8 +456,8 @@ MoleculePhotoUploader.propTypes = {
   /** Text showed when the user drag files into the dropzone, to indicate he can drop */
   dropPhotosHereText: PropTypes.string.isRequired,
 
-  /** Hide the delete button on thumb cards */
-  hideDeleteButton: PropTypes.bool,
+  /** Show the delete button on thumb cards */
+  showDeleteButton: PropTypes.bool,
 
   /** Id of the input element */
   id: PropTypes.string,

From 85243042ba18fbcc59a35b1dec7ccff9329fa3b1 Mon Sep 17 00:00:00 2001
From: Alfredo Narvaez <alfredonado@gmail.com>
Date: Wed, 11 Feb 2026 12:42:44 +0100
Subject: [PATCH 4/4] feat(components/molecule/photoUploader/demo): update demo
 with new prop

---
 .../demo/articles/HideDeleteButtonArticle.js              | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/components/molecule/photoUploader/demo/articles/HideDeleteButtonArticle.js b/components/molecule/photoUploader/demo/articles/HideDeleteButtonArticle.js
index 6ca90388b0..76a23e3e54 100644
--- a/components/molecule/photoUploader/demo/articles/HideDeleteButtonArticle.js
+++ b/components/molecule/photoUploader/demo/articles/HideDeleteButtonArticle.js
@@ -17,6 +17,7 @@ import {
   _errorFormatPhotoUploaded,
   _errorInitialPhotoDownloadError,
   _limitPhotosUploaded,
+  _limitPhotosUploadedNotification,
   _mainPhotoLabel,
   _maxPhotos,
   _notificationErrorFormatPhotoUploaded,
@@ -37,7 +38,7 @@ const HideDeleteButtonArticle = ({className}) => {
     <Article className={className}>
       <H2>Hide Delete Button</H2>
       <Paragraph>
-        When <Code>hideDeleteButton</Code> prop is set to <Code>true</Code>, the delete button will be hidden from the
+        When <Code>showDeleteButton</Code> prop is set to <Code>false</Code>, the delete button will be hidden from the
         thumb cards. This is useful when you want to prevent users from deleting uploaded photos.
       </Paragraph>
       <Paragraph>Try uploading some photos below to see how the delete button is hidden:</Paragraph>
@@ -57,9 +58,10 @@ const HideDeleteButtonArticle = ({className}) => {
         errorFileExcededMaxSizeText={_errorFileExcededMaxSize}
         errorFormatPhotoUploadedText={_errorFormatPhotoUploaded}
         errorInitialPhotoDownloadErrorText={_errorInitialPhotoDownloadError}
-        hideDeleteButton={true}
+        showDeleteButton={false}
         infoIcon={_infoIcon}
         limitPhotosUploadedText={_limitPhotosUploaded}
+        limitPhotosUploadedNotification={_limitPhotosUploadedNotification}
         mainPhotoLabel={_mainPhotoLabel}
         maxPhotos={_maxPhotos}
         notificationErrorFormatPhotoUploaded={_notificationErrorFormatPhotoUploaded}
@@ -72,7 +74,7 @@ const HideDeleteButtonArticle = ({className}) => {
   )
 }
 
-HideDeleteButtonArticle.displayName = 'HideDeleteButtonArticle'
+HideDeleteButtonArticle.displayName = 'ShowDeleteButtonArticle'
 
 HideDeleteButtonArticle.propTypes = {
   className: PropTypes.string