Skip to content

Commit 16d76ed

Browse files
mtorromeomtorromeo
committed
refactor: v6 wip
1 parent 7a66182 commit 16d76ed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

66 files changed

+521
-312
lines changed

‎apps/docs/package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
"serve": "vite preview"
1010
},
1111
"dependencies": {
12-
"@patternfly/patternfly": "^5.4.2",
12+
"@patternfly/patternfly": "^6.2.0",
1313
"@vue-patternfly/core": "workspace:^",
1414
"@vue-patternfly/icons": "workspace:^",
1515
"@vue-patternfly/table": "workspace:^",
@@ -25,7 +25,7 @@
2525
"@vue/compiler-sfc": "^3.5.13",
2626
"@vue/runtime-core": "^3.5.13",
2727
"@vue/shared": "^3.5.13",
28-
"@vueuse/core": "^13.0.0",
28+
"@vueuse/core": "^13.1.0",
2929
"markdown-it": "^14.1.0",
3030
"node-html-parser": "^7.0.1",
3131
"sass": "^1.86.3",

‎apps/docs/src/App.vue‎

Lines changed: 31 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -2,18 +2,15 @@
22
<pf-page v-if="!$route.meta.iframe" managed-sidebar>
33
<template #skeleton>
44
<pf-masthead>
5-
<pf-masthead-toggle>
6-
<pf-page-toggle-button>
7-
<bars-icon />
8-
</pf-page-toggle-button>
9-
</pf-masthead-toggle>
105
<pf-masthead-main>
6+
<pf-masthead-toggle>
7+
<pf-page-toggle-button>
8+
<bars-icon />
9+
</pf-page-toggle-button>
10+
</pf-masthead-toggle>
1111
<router-link v-slot="{ href }" :to="{ name: 'introduction' }" custom>
1212
<pf-masthead-brand :href="href">
13-
<pf-brand
14-
src="https://v5-archive.patternfly.org/assets/images/pf_logo.svg"
15-
style="height:40px;filter:invert(1)"
16-
/>
13+
<pf-brand :src="PfLogo" style="height:40px" />
1714
</pf-masthead-brand>
1815
</router-link>
1916
</pf-masthead-main>
@@ -61,32 +58,32 @@
6158

6259
<style lang="scss">
6360
.page__layouts {
64-
.pf-v5-l-bullseye,
65-
.pf-v5-l-bullseye > div,
66-
.pf-v5-l-flex,
67-
.pf-v5-l-flex > div,
68-
.pf-v5-l-gallery,
69-
.pf-v5-l-gallery > div,
70-
.pf-v5-l-grid,
71-
.pf-v5-l-grid > div,
72-
.pf-v5-l-level,
73-
.pf-v5-l-level > div,
74-
.pf-v5-l-split,
75-
.pf-v5-l-split > div,
76-
.pf-v5-l-stack,
77-
.pf-v5-l-stack > div {
61+
.pf-v6-l-bullseye,
62+
.pf-v6-l-bullseye > div,
63+
.pf-v6-l-flex,
64+
.pf-v6-l-flex > div,
65+
.pf-v6-l-gallery,
66+
.pf-v6-l-gallery > div,
67+
.pf-v6-l-grid,
68+
.pf-v6-l-grid > div,
69+
.pf-v6-l-level,
70+
.pf-v6-l-level > div,
71+
.pf-v6-l-split,
72+
.pf-v6-l-split > div,
73+
.pf-v6-l-stack,
74+
.pf-v6-l-stack > div {
7875
border-style: dashed !important;
7976
border-width: 2px !important;
8077
padding: 1rem !important;
8178
}
8279
83-
.pf-v5-l-bullseye,
84-
.pf-v5-l-flex,
85-
.pf-v5-l-gallery,
86-
.pf-v5-l-grid,
87-
.pf-v5-l-level,
88-
.pf-v5-l-split,
89-
.pf-v5-l-stack {
80+
.pf-v6-l-bullseye,
81+
.pf-v6-l-flex,
82+
.pf-v6-l-gallery,
83+
.pf-v6-l-grid,
84+
.pf-v6-l-level,
85+
.pf-v6-l-split,
86+
.pf-v6-l-stack {
9087
margin: 1rem 0 !important;
9188
}
9289
}
@@ -98,6 +95,7 @@ import { stories } from './router';
9895
import { useAlertsStore } from './store/alerts';
9996
import { ref } from 'vue';
10097
import { watch } from 'vue';
98+
import PfLogo from '@patternfly/patternfly/assets/images/PF-HorizontalLogo-Color.svg';
10199
import BarsIcon from '@vue-patternfly/icons/bars-icon';
102100
103101
const alerts = useAlertsStore();
@@ -115,12 +113,12 @@ const overflowMessage = computed(() => {
115113
});
116114
117115
const darkTheme = computed({
118-
get: () => document.documentElement.classList.contains('pf-v5-theme-dark'),
116+
get: () => document.documentElement.classList.contains('pf-v6-theme-dark'),
119117
set(value) {
120118
if (value) {
121-
document.documentElement.classList.add('pf-v5-theme-dark');
119+
document.documentElement.classList.add('pf-v6-theme-dark');
122120
} else {
123-
document.documentElement.classList.remove('pf-v5-theme-dark');
121+
document.documentElement.classList.remove('pf-v6-theme-dark');
124122
}
125123
},
126124
});

‎apps/docs/src/components/ComponentInfo.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@
2727
</pf-thead>
2828
<pf-tbody>
2929
<pf-tr v-for="prop in doc.props" :key="prop.name">
30-
<pf-td>{{ prop.name }} <span v-if="prop.required" :style="{color: 'var(--pf-v5-global--danger-color--100)'}">*</span></pf-td>
30+
<pf-td>{{ prop.name }} <span v-if="prop.required" :style="{color: 'var(--pf-v6-global--danger-color--100)'}">*</span></pf-td>
3131
<pf-td v-if="prop.type?.name === 'union'">{{ (prop.type as any).elements.map((e: any) => e.name).join(' | ') }}</pf-td>
3232
<pf-td v-else-if="prop.type?.name === 'Array'">{{ (prop.type as any).elements.map((e: any) => e.name).join(' | ') }}[]</pf-td>
3333
<pf-td v-else-if="prop.type?.name === 'TSFunctionType'">function</pf-td>

‎apps/docs/src/components/DocPage.vue‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@
2929

3030
<pf-page-section v-if="!$route.params.mainTab || $route.params.mainTab === 'story'" width-limited>
3131
<pf-flex>
32-
<pf-jump-links class="toc" :offset="120" vertical expandable="expandable" expandable-xl2="nonExpandable" scrollable-element="main.pf-v5-c-page__main" auto-link-from-elements="h3.pf-v5-c-title">
32+
<pf-jump-links class="toc" :offset="120" vertical expandable="expandable" expandable-xl2="nonExpandable" scrollable-element="main.pf-v6-c-page__main" auto-link-from-elements="h3.pf-v6-c-title">
3333
<template #label>Table of contents</template>
3434
</pf-jump-links>
3535

@@ -60,7 +60,7 @@
6060
overflow-y: auto;
6161
scrollbar-width: none;
6262
order: 1;
63-
padding: 0 var(--pf-v5-global--spacer--lg) var(--pf-v5-global--spacer--lg) var(--pf-v5-global--spacer--2xl);
63+
padding: 0 var(--pf-v6-global--spacer--lg) var(--pf-v6-global--spacer--lg) var(--pf-v6-global--spacer--2xl);
6464
margin: 0;
6565
}
6666
</style>
@@ -89,7 +89,7 @@ const props = withDefaults(defineProps<Props>(), {
8989
9090
let pfDocUrl = '';
9191
if (props.title && !props.noDesignGuidelines) {
92-
pfDocUrl = `https://v5-archive.patternfly.org/${props.docSection}/${props.title.replace(/ /g, '-').toLowerCase()}`;
92+
pfDocUrl = `https://www.patternfly.org/${props.docSection}/${props.title.replace(/ /g, '-').toLowerCase()}`;
9393
}
9494
9595
defineSlots<{

‎apps/docs/src/components/StoryCanvas.vue‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -34,13 +34,13 @@
3434
padding: 30px 20px;
3535
border-top-left-radius: 6px;
3636
border-top-right-radius: 6px;
37-
background-color: var(--pf-v5-c-page__main-section--m-light-100--BackgroundColor);
37+
background-color: var(--pf-v6-c-page__main-section--m-light-100--BackgroundColor);
3838
border: 1px solid rgba(0, 0, 0, 0.1);
3939
border-bottom: none;
4040
}
4141
4242
.story-canvas .canvas.dark {
43-
background-color: var(--pf-v5-global--BackgroundColor--dark-300);
43+
background-color: var(--pf-v6-global--BackgroundColor--dark-300);
4444
}
4545
4646
.story-canvas .language-vue {
@@ -58,7 +58,7 @@
5858
position: absolute;
5959
top: 0;
6060
right: 0;
61-
background-color: var(--pf-v5-c-page__main-section--m-light-100--BackgroundColor);
61+
background-color: var(--pf-v6-c-page__main-section--m-light-100--BackgroundColor);
6262
border-right: 1px solid rgba(0, 0, 0, 0.1);
6363
border-bottom-left-radius: 6px;
6464
}

‎apps/docs/src/index.css‎

Lines changed: 33 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,44 @@
11
body {
2-
--pf-v5-global--active-color--100: #018732;
3-
--pf-v5-global--active-color--200: #89ffca;
4-
--pf-v5-global--active-color--300: #42b983;
5-
--pf-v5-global--active-color--400: #5afdb1;
6-
7-
--pf-v5-global--primary-color--100: var(--pf-v5-global--active-color--100);
8-
--pf-v5-global--primary-color--200: #003513;
9-
10-
--pf-v5-global--primary-color--light-100: var(--pf-v5-global--active-color--300);
11-
--pf-v5-global--primary-color--dark-100: var(--pf-v5-global--primary-color--100);
12-
13-
--pf-v5-global--link--Color: var(--pf-v5-global--primary-color--100);
14-
--pf-v5-global--link--Color--hover: var(--pf-v5-global--primary-color--200);
15-
16-
--pf-v5-global--link--Color--dark: var(--pf-v5-global--primary-color--100);
17-
--pf-v5-global--link--Color--dark--hover: var(--pf-v5-global--primary-color--200);
18-
19-
--pf-v5-global--link--Color--light: var(--pf-v5-global--primary-color--light-100);
20-
--pf-v5-global--link--Color--light--hover: var(--pf-v5-global--active-color--400);
2+
--pf-v6-global--active-color--100: #018732;
3+
--pf-v6-global--active-color--200: #89ffca;
4+
--pf-v6-global--active-color--300: #42b983;
5+
--pf-v6-global--active-color--400: #5afdb1;
6+
7+
--pf-v6-global--primary-color--100: var(--pf-v6-global--active-color--100);
8+
--pf-v6-global--primary-color--200: #003513;
9+
10+
--pf-v6-global--primary-color--light-100: var(
11+
--pf-v6-global--active-color--300
12+
);
13+
--pf-v6-global--primary-color--dark-100: var(
14+
--pf-v6-global--primary-color--100
15+
);
16+
17+
--pf-v6-global--link--Color: var(--pf-v6-global--primary-color--100);
18+
--pf-v6-global--link--Color--hover: var(--pf-v6-global--primary-color--200);
19+
20+
--pf-v6-global--link--Color--dark: var(--pf-v6-global--primary-color--100);
21+
--pf-v6-global--link--Color--dark--hover: var(
22+
--pf-v6-global--primary-color--200
23+
);
24+
25+
--pf-v6-global--link--Color--light: var(
26+
--pf-v6-global--primary-color--light-100
27+
);
28+
--pf-v6-global--link--Color--light--hover: var(
29+
--pf-v6-global--active-color--400
30+
);
2131
}
2232

2333
#app {
2434
height: 100%;
2535
}
2636

27-
.pf-v5-c-page__main-section .example-heading {
37+
.pf-v6-c-page__main-section .example-heading {
2838
margin-top: 50px;
29-
padding: var(--pf-v5-global--spacer--md) 0;
30-
margin-bottom: var(--pf-v5-global--spacer--md);
31-
border-bottom: var(--pf-v5-global--BorderWidth--sm) solid #f8f8f8;
39+
padding: var(--pf-v6-global--spacer--md) 0;
40+
margin-bottom: var(--pf-v6-global--spacer--md);
41+
border-bottom: var(--pf-v6-global--BorderWidth--sm) solid #f8f8f8;
3242
}
3343

3444
.markdown pre.shiki {

‎apps/docs/src/stories/Components/Alert.story.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -296,7 +296,7 @@
296296
</template>
297297

298298
<style scoped>
299-
.pf-v5-c-alert + .pf-v5-c-alert {
299+
.pf-v6-c-alert + .pf-v6-c-alert {
300300
margin-top: 20px;
301301
}
302302
</style>

‎apps/docs/src/stories/Components/Badge.story.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@
2323
</template>
2424

2525
<style scoped>
26-
.pf-v5-c-badge + .pf-v5-c-badge {
26+
.pf-v6-c-badge + .pf-v6-c-badge {
2727
margin-left: 0.2rem;
2828
}
2929
</style>

‎apps/docs/src/stories/Components/Banner.story.vue‎

Lines changed: 25 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -9,66 +9,73 @@
99
<story-canvas title="Basic">
1010
<pf-banner>Default banner</pf-banner>
1111
<br>
12-
<pf-banner variant="blue">Blue banner</pf-banner>
12+
<pf-banner color="red">Red banner</pf-banner>
1313
<br>
14-
<pf-banner variant="red">Red banner</pf-banner>
14+
<pf-banner color="orangered">Orangered banner</pf-banner>
1515
<br>
16-
<pf-banner variant="green">Green banner</pf-banner>
16+
<pf-banner color="orange">Orange banner</pf-banner>
1717
<br>
18-
<pf-banner variant="gold">Gold banner</pf-banner>
18+
<pf-banner color="yellow">Yellow banner</pf-banner>
19+
<br>
20+
<pf-banner color="green">Green banner</pf-banner>
21+
<br>
22+
<pf-banner color="teal">Teal banner</pf-banner>
23+
<br>
24+
<pf-banner color="blue">Blue banner</pf-banner>
25+
<br>
26+
<pf-banner color="purple">Purple banner</pf-banner>
1927
</story-canvas>
2028

2129
<story-canvas title="Status">
22-
<pf-banner screen-reader-text="Default banner">
30+
<pf-banner status="success" screen-reader-text="Success banner">
2331
<pf-flex space-items="sm">
2432
<pf-flex-item>
25-
<bell-icon />
33+
<circle-check-icon />
2634
</pf-flex-item>
27-
<pf-flex-item>Default banner</pf-flex-item>
35+
<pf-flex-item>Success banner</pf-flex-item>
2836
</pf-flex>
2937
</pf-banner>
3038
<br>
31-
<pf-banner variant="blue" screen-reader-text="Blue banner">
39+
<pf-banner status="warning" screen-reader-text="Warning banner">
3240
<pf-flex space-items="sm">
3341
<pf-flex-item>
34-
<circle-info-icon />
42+
<triangle-exclamation-icon />
3543
</pf-flex-item>
36-
<pf-flex-item>Blue banner</pf-flex-item>
44+
<pf-flex-item>Warning banner</pf-flex-item>
3745
</pf-flex>
3846
</pf-banner>
3947
<br>
40-
<pf-banner variant="red" screen-reader-text="Red banner">
48+
<pf-banner status="danger" screen-reader-text="Danger banner">
4149
<pf-flex space-items="sm">
4250
<pf-flex-item>
4351
<circle-exclamation-icon />
4452
</pf-flex-item>
45-
<pf-flex-item>Red banner</pf-flex-item>
53+
<pf-flex-item>Danger banner</pf-flex-item>
4654
</pf-flex>
4755
</pf-banner>
4856
<br>
49-
<pf-banner variant="green" screen-reader-text="Green banner">
57+
<pf-banner status="info" screen-reader-text="Info banner">
5058
<pf-flex space-items="sm">
5159
<pf-flex-item>
52-
<circle-check-icon />
60+
<circle-info-icon />
5361
</pf-flex-item>
54-
<pf-flex-item>Green banner</pf-flex-item>
62+
<pf-flex-item>Info banner</pf-flex-item>
5563
</pf-flex>
5664
</pf-banner>
5765
<br>
58-
<pf-banner variant="gold" screen-reader-text="Gold banner">
66+
<pf-banner status="custom" screen-reader-text="Custom banner">
5967
<pf-flex space-items="sm">
6068
<pf-flex-item>
6169
<triangle-exclamation-icon />
6270
</pf-flex-item>
63-
<pf-flex-item>Gold banner</pf-flex-item>
71+
<pf-flex-item>Custom banner</pf-flex-item>
6472
</pf-flex>
6573
</pf-banner>
6674
</story-canvas>
6775
</doc-page>
6876
</template>
6977

7078
<script lang="ts" setup>
71-
import BellIcon from '@vue-patternfly/icons/bell-icon';
7279
import CircleInfoIcon from '@vue-patternfly/icons/circle-info-icon';
7380
import CircleExclamationIcon from '@vue-patternfly/icons/circle-exclamation-icon';
7481
import CircleCheckIcon from '@vue-patternfly/icons/circle-check-icon';

‎apps/docs/src/stories/Components/Brand.story.vue‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
</pre>
1212

1313
<story-canvas title="Basic">
14-
<pf-brand src="https://v5-archive.patternfly.org/assets/images/pf_logo.svg" alt="Patternfly Logo" />
14+
<pf-brand src="https://www.patternfly.org/assets/images/pf_logo.svg" alt="Patternfly Logo" />
1515
</story-canvas>
1616

1717
<story-canvas title="Responsive">
@@ -22,17 +22,17 @@
2222
</template>
2323

2424
<pf-brand
25-
src="https://v5-archive.patternfly.org/assets/images/pf-c-brand__logo-base.jpg"
25+
src="https://www.patternfly.org/assets/images/pf-c-brand__logo-base.jpg"
2626
alt="Fallback patternfly default logo"
2727
width="40px"
2828
width-sm="60px"
2929
width-md="220px"
3030
>
31-
<source media="(min-width: 1200px)" srcset="https://v5-archive.patternfly.org/assets/images/pf-c-brand__logo-on-xl.svg">
32-
<source media="(min-width: 992px)" srcset="https://v5-archive.patternfly.org/assets/images/pf-c-brand__logo-on-lg.svg">
33-
<source media="(min-width: 768px)" srcset="https://v5-archive.patternfly.org/assets/images/pf-c-brand__logo-on-md.svg">
34-
<source media="(min-width: 576px)" srcset="https://v5-archive.patternfly.org/assets/images/pf-c-brand__logo-on-sm.svg">
35-
<source srcset="https://v5-archive.patternfly.org/assets/images/pf-c-brand__logo.svg">
31+
<source media="(min-width: 1200px)" srcset="https://www.patternfly.org/assets/images/pf-c-brand__logo-on-xl.svg">
32+
<source media="(min-width: 992px)" srcset="https://www.patternfly.org/assets/images/pf-c-brand__logo-on-lg.svg">
33+
<source media="(min-width: 768px)" srcset="https://www.patternfly.org/assets/images/pf-c-brand__logo-on-md.svg">
34+
<source media="(min-width: 576px)" srcset="https://www.patternfly.org/assets/images/pf-c-brand__logo-on-sm.svg">
35+
<source srcset="https://www.patternfly.org/assets/images/pf-c-brand__logo.svg">
3636
</pf-brand>
3737
</story-canvas>
3838
</doc-page>

0 commit comments

Comments
 (0)