Show Flag position

[janambroz]

Hi there,

I am using <FlagsProvider> in my app:

ReactDOM.render(
    <React.StrictMode>
        <FlagsProvider>
            <App/>
        </FlagsProvider>
    </React.StrictMode>,
    document.getElementById('root')
);

And when i try use method showFlag():

showFlag({
            appearance: "success",
            icon:
            <SuccessIcon
                primaryColor={token('color.icon.success', G300)}
                label="Success"
                size="medium"
            />,
            title:"Test",
            isAutoDismiss:true
        }

But this Flag is covering my content:

1.How I can force this Flag display in down left corner of webpage?
2. How I can show close button?

Thank you

[danielwester]

Since you’re using Custom UI and Atlaskit - it’s doing what it’s supposed to do - rendering the flag in your window. What you’re looking for is https://developer.atlassian.com/platform/forge/custom-ui-bridge/showFlag/ which will open the flag in the host app environment.

[janambroz]

thank you, I used showFlag method and position did improve, but the close button does not show.
Do you know how to show closing button?

code:

showFlag(
                {
                    appearance:'success',
                    title: flagMessage.SAVED_SUCCESSFULLY,
                    description: flagMessage.MAPPING_SAVED,
                    isAutoDismiss:true,
                    id: 1,
                    type:"success"}
            )

picture:

Thank you

[ddraper]

Hey Jan,

Looking at the documentation for @atlaskit/flag I think that you need to remove the appearance property.

Compare the different examples on this page (https://atlassian.design/components/flag/code) and you’ll note that a flag without an appearance has the close icon in the top-right.

I hope this helps, please let me know if this doesn’t resolve the issue and I’ll investigate further,

Regards,
Dave