Skip to content

Commit

Permalink
🐛 (various): styling issues with pf-v5-m vs pf-m (#1177)
Browse files Browse the repository at this point in the history 
## Missing Pencil on tables

closes #1166 

Also found several `pf-v5-m-` where the version should not be on the
modifiers. This affected many items, such as not adding the blue left
border to active menu items on the nav panel

Aside from removing the `-v5` from `pf-m` modifiers, for the table I
also removed the `inline-edit` div as it doesn't appear we are doing
inline edits and the styling for the inline-edit was basically just
being removed manually by the `enable` modifier.

should also closes #1165 

<!--
## PR Title Prefix

Every **PR Title** should be prefixed with :text: to indicate its type.

- Breaking change: ⚠️ (`⚠️`)
- Non-breaking feature: ✨ (`✨`)
- Patch fix: 🐛 (`🐛`)
- Docs: 📖 (`📖`)
- Infra/Tests/Other: 🌱 (`🌱`)
- No release note: 👻 (`👻`)

For example, a pull request containing breaking changes might look like
`⚠️ My pull request contains breaking changes`.

Since GitHub supports emoji aliases (ie. `👻`), there is no need to
include
the emoji directly in the PR title -- **please use the alias**. It used
to be
the case that projects using emojis for PR typing had to include the
emoji
directly because GitHub didn't render the alias. Given that `⚠️`
is
easy enough to read as text, easy to parse in release tooling, and
rendered in
GitHub well, we prefer to standardize on the alias.

For more information, please see the Konveyor
[Versioning
Doc](https://github.com/konveyor/release-tools/blob/main/VERSIONING.md).
-->

---------

Signed-off-by: gitdallas <[email protected]>
  • Loading branch information
@gitdallas
gitdallas authored Jul 21, 2023
1 parent 43e6f16 commit e138388
Show file tree
Hide file tree
Showing 12 changed files with 73 additions and 77 deletions.
2 changes: 1 addition & 1 deletion client/src/app/common/KeyDisplayToggle.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ const KeyDisplayToggle: React.FC<IKeyDisplayToggleProps> = ({
onClick,
}: IKeyDisplayToggleProps) => (
<Button variant="link" aria-label={`Show/hide ${keyName}`} onClick={onClick}>
<span className="pf-v5-c-icon pf-v5-m-info">
<span className="pf-v5-c-icon pf-m-info">
{isKeyHidden ? <EyeSlashIcon /> : <EyeIcon />}
</span>
</Button>
Expand Down
2 changes: 1 addition & 1 deletion client/src/app/components/target-card.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -124,7 +124,7 @@ export const TargetCard: React.FC<TargetCardProps> = ({
onClick={handleCardClick}
isSelectable={!!cardSelected}
isSelected={isCardSelected}
className="pf-v5-l-stack pf-v5-l-stack__item pf-v5-m-fill"
className="pf-v5-l-stack pf-v5-l-stack__item pf-m-fill"
>
<CardBody>
<Flex>
Expand Down
46 changes: 23 additions & 23 deletions client/src/app/layout/DefaultLayout/tests/__snapshots__/DefaultLayout.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,14 +6,14 @@ Object {
"baseElement": <body>
<div>
<div
class="pf-v5-c-page pf-v5-m-resize-observer pf-v5-m-breakpoint-default pf-v5-m-height-breakpoint-sm"
class="pf-v5-c-page pf-m-resize-observer pf-m-breakpoint-default pf-m-height-breakpoint-sm"
>
<div
class="pf-v5-c-skip-to-content"
>
<a
aria-disabled="false"
class="pf-v5-c-button pf-v5-m-primary"
class="pf-v5-c-button pf-m-primary"
data-ouia-component-id="OUIA-Generated-Button-primary-1"
data-ouia-component-type="PF5/Button"
data-ouia-safe="true"
Expand All @@ -35,7 +35,7 @@ Object {
aria-disabled="false"
aria-expanded="false"
aria-label="Global navigation"
class="pf-v5-c-button pf-v5-m-plain"
class="pf-v5-c-button pf-m-plain"
data-ouia-component-id="OUIA-Generated-Button-plain-1"
data-ouia-component-type="PF5/Button"
data-ouia-safe="true"
Expand Down Expand Up @@ -71,15 +71,15 @@ Object {
class="pf-v5-c-page__header-tools"
>
<div
class="pf-v5-c-page__header-tools-group pf-v5-m-hidden"
class="pf-v5-c-page__header-tools-group pf-m-hidden"
>
<div
class="pf-v5-c-page__header-tools-item"
>
<button
aria-disabled="false"
aria-label="about button"
class="pf-v5-c-button pf-v5-m-plain"
class="pf-v5-c-button pf-m-plain"
data-ouia-component-id="OUIA-Generated-Button-plain-2"
data-ouia-component-type="PF5/Button"
data-ouia-safe="true"
Expand All @@ -97,7 +97,7 @@ Object {
class="pf-v5-c-page__header-tools-item"
>
<div
class="pf-v5-c-dropdown pf-v5-m-align-right"
class="pf-v5-c-dropdown pf-m-align-right"
data-ouia-component-id="OUIA-Generated-Dropdown-1"
data-ouia-component-type="PF5/Dropdown"
data-ouia-safe="true"
Expand All @@ -106,7 +106,7 @@ Object {
aria-expanded="false"
aria-haspopup="true"
aria-label="Actions"
class="pf-v5-c-dropdown__toggle pf-v5-m-plain"
class="pf-v5-c-dropdown__toggle pf-m-plain"
id="pf-dropdown-toggle-id-0"
type="button"
>
Expand All @@ -131,7 +131,7 @@ Object {
</header>
<div
aria-hidden="true"
class="pf-v5-c-page__sidebar pf-v5-m-collapsed"
class="pf-v5-c-page__sidebar pf-m-collapsed"
id="page-sidebar"
>
<nav
Expand Down Expand Up @@ -211,7 +211,7 @@ Object {
</a>
</li>
<li
class="pf-v5-c-nav__item pf-v5-m-expandable pf-v5-m-expanded"
class="pf-v5-c-nav__item pf-m-expandable pf-m-expanded"
data-ouia-component-id="OUIA-Generated-NavExpandable-1"
data-ouia-component-type="PF5/NavExpandable"
data-ouia-safe="true"
Expand Down Expand Up @@ -332,7 +332,7 @@ Object {
</a>
</li>
<li
class="pf-v5-c-nav__item pf-v5-m-expandable pf-v5-m-expanded"
class="pf-v5-c-nav__item pf-m-expandable pf-m-expanded"
data-ouia-component-id="OUIA-Generated-NavExpandable-2"
data-ouia-component-type="PF5/NavExpandable"
data-ouia-safe="true"
Expand Down Expand Up @@ -421,7 +421,7 @@ Object {
/>
</div>
<div
class="pf-v5-c-drawer__panel pf-v5-m-resizable"
class="pf-v5-c-drawer__panel pf-m-resizable"
hidden=""
id="page-drawer-content"
style="--pf-v5-c-drawer__panel--md--FlexBasis: 500px; --pf-v5-c-drawer__panel--md--FlexBasis--min: 150px;"
Expand All @@ -435,21 +435,21 @@ Object {
<div>
<ul
aria-live="polite"
class="pf-v5-c-alert-group pf-v5-m-toast"
class="pf-v5-c-alert-group pf-m-toast"
role="list"
/>
</div>
</body>,
"container": <div>
<div
class="pf-v5-c-page pf-v5-m-resize-observer pf-v5-m-breakpoint-default pf-v5-m-height-breakpoint-sm"
class="pf-v5-c-page pf-m-resize-observer pf-m-breakpoint-default pf-m-height-breakpoint-sm"
>
<div
class="pf-v5-c-skip-to-content"
>
<a
aria-disabled="false"
class="pf-v5-c-button pf-v5-m-primary"
class="pf-v5-c-button pf-m-primary"
data-ouia-component-id="OUIA-Generated-Button-primary-1"
data-ouia-component-type="PF5/Button"
data-ouia-safe="true"
Expand All @@ -471,7 +471,7 @@ Object {
aria-disabled="false"
aria-expanded="false"
aria-label="Global navigation"
class="pf-v5-c-button pf-v5-m-plain"
class="pf-v5-c-button pf-m-plain"
data-ouia-component-id="OUIA-Generated-Button-plain-1"
data-ouia-component-type="PF5/Button"
data-ouia-safe="true"
Expand Down Expand Up @@ -507,15 +507,15 @@ Object {
class="pf-v5-c-page__header-tools"
>
<div
class="pf-v5-c-page__header-tools-group pf-v5-m-hidden"
class="pf-v5-c-page__header-tools-group pf-m-hidden"
>
<div
class="pf-v5-c-page__header-tools-item"
>
<button
aria-disabled="false"
aria-label="about button"
class="pf-v5-c-button pf-v5-m-plain"
class="pf-v5-c-button pf-m-plain"
data-ouia-component-id="OUIA-Generated-Button-plain-2"
data-ouia-component-type="PF5/Button"
data-ouia-safe="true"
Expand All @@ -533,7 +533,7 @@ Object {
class="pf-v5-c-page__header-tools-item"
>
<div
class="pf-v5-c-dropdown pf-v5-m-align-right"
class="pf-v5-c-dropdown pf-m-align-right"
data-ouia-component-id="OUIA-Generated-Dropdown-1"
data-ouia-component-type="PF5/Dropdown"
data-ouia-safe="true"
Expand All @@ -542,7 +542,7 @@ Object {
aria-expanded="false"
aria-haspopup="true"
aria-label="Actions"
class="pf-v5-c-dropdown__toggle pf-v5-m-plain"
class="pf-v5-c-dropdown__toggle pf-m-plain"
id="pf-dropdown-toggle-id-0"
type="button"
>
Expand All @@ -567,7 +567,7 @@ Object {
</header>
<div
aria-hidden="true"
class="pf-v5-c-page__sidebar pf-v5-m-collapsed"
class="pf-v5-c-page__sidebar pf-m-collapsed"
id="page-sidebar"
>
<nav
Expand Down Expand Up @@ -647,7 +647,7 @@ Object {
</a>
</li>
<li
class="pf-v5-c-nav__item pf-v5-m-expandable pf-v5-m-expanded"
class="pf-v5-c-nav__item pf-m-expandable pf-m-expanded"
data-ouia-component-id="OUIA-Generated-NavExpandable-1"
data-ouia-component-type="PF5/NavExpandable"
data-ouia-safe="true"
Expand Down Expand Up @@ -768,7 +768,7 @@ Object {
</a>
</li>
<li
class="pf-v5-c-nav__item pf-v5-m-expandable pf-v5-m-expanded"
class="pf-v5-c-nav__item pf-m-expandable pf-m-expanded"
data-ouia-component-id="OUIA-Generated-NavExpandable-2"
data-ouia-component-type="PF5/NavExpandable"
data-ouia-safe="true"
Expand Down Expand Up @@ -857,7 +857,7 @@ Object {
/>
</div>
<div
class="pf-v5-c-drawer__panel pf-v5-m-resizable"
class="pf-v5-c-drawer__panel pf-m-resizable"
hidden=""
id="page-drawer-content"
style="--pf-v5-c-drawer__panel--md--FlexBasis: 500px; --pf-v5-c-drawer__panel--md--FlexBasis--min: 150px;"
Expand Down
28 changes: 14 additions & 14 deletions client/src/app/layout/SidebarApp/SidebarApp.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -109,29 +109,29 @@ export const SidebarApp: React.FC = () => {
<NavItem>
<NavLink
to={Paths.applications + search}
activeClassName="pf-v5-m-current"
activeClassName="pf-m-current"
>
{t("sidebar.applicationInventory")}
</NavLink>
</NavItem>
<NavItem>
<NavLink
to={Paths.reports + search}
activeClassName="pf-v5-m-current"
activeClassName="pf-m-current"
>
{t("sidebar.reports")}
</NavLink>
</NavItem>
<NavItem>
<NavLink to={Paths.controls} activeClassName="pf-v5-m-current">
<NavLink to={Paths.controls} activeClassName="pf-m-current">
{t("sidebar.controls")}
</NavLink>
</NavItem>
{FEATURES_ENABLED.migrationWaves ? (
<NavItem>
<NavLink
to={Paths.migrationWaves}
activeClassName="pf-v5-m-current"
activeClassName="pf-m-current"
>
{t("sidebar.migrationWaves")}
</NavLink>
Expand All @@ -140,14 +140,14 @@ export const SidebarApp: React.FC = () => {
{FEATURES_ENABLED.dynamicReports ? (
<>
<NavItem>
<NavLink to={Paths.issues} activeClassName="pf-v5-m-current">
<NavLink to={Paths.issues} activeClassName="pf-m-current">
{t("sidebar.issues")}
</NavLink>
</NavItem>
<NavItem>
<NavLink
to={Paths.dependencies}
activeClassName="pf-v5-m-current"
activeClassName="pf-m-current"
>
{t("sidebar.dependencies")}
</NavLink>
Expand All @@ -158,12 +158,12 @@ export const SidebarApp: React.FC = () => {
) : (
<NavList title="Admin">
<NavItem>
<NavLink to={Paths.general} activeClassName="pf-v5-m-current">
<NavLink to={Paths.general} activeClassName="pf-m-current">
{t("terms.general")}
</NavLink>
</NavItem>
<NavItem>
<NavLink to={Paths.identities} activeClassName="pf-v5-m-current">
<NavLink to={Paths.identities} activeClassName="pf-m-current">
{t("terms.credentials")}
</NavLink>
</NavItem>
Expand All @@ -176,37 +176,37 @@ export const SidebarApp: React.FC = () => {
<NavItem>
<NavLink
to={Paths.repositoriesGit}
activeClassName="pf-v5-m-current"
activeClassName="pf-m-current"
>
Git
</NavLink>
</NavItem>
<NavItem>
<NavLink
to={Paths.repositoriesSvn}
activeClassName="pf-v5-m-current"
activeClassName="pf-m-current"
>
Subversion
</NavLink>
</NavItem>
<NavItem>
<NavLink
to={Paths.repositoriesMvn}
activeClassName="pf-v5-m-current"
activeClassName="pf-m-current"
>
Maven
</NavLink>
</NavItem>
</NavExpandable>
<NavItem>
<NavLink to={Paths.proxies} activeClassName="pf-v5-m-current">
<NavLink to={Paths.proxies} activeClassName="pf-m-current">
Proxy
</NavLink>
</NavItem>
<NavItem>
<NavLink
to={Paths.migrationTargets}
activeClassName="pf-v5-m-current"
activeClassName="pf-m-current"
>
Custom migration targets
</NavLink>
Expand All @@ -219,7 +219,7 @@ export const SidebarApp: React.FC = () => {
isExpanded
>
<NavItem>
<NavLink to={Paths.jira} activeClassName="pf-v5-m-current">
<NavLink to={Paths.jira} activeClassName="pf-m-current">
Jira
</NavLink>
</NavItem>
Expand Down
12 changes: 6 additions & 6 deletions client/src/app/layout/SidebarApp/tests/__snapshots__/SidebarApp.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ Object {
<div>
<div
aria-hidden="false"
class="pf-v5-c-page__sidebar pf-v5-m-expanded"
class="pf-v5-c-page__sidebar pf-m-expanded"
id="page-sidebar"
>
<nav
Expand Down Expand Up @@ -85,7 +85,7 @@ Object {
</a>
</li>
<li
class="pf-v5-c-nav__item pf-v5-m-expandable pf-v5-m-expanded"
class="pf-v5-c-nav__item pf-m-expandable pf-m-expanded"
data-ouia-component-id="OUIA-Generated-NavExpandable-1"
data-ouia-component-type="PF5/NavExpandable"
data-ouia-safe="true"
Expand Down Expand Up @@ -200,7 +200,7 @@ Object {
</a>
</li>
<li
class="pf-v5-c-nav__item pf-v5-m-expandable pf-v5-m-expanded"
class="pf-v5-c-nav__item pf-m-expandable pf-m-expanded"
data-ouia-component-id="OUIA-Generated-NavExpandable-2"
data-ouia-component-type="PF5/NavExpandable"
data-ouia-safe="true"
Expand Down Expand Up @@ -270,7 +270,7 @@ Object {
"container": <div>
<div
aria-hidden="false"
class="pf-v5-c-page__sidebar pf-v5-m-expanded"
class="pf-v5-c-page__sidebar pf-m-expanded"
id="page-sidebar"
>
<nav
Expand Down Expand Up @@ -348,7 +348,7 @@ Object {
</a>
</li>
<li
class="pf-v5-c-nav__item pf-v5-m-expandable pf-v5-m-expanded"
class="pf-v5-c-nav__item pf-m-expandable pf-m-expanded"
data-ouia-component-id="OUIA-Generated-NavExpandable-1"
data-ouia-component-type="PF5/NavExpandable"
data-ouia-safe="true"
Expand Down Expand Up @@ -463,7 +463,7 @@ Object {
</a>
</li>
<li
class="pf-v5-c-nav__item pf-v5-m-expandable pf-v5-m-expanded"
class="pf-v5-c-nav__item pf-m-expandable pf-m-expanded"
data-ouia-component-id="OUIA-Generated-NavExpandable-2"
data-ouia-component-type="PF5/NavExpandable"
data-ouia-safe="true"
Expand Down
Loading

0 comments on commit e138388

Please sign in to comment.