fix(progress-stepper): fix width and long words wrap #5077
Conversation
|
Preview: https://patternfly-pr-5077.surge.sh A11y report: https://patternfly-pr-5077-a11y.surge.sh |
| --pf-c-progress-stepper--m-center__step-title--TextAlign: auto; | ||
| --pf-c-progress-stepper--m-center__step-description--TextAlign: auto; |
There was a problem hiding this comment.
since the progress stepper is beta, I don't know that we need to keep the vars for title and description assuming they aren't needed/not used. you could always leave the var in the declaration with the default, and just remove these at the top level component selector scope.
| @@ -413,6 +419,7 @@ $pf-c-progress-stepper--breakpoint-map: build-breakpoint-map(); | |||
| font-size: var(--pf-c-progress-stepper__step-description--FontSize); | |||
| color: var(--pf-c-progress-stepper__step-description--Color); | |||
| text-align: var(--pf-c-progress-stepper__step-description--TextAlign); | |||
| overflow-wrap: anywhere; | |||
There was a problem hiding this comment.
do you need this? or could it inherit overflow-wrap from __main? also assuming break-word will work, but I think anywhere was only needed on the title because the button is finicky. Or we could update __main to use anywhere?
There was a problem hiding this comment.
👍 overflow-wrap:anywhere seems to play nicely with soft breaks so I'm putting it on __main. I updated the screen shots and included a hyphen to show wrapping.
|
🎉 This PR is included in version 4.214.1 🎉 The release is available on: Your semantic-release bot 📦🚀 |
@mattnolting |
Fixes #5024
This sets
min-width:0so that the steps will maintain even widths, and allows wrapping of long words without spaces.Screen shots of all examples with long text for convenience:
