Notification Action Button Styling: Action button text collapsed.

[nbgooch]

Detailed description

We are unhappy with the styling on the ibm-notification component with action button. The button is too small so anything over X chars gets collapsed and looks bad. This is the outcome

And here is the notification object

notificationObject = {
            type: 'info',
            title: this.translate.instant('beta-banner-notification-title'),
            message: this.translate.instant('beta-banner-notification-message'),
            showClose: true,
            lowContrast: true,
            actions: [{
                text: "Learn More",
                click: console.log("Hey")
            }]
        }

Is this a feature request (new component, new icon), a bug, or a general issue?

I believe this is a feature request related to the ibm-notification component where the action button should be able to be resized so that text is contained on a single line.

Is this issue related to a specific component?

Notification component

What did you expect to happen? What happened instead? What would you like to see changed?

Wish:

Reality:

I just wish the text width or button width was more easily targetable, customizable. Could do something like this

    ...
    actions: [{
                text: "Learn More",
                click: ()=>{},
                size: "md" OR
                width: "100px"
                style: "width:100px" OR
                class: "selector-to-complement-default-styling" OR
                "some other property that would allow you to config the button from the notification object"
            }]

What browser are you working in?

Chrome

What version of the Carbon Design System are you using?

"@carbon/ibmdotcom-web-components": "^1.4.1",

What offering/product do you work on? Any pressing ship or release dates we should be aware of?

IBM Employee working on SDMA Next Gen.

Steps to reproduce the issue

Codesandbox

Storybook

[cal-smith]

Which version of carbon-components-angular and carbon-components is this with?

Just looking at the issue, this may be an style issue upstream, or we could just be missing a class for the link text.

[nbgooch]

We have been regularly updating.

"dependencies": {
        "@angular/animations": "~10.0.4",
        "@angular/common": "~10.0.4",
        "@angular/compiler": "~10.0.4",
        "@angular/core": "~10.0.4",
        "@angular/forms": "~10.0.4",
        "@angular/platform-browser": "~10.0.4",
        "@angular/platform-browser-dynamic": "~10.0.4",
        "@angular/router": "~10.0.4",
        "@carbon/ibmdotcom-web-components": "^1.4.1",
        "@carbon/icons-angular": "^11.1.4",
        "@carbon/themes": "^10.15.0",
        "@webcomponents/webcomponentsjs": "^2.5.0",
         ...
        "carbon-components": "^10.16.0",
        "carbon-components-angular": "4.40.0",
         ...
    },