Skip to content

Commit 7427e02

Browse files
zeroedinzeroedin
committed
feat(switch): port pf-v5-switch to pf-v6-switch
1 parent 8fedd86 commit 7427e02

49 files changed

Lines changed: 1108 additions & 1075 deletions

Some content is hidden

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

‎docs/framework-integration/react.md‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -130,7 +130,7 @@ tags:
130130

131131
import { Button } from "@patternfly/elements/react/pf-v5-button/pf-v5-button.js";
132132
import { Card } from "@patternfly/elements/react/pf-v5-card/pf-v5-card.js";
133-
import { Switch } from "@patternfly/elements/react/pf-v5-switch/pf-v5-switch.js";
133+
import { Switch } from "@patternfly/elements/react/pf-v6-switch/pf-v6-switch.js";
134134
import { Popover } from "@patternfly/elements/react/pf-v5-popover/pf-v5-popover.js";
135135
import { Tooltip } from "@patternfly/elements/react/pf-v5-tooltip/pf-v5-tooltip.js";
136136

@@ -160,7 +160,7 @@ tags:
160160

161161
### Switch
162162

163-
Now we have a card and a button component, let's add [`pf-v5-switch`][pf-v5-switch]
163+
Now we have a card and a button component, let's add [`pf-v6-switch`][pf-v6-switch]
164164
web component in our app. We will enable/disable the decrement button by
165165
clicking on the Switch button.
166166

@@ -355,7 +355,7 @@ tags:
355355
[vite]: https://vitejs.dev/guide/#scaffolding-your-first-vite-project
356356
[pf-v5-button]: https://patternflyelements.org/components/button/
357357
[pf-v5-card]: https://patternflyelements.org/components/card/
358-
[pf-v5-switch]: https://patternflyelements.org/components/switch/
358+
[pf-v6-switch]: https://patternflyelements.org/components/switch/
359359
[pf-v5-tooltip]: https://patternflyelements.org/components/tooltip/
360360
[pf-v5-popover]: https://patternflyelements.org/components/popover/
361361
[inng]: https://medium.com/patternfly-elements/using-patternfly-elements-web-components-in-your-angular-app-4b18b1c9c363

‎elements/pf-v5-accordion/demo/bordered.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<article>
22
<header>
33
<h2>Bordered</h2>
4-
<pf-v5-switch id="toggle-size" name="toggle-size"></pf-v5-switch>
4+
<pf-v6-switch id="toggle-size" name="toggle-size"></pf-v6-switch>
55
<label for="toggle-size" data-state="on">Size: Large</label>
66
<label for="toggle-size" data-state="off">Size: Normal</label>
77
</header>
@@ -57,7 +57,7 @@ <h3>Item five</h3>
5757
<script type="module">
5858
import '@patternfly/elements/pf-v5-accordion/pf-v5-accordion.js';
5959
import '@patternfly/elements/pf-v5-button/pf-v5-button.js';
60-
import '@patternfly/elements/pf-v5-switch/pf-v5-switch.js';
60+
import '@patternfly/elements/pf-v6-switch/pf-v6-switch.js';
6161

6262
const bordered = document.getElementById('bordered-example');
6363
const toggle = document.getElementById('toggle-size');

‎elements/pf-v5-accordion/test/pf-accordion.spec.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { a11ySnapshot, querySnapshot } from '@patternfly/pfe-tools/test/a11y-sna
55

66
// Import the element we're testing.
77
import { PfV5Accordion, PfV5AccordionPanel, PfV5AccordionHeader } from '@patternfly/elements/pf-v5-accordion/pf-v5-accordion.js';
8-
import { PfV5Switch } from '@patternfly/elements/pf-v5-switch/pf-v5-switch.js';
8+
import { PfV5Switch } from '@patternfly/elements/pf-v6-switch/pf-v6-switch.js';
99

1010
import { Logger } from '@patternfly/pfe-core/controllers/logger.js';
1111

