Skip to content

CONSOLE-4658: Replace Bootstrap Small text with PatternFly Extra Smal… #15256

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
Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

CONSOLE-4658: Replace Bootstrap Small text with PatternFly Extra Smal… #15256

wants to merge 1 commit into from

Conversation

rhamilto
Copy link
Member

@rhamilto rhamilto commented Jul 8, 2025

…l Text

  • Replace className="small" with className="pf-v6-u-font-size-xs"
  • Replace <small> with <span className="pf-v6-u-font-size-xs"> or <Content component={ContentVariants.small}> if the existing <small> is within a <Content>
  • Remove orphaned code discovered while completing the above

@openshift-ci-robot openshift-ci-robot added the jira/valid-reference Indicates that this PR references a valid Jira ticket of any type. label Jul 8, 2025
@openshift-ci-robot
Copy link
Contributor

openshift-ci-robot commented Jul 8, 2025 •
edited by openshift-ci bot
Loading

@rhamilto: This pull request references CONSOLE-4658 which is a valid jira issue.

Warning: The referenced jira issue has an invalid target version for the target branch this PR targets: expected the story to target the "4.20.0" version, but no target version was set.

In response to this:

…l Text

  • Replace className="small" with className="pf-v6-u-font-size-xs"
  • Replace <small> with <span className="pf-v6-u-font-size-xs"> or <Content component={ContentVariants.small}> if the existing <small> is within a <Content>
  • Remove orphaned code discovered while completing the above

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the openshift-eng/jira-lifecycle-plugin repository.

@openshift-ci openshift-ci bot added component/core Related to console core functionality component/dashboard Related to dashboard approved Indicates a PR has been approved by an approver from all required OWNERS files. component/dev-console Related to dev-console component/helm Related to helm-plugin component/knative Related to knative-plugin component/olm Related to OLM component/shared Related to console-shared labels Jul 8, 2025
rhamilto
rhamilto commented Jul 8, 2025
View reviewed changes
Copy link
Member Author

@rhamilto rhamilto left a comment

Choose a reason for hiding this comment

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

A few notes on changes to aid with the review.

