Paste should log warnings instead of crashing in production

[cdignam-segment]

Some components will crash if you pass props incorrectly. I think this is fine for development, but for production I think it would be better to log warnings instead of throw errors.

Button will compile correctly like this, but crash in production:

<Button variant="primary" href="https://example.com" as="a" disabled={true}>Click me</Button>

paste/packages/paste-core/components/button/src/Button.tsx

Line 100 in 91e0f8b

throw new Error(`[Paste: Button] <Button as="a"> cannot be disabled or loading.`);

[TwilioPasteBot]

Disclaimer: This is a very experimental bot using OpenAI's GPT-4. The answers may not be correct, a human will review the answer and update it if necessary.

---

According to the Paste Core 9.0.0 documentation, the Button component has additional validation that throws an error if the disabled or loading props are set to true for a Button as a link. This is a functionality breaking change to existing disabled link buttons.

Here's the relevant section from the documentation:

*   \[Button] Additional validation added to throw an error if the `disabled` or `loading` props are set to true for a Button as link. This is a functionality breaking change to existing disabled link buttons. More details:  [#1307](https://github.com/twilio-labs/paste/pull/1307)

    **ACTION NEEDED**: Ensure there are no instances of Buttons as links that use `disabled` or `loading` props as true.

    ```
    // prior to action taken:
    <Button as="a" href="https://twilio.com" disabled>Twilio</Button>

    // AFTER action taken:
    <Button as="a" href="https://twilio.com">Twilio</Button>

    ```

So, the code you provided:

<Button variant="primary" href="https://example.com" as="a" disabled={true}>Click me</Button>

Will indeed throw an error, as it's using the disabled prop set to true for a Button as a link. To avoid this error, you should ensure there are no instances of Buttons as links that use disabled or loading props as true.

I also did a search, and I managed to find these other Discussions that might be similar or related to your question. Give them a read to see if they answer your question. If they do, head back here and update this discussion and mark it as answered, pointing others to the related discussion:

• Conditional rendering in a Stack causes Hook error (updated: 10/19/2020, similarity score: 86%)
• Prototype kit errors (updated: 06/28/2022, similarity score: 85%)
• Test that involve Heading component output console Warning: Failed prop type (updated: 08/22/2023, similarity score: 85%)

[SiTaggart]

Hi @cdignam-segment

This is something we did in the older components of the system, we do it a lot less now and rely on type guards more.

It surprisingly hardly ever comes up, I think this is the second time in over 4 years, so we've never really seen the need to pull it out of some of the older components.

It is kind of annoying it doesn't throw a compile error though, so I'll at least add a ticket to remedy that first. We might pull the error throwing at that point once we're covered with adequate type guards.