Change Alert component sizing

[destradaarias]

I'm using the Alert component, but apparently I can't modify the size of both the alert and close icons? The alert is unnecessarily large and I want to be able to modify the size of the Alert (and it's components).

[serifluous]

Hey @destradaarias! Can you share a screenshot (feel free to drop it in the #help-design-system Slack channel if it's not publicly shareable), or describe where you need a differently sized alert and close icon?

We've limited a lot of custom styling on our components to maintain consistency across our products, but if you've got a use case for a shorter Alert, we'd love to see it.

[destradaarias]

Here are some of the most relevant dependencies in package.json:

    "@twilio-paste/anchor": "^1.1.3",
    "@twilio-paste/animation-library": "^0.2.1",
    "@twilio-paste/button": "^1.1.29",
    "@twilio-paste/core": "^2.16.16",
    "@twilio-paste/design-tokens": "^5.5.0",
    "@twilio-paste/dropdown-library": "^0.1.2",
    "@twilio-paste/icons": "^2.6.2",
    "@twilio-paste/reakit-library": "^0.6.2",
    "@twilio-paste/style-props": "^1.4.0",
    "@twilio-paste/styling-library": "^0.1.1",
    "@twilio-paste/theme": "^3.2.10",
    "@twilio-paste/types": "^3.0.14",
    "@types/react": "^16.4.14",
    "@types/react-router": "4.0.25",
    "connected-react-router": "^4.5.0",
    "history": "^4.7.2",
    "husky": "^3.0.1",
    "jest-coverage-ratchet": "0.2.3",
    "prop-types": "^15.7.2",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-hot-loader": "4.3.6",
    "react-redux": "^4.4.5",
    "react-router-config": "^4.4.0-beta.6",
    "react-router-dom": "^4.3.1",
    "react-uid": "^2.3.0",

[richbachman]

Nothing is standing out there as missing. Can you share a code sample of how you're using the Alert component?

[richbachman]

One more thing I just thought about. Are you wrapping the component in our Theme Provider? https://paste.twilio.design/getting-started/engineering#usage

Also you can remove the anchor and button deps in your package.json, and just use core.

[destradaarias]

I am not using the theme provider

[destradaarias]

The theme provider fixed it! thank you

Side note: it wasn't clear to me, on the Alert page, that I had to do some sort of setup prior to using this component (other than yarn add @twilio-paste/core). Maybe add a reminder somewhere to check out the "Getting started" section?

[richbachman]

One more thing I just thought about. Are you wrapping the component in our Theme Provider? https://paste.twilio.design/getting-started/engineering#usage

Great. Glad that that fixed the issue.

[destradaarias]

@richbachman Quick question: does the alert not have a way to make it disappear after a certain amount of time? I don't need them to persist for more than, say, five seconds. Or will I have to use custom CSS for that?

[richbachman]

Hi @destradaarias our Alerts are meant to persist. There is dismissible Alert which has requires the user to click on the close button. You're likely looking for a Toast, which is in our backlog. For now, you can use a neutral alert and swap over when we have the toast. The toast will have an option to automatically time out.