feat: add card mode outlined

[brunohkbx]

Summary

Implement MD outlined card.

https://material.io/components/cards

Resolves #2130

Elevated	Outlined

Elevated	Outlined

Test plan

1. Open the example app
2. Check the example showing an outlined card

[callstack-bot]

Hey @brunohkbx, thank you for your pull request 🤗. The documentation from this branch can be viewed here.

[github-actions]

The mobile version of example app from this branch is ready! You can see it here

.

[Trancever]

I don't like the way it's typed currently. The outlined card shouldn't accept elevation prop. Could you try something like that:

type OutlinedCardProps = {
  mode: 'outlined';
  elevation: never;
};

type ElevatedCardProps = {
  mode?: 'elevated';
  elevation?: number;
};

type Props = (OutlinedCardProps | ElevatedCardProps) & { Common Props };

I haven't tried that, so it might not work, but I would like to explore this way of handling conditional types.

[brunohkbx]

@Trancever I tried your approach and it wasn't working at first. So after some time debugging, I found a problem in the HOC withTheme. I removed it and it worked as follow:

Raises error
<Card mode="outlined" elevation={3} />

Works
<Card mode="elevated" elevation={3} />

After looking up the issue in withTheme I found a problem in its type declaration here
$Without it's not working as expected because Pick doesn't distribute over discriminated union types and you can read more about here

Should we fix the type declaration first?
type $Without<T, K extends keyof any> = T extends any ? Pick<T, Exclude<keyof T, K>> : never;
works for me

[Trancever]

I think we should first fix the type of the withTheme HOC. Could you submit a PR? 🙏

[brunohkbx]

Done 👍 callstack/react-theme-provider#96

[github-actions]

Hello 👋, this pull request has been open for more than 2 months with no activity on it. If you think this is still necessary with the latest version, please comment and ping a maintainer to get this reviewed, otherwise it will be closed automatically in 7 days.

[brunohkbx]

@lukewalczak I added a switch at the top to toggle the mode. WDYT?

[lukewalczak]

Hey @brunohkbx, thanks for updating the PR! I like the idea of switch and the whole feature 🎉 . I will test it a bit, ping the theme provider lib one more time and go through the code. Anyway I guess we're close to ship it!

[souhe]

@brunohkbx I just published a new version of theme-provider with your fix. Sorry for the lag.
The new version is now v3.0.6 I had to bump it a lot since we did a mistake with the previous release ;)

[brunohkbx]

@souhe thanks. I will update this PR

[brunohkbx]

TS now complains when using mode outlined + elevation cc @Trancever @lukewalczak

[lukewalczak]

TS now complains when using mode outlined + elevation

Isn't a correct behavior since you typed:

type OutlinedCardProps = {
  mode: 'outlined';
  elevation: never;
};

?

[brunohkbx]

@lukewalczak yeah it is. I'm just showing it. Works now with callstack/react-theme-provider 3.0.6

[lukewalczak]

yeah it is. I'm just showing it. Works now with callstack/react-theme-provider 3.0.6

Ahhh ok I see, sorry for misunderstanding 😅 thanks @brunohkbx!

[lukewalczak]

Awesome feature, thanks @brunohkbx for your work!