Skip to content

Commit 22b961b

Browse files
mtorromeomtorromeo
committed
refactor: v6 wip
1 parent 7a66182 commit 22b961b

Some content is hidden

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

80 files changed

+931
-508
lines changed

‎apps/docs/package.json‎

Lines changed: 3 additions & 3 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",
@@ -37,5 +37,5 @@
3737
"vue-docgen-api": "^4.79.2",
3838
"vue-tsc": "^2.2.8"
3939
},
40-
"packageManager": "pnpm@8.6.1"
40+
"packageManager": "pnpm@10.8.0+sha512.0e82714d1b5b43c74610193cb20734897c1d00de89d0e18420aebc5977fa13d780a9cb05734624e81ebd81cc876cd464794850641c48b9544326b5622ca29971"
4141
}

‎apps/docs/src/App.vue‎

Lines changed: 51 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -2,28 +2,33 @@
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:38px" />
1714
</pf-masthead-brand>
1815
</router-link>
1916
</pf-masthead-main>
2017
<pf-masthead-content>
2118
<pf-toolbar full-height>
2219
<pf-toolbar-content>
23-
<pf-toolbar-item>header-tools</pf-toolbar-item>
24-
<pf-toolbar-item align="right">
25-
<pf-switch v-model:checked="darkTheme" label="Dark theme" />
26-
</pf-toolbar-item>
20+
<pf-toolbar-group align="end">
21+
<pf-toolbar-item>
22+
<pf-toggle-group v-model="darkTheme">
23+
<pf-toggle-group-item :value="false">
24+
<sun-icon />
25+
</pf-toggle-group-item>
26+
<pf-toggle-group-item :value="true">
27+
<moon-icon />
28+
</pf-toggle-group-item>
29+
</pf-toggle-group>
30+
</pf-toolbar-item>
31+
</pf-toolbar-group>
2732
</pf-toolbar-content>
2833
</pf-toolbar>
2934
</pf-masthead-content>
@@ -61,44 +66,45 @@
6166

6267
<style lang="scss">
6368
.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 {
69+
.pf-v6-l-bullseye,
70+
.pf-v6-l-bullseye > div,
71+
.pf-v6-l-flex,
72+
.pf-v6-l-flex > div,
73+
.pf-v6-l-gallery,
74+
.pf-v6-l-gallery > div,
75+
.pf-v6-l-grid,
76+
.pf-v6-l-grid > div,
77+
.pf-v6-l-level,
78+
.pf-v6-l-level > div,
79+
.pf-v6-l-split,
80+
.pf-v6-l-split > div,
81+
.pf-v6-l-stack,
82+
.pf-v6-l-stack > div {
7883
border-style: dashed !important;
7984
border-width: 2px !important;
8085
padding: 1rem !important;
8186
}
8287
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 {
88+
.pf-v6-l-bullseye,
89+
.pf-v6-l-flex,
90+
.pf-v6-l-gallery,
91+
.pf-v6-l-grid,
92+
.pf-v6-l-level,
93+
.pf-v6-l-split,
94+
.pf-v6-l-stack {
9095
margin: 1rem 0 !important;
9196
}
9297
}
9398
</style>
9499

95100
<script lang="ts" setup>
96-
import { computed } from 'vue';
101+
import { computed, ref, watch } from 'vue';
97102
import { stories } from './router';
98103
import { useAlertsStore } from './store/alerts';
99-
import { ref } from 'vue';
100-
import { watch } from 'vue';
104+
import PfLogo from '@patternfly/patternfly/assets/images/PF-HorizontalLogo-Color.svg';
101105
import BarsIcon from '@vue-patternfly/icons/bars-icon';
106+
import SunIcon from '@vue-patternfly/icons/sun-icon';
107+
import MoonIcon from '@vue-patternfly/icons/moon-icon';
102108
103109
const alerts = useAlertsStore();
104110
const maxDisplayed = ref(5);
@@ -114,15 +120,14 @@ const overflowMessage = computed(() => {
114120
return '';
115121
});
116122
117-
const darkTheme = computed({
118-
get: () => document.documentElement.classList.contains('pf-v5-theme-dark'),
119-
set(value) {
120-
if (value) {
121-
document.documentElement.classList.add('pf-v5-theme-dark');
122-
} else {
123-
document.documentElement.classList.remove('pf-v5-theme-dark');
124-
}
125-
},
123+
const darkTheme = ref(document.documentElement.classList.contains('pf-v6-theme-dark'));
124+
125+
watch(darkTheme, value => {
126+
if (value) {
127+
document.documentElement.classList.add('pf-v6-theme-dark');
128+
} else {
129+
document.documentElement.classList.remove('pf-v6-theme-dark');
130+
}
126131
});
127132
128133
function expandAlerts() {

‎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>

0 commit comments

Comments
 (0)