Clay: ClayAlert with action button

[dgarciasarai]

I have an use case to use an Alert with an action in the A/B Testing sidebar when a test has a winner variant. I found this patter in Lexicon https://liferay.design/lexicon/core-components/alerts/ but not in Clay.

What is your question?

Is this supported in ClayAlert?

/cc @drakonux @laugardie

[drakonux]

Hi Sarai!

Is this supported in ClayAlert?

At least it should be in Clay v3. Duurii documented it on LEXI-509 cc\ @bryceosterhaus

[matuzalemsteles]

@pat270 do we need any special markup to reach this result?

[bryceosterhaus]

I was able to create the layout with react components, you may need to add some custom styles for the button color. https://codesandbox.io/s/clay2765-s039q

[edalgrin]

A few months ago, I created an example using outline-success instead of secondary

The problem was the background and the solutions we found were:
1) Add the missing CSS code for the single usage of this component
2) Add a new variation of buttons with the white background
3) Add a CSS rule for the outlined buttons inside the Alert component

The problem with 1st solution is the duplicated code we need to create to use this variation more than once
The problem with the 2nd solution is that we are adding many lines of code for a component we may be using just once
The problem with the 3rd solution is that we may need to use this variation outside the Alert component for new designs

There is a 4th solution we should explore, changing the default outlined versions of buttons in Atlas and the current usages of these buttons but it doesn't seem an easy task

[pat270]

@matuzalemsteles I remember from a while ago @victorvalle saying this doesn't need to be handled in Clay CSS. I'm not 100% sure, I can't seem to find anything on it. We can add button variants in alerts if we need. The selector will probably be .alert-success .alert-btn.

[victorvalle]

I don't remember what I said :(. For the moment these button variants are only needed in alerts.
A way of doing it is just creating them as button variants and Lexicon will document how we expect people to use them and where to not use them. With this clarification, it should work out well.

[matuzalemsteles]

Hmm, we will probably need some extra markup to align the button with the text and add extra spacing...

[pat270]

@matuzalemsteles that is probably the case.

[drakonux]

Lima-team is asking for this component in Alerts. Check LEXI-509 Any update on the progress of this ticket?

[pat270]

@matuzalemsteles I sent a pr with this pattern. The markup should look something like:

<div class="alert alert-dismissible alert-notification alert-danger" role="alert">
    <div class="autofit-row alert-autofit-row">
        <div class="autofit-col">
            <div class="autofit-section">
                <span class="alert-indicator">
                    ...
                </span>
            </div>
        </div>
        <div class="autofit-col autofit-col-expand">
            <div class="autofit-section">
                ...
                <div class="alert-footer">
                    <div class="btn-group">
                        <div class="btn-group-item">
                            <button class="btn alert-btn" type="button">Refresh</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <button aria-label="Close" class="close" data-dismiss="alert" type="button"></button>
</div>