frontend/packages/console-shared/src/components/dashboard/inventory-card/InventoryCard.tsx
@@ -23,9 +23,7 @@ export const InventoryItemBody: React.FC<InventoryItemBodyProps> = ({ error, chi
return (
<div className="co-inventory-card__item-status">
{error ? (
<div className="co-dashboard-text--small pf-v6-u-text-color-subtle">
Copy link
Member Author

Choose a reason for hiding this comment

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

co-dashboard-text--small has no associated CSS.

frontend/packages/console-shared/src/components/dropdown/ResourceDropdown.tsx

type DropdownItemProps = {
model: K8sKind;
name: string;
namespace?: string;
Copy link
Member Author

Choose a reason for hiding this comment

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

namespace is unused so remove it to clean up instance of small.

frontend/packages/console-shared/src/components/getting-started/GettingStartedCard.scss
@@ -29,11 +29,6 @@
p {
margin-bottom: 0 !important;
}

small {
Copy link
Member Author

Choose a reason for hiding this comment

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

Not needed as appropriate styling is coming from PatternFly already.

frontend/packages/knative-plugin/src/components/add/KnEventMetaDescription.tsx
@@ -37,7 +37,7 @@ const KnEventMetaDescription: React.FC<KnEventMetaDescriptionProps> = ({ normali
{name}
</Title>
{provider && (
<span className="co-clusterserviceversion-logo__name__provider pf-v6-u-text-color-subtle">
Copy link
Member Author

Choose a reason for hiding this comment

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

co-clusterserviceversion-logo__name__provider has no associated CSS.

frontend/packages/helm-plugin/src/components/forms/install-upgrade/HelmChartMetaDescription.tsx
@@ -36,7 +36,7 @@ const HelmChartMetaDescription: React.FC<HelmChartMetaDescriptionProps> = ({ cha
{displayName}
</Title>
{provider && (
<span className="co-clusterserviceversion-logo__name__provider pf-v6-u-text-color-subtle">
Copy link
Member Author

Choose a reason for hiding this comment

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

co-clusterserviceversion-logo__name__provider has no associated CSS.

frontend/public/components/_resource-dropdown.scss
@@ -6,12 +6,6 @@
display: flex;
align-items: center;
flex: 1;
.small {
Copy link
Member Author

Choose a reason for hiding this comment

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

Replaced by PatternFly util classes.

frontend/public/components/events.jsx
@@ -168,7 +168,7 @@ const Inner = connectToFlags(FLAGS.CAN_LIST_NODE)((props) => {
{lastTime && <Timestamp className="co-sysevent__timestamp" timestamp={lastTime} />}
</div>
<div className="co-sysevent__details">
<small className="co-sysevent__source">
Copy link
Member Author

Choose a reason for hiding this comment

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

co-sysevent__source has no associated CSS.

frontend/public/components/events.jsx
<div className="co-sysevent__count-and-actions">
{count > 1 && firstTime && (
<Trans ns="public">
<small className="co-sysevent__count pf-v6-u-text-color-subtle">
Copy link
Member Author

Choose a reason for hiding this comment

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

co-sysevent__count has no associated CSS.

frontend/public/components/events.jsx
</Trans>
)}
{count > 1 && !firstTime && (
<Trans ns="public">
<small className="co-sysevent__count pf-v6-u-text-color-subtle">
Copy link
Member Author

Choose a reason for hiding this comment

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

co-sysevent__count has no associated CSS.

frontend/public/components/sidebars/explore-type-sidebar.tsx
@@ -154,10 +161,10 @@ export const ExploreType: React.FC<ExploreTypeProps> = (props) => {
>
<CamelCaseWrap value={name} />
&nbsp;
<small>
<Content component={ContentVariants.small}>
Copy link
Member Author

Choose a reason for hiding this comment

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

Changed to <Content> since this is inside an existing <Content> on line 132.

@rhamilto
Copy link
Member Author

rhamilto commented Jul 8, 2025

code approval:
/assign @logonoff
qe approval:
/assign @yapei

This is tech debt, so nothing for PX or docs to review.
/label px-approved
/label docs-approved

@openshift-ci openshift-ci bot added px-approved Signifies that Product Support has signed off on this PR docs-approved Signifies that Docs has signed off on this PR labels Jul 8, 2025
logonoff
logonoff approved these changes Jul 8, 2025
View reviewed changes
Copy link
Member

@logonoff logonoff left a comment

Choose a reason for hiding this comment

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

/lgtm

@openshift-ci openshift-ci bot added the lgtm Indicates that a PR is ready to be merged. label Jul 8, 2025
@openshift-ci OpenShift CI
Copy link
Contributor

openshift-ci bot commented Jul 8, 2025

[APPROVALNOTIFIER] This PR is APPROVED

This pull-request has been approved by: logonoff, rhamilto

The full list of commands accepted by this bot can be found here.

The pull request process is described here

Needs approval from an approver in each of these files:

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment

@openshift-ci OpenShift CI
Copy link
Contributor

openshift-ci bot commented Jul 9, 2025

@rhamilto: The following test failed, say /retest to rerun all failed tests or /retest-required to rerun all mandatory failed tests:

Test name Commit Details Required Rerun command
ci/prow/okd-scos-e2e-aws-ovn bb6c9bf link false /test okd-scos-e2e-aws-ovn

Full PR test history. Your PR dashboard.

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the kubernetes-sigs/prow repository. I understand the commands that are listed here.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@logonoff logonoff logonoff approved these changes

@cajieh cajieh Awaiting requested review from cajieh

@christoph-jerolimov christoph-jerolimov Awaiting requested review from christoph-jerolimov

Assignees

@yapei yapei

@logonoff logonoff

Labels
approved Indicates a PR has been approved by an approver from all required OWNERS files. component/core Related to console core functionality component/dashboard Related to dashboard component/dev-console Related to dev-console component/helm Related to helm-plugin component/knative Related to knative-plugin component/olm Related to OLM component/shared Related to console-shared docs-approved Signifies that Docs has signed off on this PR jira/valid-reference Indicates that this PR references a valid Jira ticket of any type. lgtm Indicates that a PR is ready to be merged. px-approved Signifies that Product Support has signed off on this PR
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
4 participants
@rhamilto @openshift-ci-robot @logonoff @yapei