Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix(progress-stepper): fix width and long words wrap #5077

Merged
merged 2 commits into from Sep 7, 2022
Merged

fix(progress-stepper): fix width and long words wrap #5077

Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
c44c23f
fix(progress-stepper): fix width and long words wrap
srambach Sep 6, 2022
f9447e4
fix(progress-stepper): simplify overflow-wrap
srambach Sep 7, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
11 changes: 9 additions & 2 deletions src/patternfly/components/ProgressStepper/progress-stepper.scss
View file
Open in desktop
Expand Up @@ -124,8 +124,9 @@ $pf-c-progress-stepper--breakpoint-map: build-breakpoint-map();
--pf-c-progress-stepper--m-center__step-connector--JustifyContent: center;
--pf-c-progress-stepper--m-center__step-main--MarginRight: var(--pf-global--spacer--xs);
--pf-c-progress-stepper--m-center__step-main--MarginLeft: var(--pf-global--spacer--xs);
--pf-c-progress-stepper--m-center__step-title--TextAlign: center;
--pf-c-progress-stepper--m-center__step-description--TextAlign: center;
--pf-c-progress-stepper--m-center__step-main--TextAlign: center;
--pf-c-progress-stepper--m-center__step-title--TextAlign: auto;
--pf-c-progress-stepper--m-center__step-description--TextAlign: auto;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

--pf-c-progress-stepper--m-center__step-description--MarginRight: 0;
--pf-c-progress-stepper--m-center__step-description--MarginLeft: 0;

Expand Down Expand Up @@ -201,6 +202,7 @@ $pf-c-progress-stepper--breakpoint-map: build-breakpoint-map();
--pf-c-progress-stepper__step-connector--JustifyContent: var(--pf-c-progress-stepper--m-center__step-connector--JustifyContent);
--pf-c-progress-stepper__step-main--MarginRight: var(--pf-c-progress-stepper--m-center__step-main--MarginRight);
--pf-c-progress-stepper__step-main--MarginLeft: var(--pf-c-progress-stepper--m-center__step-main--MarginLeft);
--pf-c-progress-stepper--step-main--TextAlign: var(--pf-c-progress-stepper--m-center__step-main--TextAlign);
--pf-c-progress-stepper__step-title--TextAlign: var(--pf-c-progress-stepper--m-center__step-title--TextAlign);
--pf-c-progress-stepper__step-description--MarginRight: var(--pf-c-progress-stepper--m-center__step-description--MarginRight);
--pf-c-progress-stepper__step-description--MarginLeft: var(--pf-c-progress-stepper--m-center__step-description--MarginLeft);
Expand Down Expand Up @@ -366,7 +368,10 @@ $pf-c-progress-stepper--breakpoint-map: build-breakpoint-map();

// Step main
.pf-c-progress-stepper__step-main {
min-width: 0;
margin: var(--pf-c-progress-stepper__step-main--MarginTop) var(--pf-c-progress-stepper__step-main--MarginRight) var(--pf-c-progress-stepper__step-main--MarginBottom) var(--pf-c-progress-stepper__step-main--MarginLeft);
text-align: var(--pf-c-progress-stepper--step-main--TextAlign, auto);
overflow-wrap: break-word;

// Draw a new border for vertical alignment using step main
.pf-c-progress-stepper__step:not(:last-of-type) > &::before {
Expand All @@ -385,6 +390,7 @@ $pf-c-progress-stepper--breakpoint-map: build-breakpoint-map();
font-weight: var(--pf-c-progress-stepper__step-title--FontWeight);
color: var(--pf-c-progress-stepper__step-title--Color);
text-align: var(--pf-c-progress-stepper__step-title--TextAlign);
overflow-wrap: anywhere;
border: 0;

&.pf-m-help-text {
Expand Down Expand Up @@ -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;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍 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.

}

// stylelint-disable no-duplicate-selectors
Expand Down