Skip to content

Commit

Permalink
fix(catalog-view): update to v6 styles
Browse files Browse the repository at this point in the history
  • Loading branch information
mcoker committed May 2, 2024
1 parent 46bf5b3 commit d714e15
Show file tree
Hide file tree
Showing 10 changed files with 120 additions and 124 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -118,7 +118,7 @@ class MockFilterSidePanelExample extends React.Component {
const maxShowCount = 5;
const leeway = 2;
return (
<div style={{ width: '205px', border: '1px solid grey', paddingTop: '20px' }}>
<div style={{ width: '205px' }}>
<FilterSidePanel id="filter-panel">
<FilterSidePanelCategory key="cat1">
<TextInput type="text" id="filter-text-input" placeholder="Filter by name" aria-label="filter text input" />
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -26,44 +26,42 @@ import OkIcon from '@patternfly/react-icons/dist/esm/icons/ok-icon';
import ExternalLinkAltIcon from '@patternfly/react-icons/dist/esm/icons/external-link-alt-icon';
import GlobeIcon from '@patternfly/react-icons/dist/esm/icons/globe-icon';

<div style={{ display: 'inline-block', padding: '15px', border: '1px solid grey' }}>
<PropertiesSidePanel>
<PropertyItem label="Operator Version" value="0.9.8 (latest)" />
<PropertyItem
label="Certified Level"
value={
<span>
<OkIcon style={{color: '--pf-t--global--color--status--success--default'}} /> Certified
</span>
}
/>
<PropertyItem label="Provider" value="Red Hat, Inc" />
<PropertyItem label="Health Index" value="A" />
<PropertyItem
label="Repository"
value={
<a href="https://quay.io/repository/redhat/prometheus-operator">
https://quay.io/repository/redhat/prometheus-operator
</a>
}
/>
<PropertyItem
label="Container Image"
value={
<a href="#">
0.22.2 <ExternalLinkAltIcon />
</a>
}
/>
<PropertyItem
label="Created At"
value={
<span>
<GlobeIcon /> Aug 23, 1:58pm
</span>
}
/>
<PropertyItem label="Support" value={<a href="#">Red Hat</a>} />
</PropertiesSidePanel>
</div>
<PropertiesSidePanel>
<PropertyItem label="Operator Version" value="0.9.8 (latest)" />
<PropertyItem
label="Certified Level"
value={
<span>
<OkIcon style={{color: '--pf-t--global--icon--color--status--success--default'}} /> Certified
</span>
}
/>
<PropertyItem label="Provider" value="Red Hat, Inc" />
<PropertyItem label="Health Index" value="A" />
<PropertyItem
label="Repository"
value={
<a href="https://quay.io/repository/redhat/prometheus-operator">
https://quay.io/repository/redhat/prometheus-operator
</a>
}
/>
<PropertyItem
label="Container Image"
value={
<a href="#">
0.22.2 <ExternalLinkAltIcon />
</a>
}
/>
<PropertyItem
label="Created At"
value={
<span>
<GlobeIcon /> Aug 23, 1:58pm
</span>
}
/>
<PropertyItem label="Support" value={<a href="#">Red Hat</a>} />
</PropertiesSidePanel>
```
Original file line number Diff line number Diff line change
Expand Up @@ -9,20 +9,20 @@
align-items: center;
}
.ws-react-e-catalog-item-header .catalog-item-header-pf-icon {
font-size: 60px;
max-height: 60px;
width: 60px;
font-size: var(--pf-t--global--icon--size--2xl);
max-height: var(--pf-t--global--icon--size--2xl);
width: var(--pf-t--global--icon--size--2xl);
}
.ws-react-e-catalog-item-header .catalog-item-header-pf-text {
margin-left: 20px;
margin-inline-start: var(--pf-t--global--spacer--md);
}
.ws-react-e-catalog-item-header .catalog-item-header-pf-title {
font-weight: 400;
margin-bottom: 0;
margin-top: 0;
font-weight: var(--pf-t--global--font--weight--body);
margin-block-end: 0;
margin-block-start: 0;
}
.ws-react-e-catalog-item-header .catalog-item-header-pf-subtitle {
color: #8b8d8f;
font-size: small;
margin-bottom: 0;
color: var(--pf-t--global--text--color--subtle);
font-size: var(--pf-t--global--font--size--body--sm);
margin-block-end: 0;
}
33 changes: 13 additions & 20 deletions packages/module/patternfly-docs/content/examples/catalogTile.css
Original file line number Diff line number Diff line change
@@ -1,17 +1,13 @@
.ws-react-e-catalog-tile .catalog-tile-pf:active, .ws-react-e-catalog-tile .catalog-tile-pf:hover, .ws-react-e-catalog-tile .catalog-tile-pf:focus, .ws-react-e-catalog-tile .catalog-tile-pf:visited {
color: inherit;
color: var(--pf-t--global--text--color--regular);
text-decoration: none;
}
.ws-react-e-catalog-tile .catalog-tile-pf-header {
font-size: 16px;
font-weight: 400;
}
.ws-react-e-catalog-tile .catalog-tile-pf-header .catalog-tile-pf-title {
font-weight: 400;
}
.ws-react-e-catalog-tile .catalog-tile-pf-header .catalog-tile-pf-subtitle {
color: #4D5258;
font-size: small;
color: var(--pf-t--global--text--color--subtle);
font-size: var(--pf-t--global--font--size--body--sm);
font-family: var(--pf-t--global--font--family--body);
font-weight: var(--pf-t--global--font--weight--body);
padding-block-start: var(--pf-t--global--spacer--xs);
}
.ws-react-e-catalog-tile .catalog-tile-pf-header .catalog-tile-pf-subtitle a {
color: var(--pf-t--global--text--color--link--default);
Expand All @@ -21,24 +17,21 @@
color: var(--pf-t--global--text--color--link--hover);
text-decoration: underline;
}
.ws-react-e-catalog-tile .pf-v6-c-card__actions {
padding-left: 5px;
}
.ws-react-e-catalog-tile .catalog-tile-pf-icon {
font-size: 40px;
height: 40px;
font-size: 37px;
height: 37px;
max-width: 60px;
min-width: 40px;
min-width: 37px;
}
.ws-react-e-catalog-tile .catalog-tile-pf-badge-container {
display: flex;
flex: 1;
justify-content: flex-end;
margin-left: 10px;
margin-inline-start: var(--pf-t--global--spacer--sm);
}
.ws-react-e-catalog-tile .catalog-tile-pf-badge-container .catalog-tile-pf-badge {
font-size: 16px;
margin-left: 5px;
font-size: var(--pf-t--global--font--size--body--default);
margin-inline-start: var(--pf-t--global--spacer--xs);
}
.ws-react-e-catalog-tile .catalog-tile-pf-body .catalog-tile-pf-description span {
display: -webkit-box;
Expand All @@ -50,5 +43,5 @@
-webkit-line-clamp: 1;
}
.ws-react-e-catalog-tile .example-ok-icon {
color: #4CB140;
color: var(--pf-t--global--icon--color--status--success--default);
}
Original file line number Diff line number Diff line change
@@ -1,50 +1,46 @@
.filter-panel-pf {
margin: 0 0 30px;
padding: 0 15px;
}

.filter-panel-pf-category {
margin-top: 20px;
}

.filter-panel-pf-category:first-of-type {
margin-top: 0;
margin-block-start: 0;
margin-block-end: var(--pf-t--global--spacer--xl);
margin-inline: 0;
padding-inline: var(--pf-t--global--spacer--md);
display: flex;
flex-direction: column;
gap: var(--pf-t--global--spacer--lg);
}

.filter-panel-pf-category-title {
border: 0;
font-size: inherit;
margin: 0 0 8px 0;
font-weight: 700;
font-size: var(--pf-t--global--font--size--body--sm);
margin-block-start: 0;
margin-block-end: var(--pf-t--global--spacer--sm);
margin-inline: 0;
font-weight: var(--pf-t--global--font--weight--body--bold);
}

.filter-panel-pf-category-items {
margin-top: 0;
margin-bottom: 0;
margin-block: 0;
}

.filter-panel-pf-category-items .pf-v6-c-button.pf-m-link {
padding: 0;
}

.filter-panel-pf-category-item {
font-weight: 400;
margin-bottom: 0;
margin-top: 5px;
.filter-panel-pf-category-items > * + * {
margin-block-start: var(--pf-t--global--spacer--sm);
}

.filter-panel-pf-category-item:first-of-type {
margin-top: 0;
.filter-panel-pf-category-item {
font-weight: var(--pf-t--global--font--weight--body);
}

.filter-panel-pf-category-item .pf-v6-c-check__input {
margin-left: 0px;
.filter-panel-pf-category-item:first-of-type {
margin-block-start: 0;
}

.filter-panel-pf-category-item .item-icon {
padding-right: 3px;
padding-inline-end: var(--pf-t--global--spacer--xs);
}

.filter-panel-pf-category-item .item-count {
padding-left: 3px;
padding-inline-start: var(--pf-t--global--spacer--xs);
}
Original file line number Diff line number Diff line change
@@ -1,21 +1,18 @@
.properties-side-panel-pf {
width: 165px;
}

.properties-side-panel-pf-property {
margin-top: 24px; }
.properties-side-panel-pf-property:first-of-type {
margin-top: 0;
display: flex;
flex-direction: column;
gap: var(--pf-t--global--spacer--lg);
}

.properties-side-panel-pf-property-label {
font-weight: 700 !important;
font-size: 14px !important;
font-weight: var(--pf-t--global--font--weight--body--bold) !important;
font-size: var(--pf-t--global--font--size--body--sm) !important;
margin: 0 !important;
}

.properties-side-panel-pf-property-value {
font-size: 14px !important;
margin-top: 8px;
font-size: var(--pf-t--global--font--size--body--regular) !important;
margin-top: var(--pf-t--global--spacer--sm);
word-break: break-word;
}
42 changes: 27 additions & 15 deletions packages/module/patternfly-docs/content/examples/verticalTab.css
Original file line number Diff line number Diff line change
@@ -1,26 +1,37 @@
.ws-react-e-vertical-tabs .vertical-tabs-pf {
list-style: none;
margin: 0 0 30px;
margin-block-start: 0;
margin-block-end: 30px;
margin-inline-start: 0;
margin-inline-end: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: var(--pf-t--global--spacer--xs);
}
.ws-react-e-vertical-tabs .vertical-tabs-pf .vertical-tabs-pf {
margin-bottom: 0;
margin-block-end: 0;
padding-block-start: var(--pf-t--global--spacer--xs);
}
.ws-react-e-vertical-tabs .vertical-tabs-pf-tab {
margin-top: 4px;
position: relative;
}
.ws-react-e-vertical-tabs .vertical-tabs-pf-tab > a {
color: initial;
color: var(--pf-t--global--text--color--regular);
display: inline-block;
font-size: 13px;
padding: 3px 6px 3px 15px;
font-size: var(--pf-t--global--font--size--body--default);
padding-block: var(--pf-t--global--spacer--xs);
padding-inline: var(--pf-t--global--spacer--sm);
vertical-align: top;
width: 100%;
word-break: break-word;
background-color: var(--pf-t--global--background--color--action--plain--default);
border-radius: var(--pf-t--global--border--radius--small);
margin-inline-start: var(--pf-t--global--spacer--md);
}
.ws-react-e-vertical-tabs .vertical-tabs-pf-tab > a:hover, .ws-react-e-vertical-tabs .vertical-tabs-pf-tab > a:focus {
color: var(--pf-t--global--text--color--brand--hover);
color: var(--pf-t--global--text--color--regular);
background-color: var(--pf-t--global--background--color--action--plain--hover);
text-decoration: none;
}
.ws-react-e-vertical-tabs .vertical-tabs-pf-tab > a.no-wrap {
Expand All @@ -32,22 +43,23 @@
text-overflow: ellipsis;
white-space: nowrap;
}
.ws-react-e-vertical-tabs .vertical-tabs-pf-tab.active > a {
color: var(--pf-t--global--text--color--brand--clicked);
.ws-react-e-vertical-tabs .vertical-tabs-pf-tab > a.disabled {
color: var(--pf-t--global--text--color--on-disabled);
background: var(--pf-t--global--background--color--disabled--default);
pointer-events: none;
}
.ws-react-e-vertical-tabs .vertical-tabs-pf-tab.active > a::before {
background: var(--pf-t--global--border--color--brand--clicked);
background: var(--pf-t--global--border--color--clicked);
content: " ";
left: 0;
inset-inline-start: 0;
position: absolute;
width: 3px;
width: var(--pf-t--global--border--width--extra-strong);
}
.ws-react-e-vertical-tabs .vertical-tabs-pf-tab:first-of-type {
margin-top: 0;
margin-block-start: 0;
}
.ws-react-e-vertical-tabs .vertical-tabs-pf-tab > .vertical-tabs-pf > .vertical-tabs-pf-tab {
position: initial;
padding-left: 15px;
margin-inline-start: var(--pf-t--global--spacer--md);
}
.ws-react-e-vertical-tabs .vertical-tabs-pf.restrict-tabs .vertical-tabs-pf-tab {
display: none;
Expand Down
Loading

0 comments on commit d714e15

Please sign in to comment.