-
Notifications
You must be signed in to change notification settings - Fork 19
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.
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
fix(build): update to PF6 betas #228
Changes from all commits
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -5,10 +5,9 @@ import { | |
DropdownItem, | ||
DropdownList, | ||
Flex, | ||
FlexItem, | ||
MenuToggle, | ||
MenuToggleElement, | ||
Split, | ||
SplitItem, | ||
TextInput, | ||
ToolbarItem, | ||
Tooltip | ||
|
@@ -29,11 +28,11 @@ const OptionsContextBar: React.FC<{ controller: Controller }> = observer(({ cont | |
}; | ||
|
||
const layoutDropdown = ( | ||
<Split> | ||
<SplitItem> | ||
<Flex flexWrap={{ default: 'nowrap' }} gap={{ default: 'gapSm' }} alignItems={{ default: 'alignItemsCenter' }}> | ||
<FlexItem> | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. What if you don't have a flex layouts in the toolbar at all? you could use:
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Working on refactoring these instances where we use Flex layouts to use the syntax above There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. The reason I used a single There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Thanks for clarifying @jeff-phillips-18 , reverted back to your changes in jenny-s51#11 |
||
<label className="pf-v6-u-display-inline-block pf-v6-u-mr-md pf-v6-u-mt-sm">Layout:</label> | ||
</SplitItem> | ||
<SplitItem> | ||
</FlexItem> | ||
<FlexItem> | ||
<Dropdown | ||
toggle={(toggleRef: React.Ref<MenuToggleElement>) => ( | ||
<MenuToggle ref={toggleRef} onClick={() => setLayoutDropdownOpen(!layoutDropdownOpen)}> | ||
|
@@ -70,8 +69,8 @@ const OptionsContextBar: React.FC<{ controller: Controller }> = observer(({ cont | |
</DropdownItem> | ||
</DropdownList> | ||
</Dropdown> | ||
</SplitItem> | ||
</Split> | ||
</FlexItem> | ||
</Flex> | ||
); | ||
|
||
const saveModel = () => { | ||
|
@@ -135,7 +134,7 @@ const OptionsContextBar: React.FC<{ controller: Controller }> = observer(({ cont | |
}; | ||
|
||
return ( | ||
<Flex flexWrap={{ default: 'wrap' }} gap={{ default: 'gapMd' }}> | ||
<Flex flexWrap={{ default: 'wrap' }} gap={{ default: 'gapMd' }} alignItems={{ default: 'alignItemsCenter' }}> | ||
jenny-s51 marked this conversation as resolved.
Show resolved
Hide resolved
|
||
<Flex> | ||
<ToolbarItem>{layoutDropdown}</ToolbarItem> | ||
<ToolbarItem> | ||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I see some references to base tokens in this CSS. Ideally we would use semantic tokens without
--300
or other numbers at the end.There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thanks @nicolethoen ! Updated to use semantic tokens with the exception of
--pf-t--color--red--50
, which I couldn't find referenced with any semantic tokens in https://github.com/patternfly/patternfly/blob/v6/src/patternfly/base/tokens