[PLAY-1581] Height, minHeight, maxHeight for Card, Flex, FlexItem, & Dialog

[jasperfurniss]

What does this PR do? A clear and concise description with your runway ticket url.
https://runway.powerhrg.com/backlog_items/PLAY-1581

In order to achieve the height functionality that the story demanded, we introduced a new utility function for handling specific global properties that require dynamic values (any px, %, or vh, etc). This has been on our Todo list for a looooong time, and I'm so happy we were able to knock out the work here in this story!

The work in this PR adds the following props for react: minHeight, maxHeight, height for React
The work in this PR adds the following props for rails: min_height, max_height, height for Rails

For now, these are applied to a few of our utility kits: Card, Flex, FlexItem, Dialog

We have a path forward to apply to all other kits, but for now this work unblocks the Template work for the PB-In-Nitro team, without shipping changes to every kit which would move this to a much higher risk-level.

Screenshots: Screenshots to visualize your addition/change

How to test? Steps to confirm the desired behavior:

1. Go to dialog, flex, flex_item, or card.
2. Add a height prop with a value.
3. See your styles get applied.

Checklist:

• LABELS Add a label: enhancement, bug, improvement, new kit, deprecated, or breaking. See Changelog & Labels for details.
• DEPLOY I have added the milano label to show I'm ready for a review.
• TESTS I have added test coverage to my code.

[github-actions]

🎉 Congratulations on creating an Alpha Version!

Your Alpha for Ruby Gems is 14.5.0.pre.alpha.PLAY15814040

Your Alpha for NPM is 14.5.0-alpha.PLAY15814040

[kangaree]

@jasperfurniss

Since we're adding these inline props to kit_base.rb, doesn't that mean we're adding these props to all Ruby kits?

Otherwise, looks really good to me! Clean, effective, and simple.

I've also got a few questions / comments which I've added.

[jasperfurniss]

@jasperfurniss

Since we're adding these inline props to kit_base.rb, doesn't that mean we're adding these props to all Ruby kits?

Otherwise, looks really good to me! Clean, effective, and simple.

I've also got a few questions / comments which I've added.

@kangaree We are only adding these to kits that use pb_content_tag. But none of it should be getting used/applied yet. Did your screen shot show up automatically in a doc example? Or did you implement code to make that happen.

[kangaree]

@jasperfurniss
Since we're adding these inline props to kit_base.rb, doesn't that mean we're adding these props to all Ruby kits?

Otherwise, looks really good to me! Clean, effective, and simple.
I've also got a few questions / comments which I've added.

@kangaree We are only adding these to kits that use pb_content_tag. But none of it should be getting used/applied yet. Did your screen shot show up automatically in a doc example? Or did you implement code to make that happen.

@jasperfurniss I checked out this branch and in playbook/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_default.html.erb, I made the following changes:

<%= pb_rails("fixed_confirmation_toast", props: {
  text: "Items Successfully Moved!!!",
  status: "success",
  height: "500px",
})%>

Edit: We talked in Connect and the plan moving forward we've got makes sense. This isn't applied to all ruby kits.

[jasperfurniss]

<%= pb_rails("fixed_confirmation_toast", props: {
  text: "Items Successfully Moved!!!",
  status: "success",
  height: "500px",
})%>

@kangaree Ah! Perfect! Then yes, you're ahead of the game, and testing the "beta" stuff that we aren't advertising for use yet. This will likely be a 1 of 2 ...or 1 of 3 story setup for this work. Thanks for testing that out!

[github-actions]

🎉 Congratulations on creating an Alpha Version!

Your Alpha for Ruby Gems is 14.5.0.pre.alpha.PLAY15814066

Your Alpha for NPM is 14.5.0-alpha.PLAY15814066