ToolbarButton: The ToolbarButton has no "hidden" property

[jannislmml]

Describe the bug

Why does the ToolbarButton has no hidden property?

Isolated Example

No response

Reproduction steps

...

Expected Behaviour

No response

Screenshots or Videos

No response

UI5 Web Components for React Version

2.6.0

UI5 Web Components Version

2.6.2

Browser

Chrome

Operating System

Windows 11

Additional Context

No response

Relevant log output

Organization

No response

Declaration

• I’m not disclosing any internal or sensitive information.

[Lukas742]

Hi @jannislmml

you can pass all HTMLAttributes to almost all of our components, including hidden. Why do you assume that it's not available, did you face issues when implementing it?

[jannislmml]

Hi @Lukas742

I have updated from version 1 to 2 and a lot has changed in the ObjectPage. Among other things, the toolbar with its toolbar buttons has now been added here. I only want to display some buttons in a certain situation. To do this, I have entered the condition in the hidden property. However, this has no effect. The disabled property works correctly.

Thank you!

Here is the corresponding part in my code:
<ObjectPage ref={detailRef} style={{ maxHeight: `${remainingHeight}px`, }} titleArea={ <ObjectPageTitle actionsBar={ <Toolbar design="Transparent"> {/* ToolbarButton hidden prop isnt available in v2 -> https://github.com/SAP/ui5-webcomponents/issues/10585 */} <ToolbarButton design="Emphasized" icon="hide" // hidden={editMode || !isActive(localSelectedSystemMessage)} disabled={editMode || !isActive(localSelectedSystemMessage)} onClick={handleDisableSystemMessage} /> <ToolbarButton design="Emphasized" icon="show" // hidden={editMode || isActive(localSelectedSystemMessage)} disabled={editMode || isActive(localSelectedSystemMessage)} onClick={handleEnableSystemMessage} /> <ToolbarButton design="Emphasized" icon="edit" // hidden={editMode} disabled={editMode} onClick={() => setEditMode(true)} /> <ToolbarButton design="Transparent" icon="decline" // hidden={editMode} disabled={editMode} onClick={() => clearSelectedSystemMessage()} /> <ToolbarButton design="Emphasized" icon="save" // hidden={!editMode} disabled={!editMode} onClick={onSave} /> <ToolbarButton design="Emphasized" icon="cancel" // hidden={!editMode} disabled={!editMode} onClick={onAbort} /> </Toolbar> } header={selectedSystemMessage?.Title} subHeader={ isActive(localSelectedSystemMessage) ? ( <ObjectStatus showDefaultIcon state="Positive"> {t("active")} </ObjectStatus> ) : ( <ObjectStatus showDefaultIcon state="Negative"> {t("inactive")} </ObjectStatus> ) } /> } selectedSectionId="settings" >

[Lukas742]

@jannislmml the example includes references to variables and functions that are not defined within the example. Without these, it's impossible to run or test the code.

Please create an isolated, reproducible example, preferably by leveraging the StackBlitz template.

[jannislmml]

@Lukas742 I have been able to reproduce the problem. It only exists if I add a condition to the hidden property and this is changed at runtime. Please take a look at the example. Example

[Lukas742]

Hi @jannislmml

this is probably because the ToolbarButton is an abstract ui5 web component. You can find out more about this here.

In React it's typical for such cases to conditional render elements. This way the DOM is not populated with elements that aren't displayed: https://stackblitz.com/edit/github-e98ms9jk-ux9r6kbn?file=src%2FApp.tsx

I'm going to forward this issue to the ui5-webcomponents repo, as the Toolbar and all sub components are developed there.

---

Hi Colleagues,
could you please check if the hidden attribute/property should be supported for the ToolbarButton?

[IlianaB]

Hello @ui5-webcomponents-topic-p I am forwarding this issue to you, because the hidden attribute does not work as expected on ui5-toolbar-button (it is taken into consideration at first, but upon change - it is not being correctly updated). Same works with ui5-button, ui5-label etc out of the box. However, it seems with ui5-toolbar-button there is a problem with the internally created button, which is not being updated. Most probably due to missing description of the hidden property as part of the reactive state of the ToolbarButton component.

Sample

1. Press on Edit button
   --> Edit button should be hidden, Save button should be shown