🚑 fix(dialog): showCloseButton Prop Warning in DialogContent Component

[ohneda]

Summary

I noticed that the following warning is being output to the console in places where DialogContent is rendered, as well as in the tests for Dialog.tsx.

 Warning: React does not recognize the `showCloseButton` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `showclosebutton` instead. If you accidentally passed it from a parent component, remove it from the DOM element.
          at div
          at asChild (/Users/oneda/tmp/test/librechat-dev/node_modules/@radix-ui/react-primitive/dist/packages/react/primitive/src/Primitive.tsx:46:13)
          at disableOutsidePointerEvents (/Users/oneda/tmp/test/librechat-dev/node_modules/@radix-ui/react-dismissable-layer/dist/packages/react/dismissable-layer/src/DismissableLayer.tsx:66:7)
          at children (/Users/oneda/tmp/test/librechat-dev/node_modules/@radix-ui/react-slot/dist/packages/react/slot/src/Slot.tsx:61:11)
          at children (/Users/oneda/tmp/test/librechat-dev/node_modules/@radix-ui/react-slot/dist/packages/react/slot/src/Slot.tsx:13:11)
          at asChild (/Users/oneda/tmp/test/librechat-dev/node_modules/@radix-ui/react-primitive/dist/packages/react/primitive/src/Primitive.tsx:46:13)
          at loop (/Users/oneda/tmp/test/librechat-dev/node_modules/@radix-ui/react-focus-scope/dist/packages/react/focus-scope/src/FocusScope.tsx:52:5)
          at __scopeDialog (/Users/oneda/tmp/test/librechat-dev/node_modules/@radix-ui/react-dialog/dist/packages/react/dialog/src/Dialog.tsx:384:13)
          at __scopeDialog (/Users/oneda/tmp/test/librechat-dev/node_modules/@radix-ui/react-dialog/dist/packages/react/dialog/src/Dialog.tsx:259:58)
          at present (/Users/oneda/tmp/test/librechat-dev/node_modules/@radix-ui/react-presence/dist/packages/react/presence/src/Presence.tsx:13:11)
          at __scopeDialog (/Users/oneda/tmp/test/librechat-dev/node_modules/@radix-ui/react-dialog/dist/packages/react/dialog/src/Dialog.tsx:234:64)
          at div
          at children (/Users/oneda/tmp/test/librechat-dev/node_modules/@radix-ui/react-slot/dist/packages/react/slot/src/Slot.tsx:61:11)
          at children (/Users/oneda/tmp/test/librechat-dev/node_modules/@radix-ui/react-slot/dist/packages/react/slot/src/Slot.tsx:13:11)
          at asChild (/Users/oneda/tmp/test/librechat-dev/node_modules/@radix-ui/react-primitive/dist/packages/react/primitive/src/Primitive.tsx:46:13)
          at container (/Users/oneda/tmp/test/librechat-dev/node_modules/@radix-ui/react-portal/dist/packages/react/portal/src/Portal.tsx:23:11)
          at present (/Users/oneda/tmp/test/librechat-dev/node_modules/@radix-ui/react-presence/dist/packages/react/presence/src/Presence.tsx:13:11)
          at scope (/Users/oneda/tmp/test/librechat-dev/node_modules/@radix-ui/react-context/dist/packages/react/context/src/createContext.tsx:58:15)
          at __scopeDialog (/Users/oneda/tmp/test/librechat-dev/node_modules/@radix-ui/react-dialog/dist/packages/react/dialog/src/Dialog.tsx:146:11)
          at className (/Users/oneda/tmp/test/librechat-dev/client/src/components/ui/Dialog.tsx:13:3)
          at className (/Users/oneda/tmp/test/librechat-dev/client/src/components/ui/Dialog.tsx:43:6)
          at /Users/oneda/tmp/test/librechat-dev/client/src/components/ui/DialogTemplate.tsx:32:31
          at scope (/Users/oneda/tmp/test/librechat-dev/node_modules/@radix-ui/react-context/dist/packages/react/context/src/createContext.tsx:58:15)
          at __scopeDialog (/Users/oneda/tmp/test/librechat-dev/node_modules/@radix-ui/react-dialog/dist/packages/react/dialog/src/Dialog.tsx:53:5)
          at initializeState_DEPRECATED (/Users/oneda/tmp/test/librechat-dev/node_modules/recoil/cjs/index.js:4438:3)
          at override (/Users/oneda/tmp/test/librechat-dev/node_modules/recoil/cjs/index.js:4604:5)

However, this error is not output when running docker compose up. I'm not sure if it's due to differences in the library versions in my local environment or differences in the runtime environment. Is this warning not appearing in other developers' environments?

Also, The Close button is always displayed regardless of the value of showCloseButton.
For example, in DeleteButton.tsx, showCloseButton is set to false, but the Close button is always displayed.

Cause

I suspect that the reason for this warning message is that the showCloseButton property is being passed to DialogPrimitive.Content, which does not have that property.

Change Type

• Bug fix (non-breaking change which fixes an issue)

• The showCloseButton prop is now destructured in the component's function parameters and is no longer passed to the DialogPrimitive.Content component.
• showCloseButton now defaults to true. This maintains backward compatibility.
• If showCloseButton is false, DialogPrimitive.Close is not rendered. In the current main branch, this setting is used in the following three files:
  • SaveAsPresetDialog.tsx
  • DeleteButton.tsx
  • PresetItems.tsx

Testing

• I confirmed that when running the unit tests, all tests pass correctly without any warnings.
• I manually tested that the Close button is displayed when showCloseButton is true and is not displayed when it is false.
• To ensure that existing functionality is not affected, I ran all existing tests.

Checklist

• My code adheres to this project's style guidelines
• I have performed a self-review of my own code
• I have commented in any complex areas of my code
• I have made pertinent documentation changes
• My changes do not introduce new warnings
• I have written tests demonstrating that my changes are effective or that my feature works
• Local unit tests pass with my changes
• Any changes dependent on mine have been merged and published in downstream modules.
• New documents have been locally validated with mkdocs

[danny-avila]

thank you!