@@ -1357,14 +1357,14 @@ describe('<pf-v5-accordion>', function() {
13571357
<pf-v5-accordion>
13581358
<pf-v5-accordion-header expanded id="header-1-1" data-index="0"></pf-v5-accordion-header>
13591359
<pf-v5-accordion-panel id="panel-1-1" data-index="0">
1360-
<pf-v5-switch></pf-v5-switch>
1360+
<pf-v6-switch></pf-v6-switch>
13611361
<input type="checkbox">
13621362
</pf-v5-accordion-panel>
13631363
</pf-v5-accordion>
13641364
`);
13651365
panels = document.querySelectorAll('pf-v5-accordion-panel');
13661366
checkbox = element.querySelector('input')!;
1367-
pfswitch = element.querySelector('pf-v5-switch')!;
1367+
pfswitch = element.querySelector('pf-v6-switch')!;
13681368
expect(checkbox).to.be.ok;
13691369
expect(pfswitch).to.be.ok;
13701370
[accordionPanelOne] = panels;

‎elements/pf-v5-button/demo/form-control.html‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -3,39 +3,39 @@ <h2>Nothing disabled</h2>
33
<fieldset>
44
<pf-v5-button>Ok</pf-v5-button>
55
</fieldset>
6-
<label>Fieldset Disabled <pf-v5-switch name="fieldset"></pf-v5-switch> </label>
7-
<label>Button Disabled <pf-v5-switch name="button"></pf-v5-switch> </label>
6+
<label>Fieldset Disabled <pf-v6-switch name="fieldset"></pf-v6-switch> </label>
7+
<label>Button Disabled <pf-v6-switch name="button"></pf-v6-switch> </label>
88
</form>
99

1010
<form>
1111
<h2>fieldset disabled</h2>
1212
<fieldset disabled>
1313
<pf-v5-button>Ok</pf-v5-button>
1414
</fieldset>
15-
<label>Fieldset Disabled <pf-v5-switch name="fieldset" checked></pf-v5-switch> </label>
16-
<label>Button Disabled <pf-v5-switch name="button"></pf-v5-switch> </label>
15+
<label>Fieldset Disabled <pf-v6-switch name="fieldset" checked></pf-v6-switch> </label>
16+
<label>Button Disabled <pf-v6-switch name="button"></pf-v6-switch> </label>
1717
</form>
1818

1919
<form>
2020
<h2>Button disabled</h2>
2121
<fieldset>
2222
<pf-v5-button disabled>Ok</pf-v5-button>
2323
</fieldset>
24-
<label>Fieldset Disabled <pf-v5-switch name="fieldset"></pf-v5-switch> </label>
25-
<label>Button Disabled <pf-v5-switch name="button" checked></pf-v5-switch> </label>
24+
<label>Fieldset Disabled <pf-v6-switch name="fieldset"></pf-v6-switch> </label>
25+
<label>Button Disabled <pf-v6-switch name="button" checked></pf-v6-switch> </label>
2626
</form>
2727

2828
<form>
2929
<h2>Both disabled</h2>
3030
<fieldset disabled>
3131
<pf-v5-button disabled>Ok</pf-v5-button>
3232
</fieldset>
33-
<label>Fieldset Disabled <pf-v5-switch name="fieldset" checked></pf-v5-switch> </label>
34-
<label>Button Disabled <pf-v5-switch name="button" checked></pf-v5-switch> </label>
33+
<label>Fieldset Disabled <pf-v6-switch name="fieldset" checked></pf-v6-switch> </label>
34+
<label>Button Disabled <pf-v6-switch name="button" checked></pf-v6-switch> </label>
3535
</form>
3636

3737
<script type="module">
38-
import '@patternfly/elements/pf-v5-switch/pf-v5-switch.js';
38+
import '@patternfly/elements/pf-v6-switch/pf-v6-switch.js';
3939
import '@patternfly/elements/pf-v5-button/pf-v5-button.js';
4040

4141
for (const form of document.querySelectorAll('form')) {

‎elements/pf-v5-card/demo/modifiers.html‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,21 @@
11
<section>
22
<form id="card-settings">
3-
<pf-v5-switch id="flat" data-attribute="flat"></pf-v5-switch>
3+
<pf-v6-switch id="flat" data-attribute="flat"></pf-v6-switch>
44
<label for="flat">Flat</label>
55

6-
<pf-v5-switch id="rounded" data-attribute="rounded"></pf-v5-switch>
6+
<pf-v6-switch id="rounded" data-attribute="rounded"></pf-v6-switch>
77
<label for="rounded">Rounded</label>
88

9-
<pf-v5-switch id="plain" data-attribute="plain"></pf-v5-switch>
9+
<pf-v6-switch id="plain" data-attribute="plain"></pf-v6-switch>
1010
<label for="plain">Plain</label>
1111

12-
<pf-v5-switch id="full-height" data-attribute="full-height"></pf-v5-switch>
12+
<pf-v6-switch id="full-height" data-attribute="full-height"></pf-v6-switch>
1313
<label for="full-height">Full Height</label>
1414

15-
<pf-v5-switch id="size-compact" data-attribute="size" data-value="compact"></pf-v5-switch>
15+
<pf-v6-switch id="size-compact" data-attribute="size" data-value="compact"></pf-v6-switch>
1616
<label for="size-compact">Compact</label>
1717

18-
<pf-v5-switch id="size-large" data-attribute="size" data-value="large"></pf-v5-switch>
18+
<pf-v6-switch id="size-large" data-attribute="size" data-value="large"></pf-v6-switch>
1919
<label for="size-large">Large</label>
2020
</form>
2121

@@ -32,13 +32,13 @@ <h2 slot="header">Lightest card</h2>
3232
<script type="module">
3333
import '@patternfly/elements/pf-v5-card/pf-v5-card.js';
3434
import '@patternfly/elements/pf-v5-button/pf-v5-button.js';
35-
import '@patternfly/elements/pf-v5-switch/pf-v5-switch.js';
35+
import '@patternfly/elements/pf-v6-switch/pf-v6-switch.js';
3636

3737
const form = document.getElementById('card-settings');
3838
const card = document.querySelector('pf-v5-card');
3939

4040
form.addEventListener('change', async function(event) {
41-
await Promise.all(Array.from(document.querySelectorAll('pf-v5-switch'), x => x.updateComplete));
41+
await Promise.all(Array.from(document.querySelectorAll('pf-v6-switch'), x => x.updateComplete));
4242
const { checked } = event.target;
4343
const { attribute, value } = event.target.dataset;
4444
switch (attribute) {

‎elements/pf-v5-dropdown/demo/custom-toggle.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
<em>Note:</em> When using a custom toggle, you must slot in a <code>pf-v5-dropdown-menu</code>.
44
</small>
55
<span id="switch-group">
6-
<pf-v5-switch id="disable-all"></pf-v5-switch>
6+
<pf-v6-switch id="disable-all"></pf-v6-switch>
77
<label for="disable-all"><span data-state="on">Enable</span><span data-state="off">Disable</span> all dropdowns</label>
88
</span>
99
</p>
@@ -113,7 +113,7 @@
113113

114114
<script type="module">
115115
import '@patternfly/elements/pf-v5-dropdown/pf-v5-dropdown.js';
116-
import '@patternfly/elements/pf-v5-switch/pf-v5-switch.js';
116+
import '@patternfly/elements/pf-v6-switch/pf-v6-switch.js';
117117
const sw = document.getElementById('disable-all')
118118
sw.addEventListener('click', function() {
119119
document.querySelectorAll('main pf-v5-dropdown').forEach(x => x.disabled = sw.checked);

‎elements/pf-v5-jump-links/demo/scrollspy-with-subsections.html‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<header>
33
<h2>Main title</h2>
44

5-
<pf-v5-switch id="is-vertical" checked></pf-v5-switch>
5+
<pf-v6-switch id="is-vertical" checked></pf-v6-switch>
66
<label for="is-vertical" data-state="on">Vertical</label>
77
<label for="is-vertical" data-state="off">Horizontal</label>
88
</header>
@@ -142,12 +142,12 @@ <h2 id="heading-5">Heading 5</h2>
142142
</div>
143143

144144
<script type="module">
145-
import '@patternfly/elements/pf-v5-switch/pf-v5-switch.js';
145+
import '@patternfly/elements/pf-v6-switch/pf-v6-switch.js';
146146
import '@patternfly/elements/pf-v5-jump-links/pf-v5-jump-links.js';
147147

148148
const main = document.getElementById('demo');
149149
const links = document.querySelector('pf-v5-jump-links');
150-
const swtch = document.querySelector('pf-v5-switch');
150+
const swtch = document.querySelector('pf-v6-switch');
151151
const media = matchMedia('(max-width: 600px)');
152152

153153
function sumHeights(...elements) {
@@ -230,8 +230,8 @@ <h2 id="heading-5">Heading 5</h2>
230230
}
231231

232232

233-
pf-v5-switch + label,
234-
pf-v5-switch + label + label {
233+
pf-v6-switch + label,
234+
pf-v6-switch + label + label {
235235
margin-inline-start: 12px;
236236
}
237237
</style>

‎elements/pf-v5-progress-stepper/demo/alignment.html‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<form id="alignment">
22
<h2>With alignment</h2>
3-
<label><pf-v5-switch name="vertical"></pf-v5-switch> Vertical alignment</label>
4-
<label><pf-v5-switch name="center"></pf-v5-switch> Center alignment</label>
3+
<label><pf-v6-switch name="vertical"></pf-v6-switch> Vertical alignment</label>
4+
<label><pf-v6-switch name="center"></pf-v6-switch> Center alignment</label>
55
<pf-v5-progress-stepper name="progress">
66
<pf-v5-progress-step description="This is the first thing to happen" variant="success">First Step</pf-v5-progress-step>
77
<pf-v5-progress-step description="This is the second thing to happen" variant="info" current>Second Step</pf-v5-progress-step>
@@ -10,7 +10,7 @@ <h2>With alignment</h2>
1010
</form>
1111

1212
<script type="module">
13-
import '@patternfly/elements/pf-v5-switch/pf-v5-switch.js';
13+
import '@patternfly/elements/pf-v6-switch/pf-v6-switch.js';
1414
import '@patternfly/elements/pf-v5-progress-stepper/pf-v5-progress-stepper.js';
1515

1616
document.querySelector('form').addEventListener('change', /** @this{HTMLFormElement}*/ function onChange() {
@@ -21,7 +21,7 @@ <h2>With alignment</h2>
2121

2222
<style>
2323
form,
24-
label pf-v5-switch {
24+
label pf-v6-switch {
2525
padding-inline: .5rem;
2626
}
2727

‎elements/pf-v5-progress-stepper/demo/compact.html‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<form id="compact">
22
<h2>Compact</h2>
3-
<label><pf-v5-switch name="vertical"></pf-v5-switch> Vertical alignment</label>
4-
<label><pf-v5-switch name="center"></pf-v5-switch> Center alignment</label>
3+
<label><pf-v6-switch name="vertical"></pf-v6-switch> Vertical alignment</label>
4+
<label><pf-v6-switch name="center"></pf-v6-switch> Center alignment</label>
55
<pf-v5-progress-stepper name="progress" compact>
66
<pf-v5-progress-step variant="success">First Step</pf-v5-progress-step>
77
<pf-v5-progress-step variant="info" current>Second Step</pf-v5-progress-step>
@@ -10,7 +10,7 @@ <h2>Compact</h2>
1010
</form>
1111

1212
<script type="module">
13-
import '@patternfly/elements/pf-v5-switch/pf-v5-switch.js';
13+
import '@patternfly/elements/pf-v6-switch/pf-v6-switch.js';
1414
import '@patternfly/elements/pf-v5-progress-stepper/pf-v5-progress-stepper.js';
1515

1616
document.querySelector('form').addEventListener('change', /** @this{HTMLFormElement}*/ function onChange() {
@@ -21,7 +21,7 @@ <h2>Compact</h2>
2121

2222
<style>
2323
form,
24-
label pf-v5-switch {
24+
label pf-v6-switch {
2525
padding-inline: .5rem;
2626
}
2727

‎elements/pf-v5-progress-stepper/demo/info.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
</section>
1010

1111
<script type="module">
12-
import '@patternfly/elements/pf-v5-switch/pf-v5-switch.js';
12+
import '@patternfly/elements/pf-v6-switch/pf-v6-switch.js';
1313
import '@patternfly/elements/pf-v5-progress-stepper/pf-v5-progress-stepper.js';
1414

1515
document.querySelector('form').addEventListener('change', /** @this{HTMLFormElement}*/ function onChange() {
@@ -20,7 +20,7 @@
2020

2121
<style>
2222
form,
23-
label pf-v5-switch {
23+
label pf-v6-switch {
2424
padding-inline: .5rem;
2525
}
2626

0 commit comments

Comments
 (0)