From 5ea2fcb3730e576351087eb91a37c64bbe271258 Mon Sep 17 00:00:00 2001 From: Ganesh Revanakar Date: Tue, 23 Dec 2025 17:21:20 +0530 Subject: [PATCH 1/8] change: [UIE-9863] - UX/UI changes in Linode Create flow - Networking --- .../Networking/InterfaceGeneration.tsx | 53 ++++++++++------- .../LinodeCreate/Networking/InterfaceType.tsx | 58 +++++++------------ 2 files changed, 54 insertions(+), 57 deletions(-) diff --git a/packages/manager/src/features/Linodes/LinodeCreate/Networking/InterfaceGeneration.tsx b/packages/manager/src/features/Linodes/LinodeCreate/Networking/InterfaceGeneration.tsx index 31c393efb2d..bb2dadcd50a 100644 --- a/packages/manager/src/features/Linodes/LinodeCreate/Networking/InterfaceGeneration.tsx +++ b/packages/manager/src/features/Linodes/LinodeCreate/Networking/InterfaceGeneration.tsx @@ -6,6 +6,7 @@ import { Radio, RadioGroup, Stack, + TooltipIcon, Typography, } from '@linode/ui'; import React from 'react'; @@ -22,9 +23,9 @@ const disabledReasonMap: Partial< Record > = { legacy_config_only: - 'You account administrator has enforced that all new Linodes are created with legacy configuration interfaces.', + 'Your account administrator has enforced that all new Linodes are created with legacy configuration interfaces.', linode_only: - 'You account administrator has enforced that all new Linodes are created with Linode interfaces.', + 'Your account administrator has enforced that all new Linodes are created with Linode interfaces.', }; export const InterfaceGeneration = () => { @@ -72,15 +73,21 @@ export const InterfaceGeneration = () => { Linode Interfaces + + Managed directly through a Linode's Network + settings. This is the recommended option. +
+
+ Cloud Firewalls are assigned to individual VPC and + public interfaces. + + } + /> - - Linode Interfaces are the preferred option for VPCs and are - managed directly through a Linode’s Network settings. - - - Cloud Firewalls are assigned to individual VPC and public - interfaces. - } sx={{ alignItems: 'flex-start' }} @@ -89,19 +96,25 @@ export const InterfaceGeneration = () => { } label={ - + ({ font: theme.font.bold })}> Configuration Profile Interfaces (Legacy) - - Interfaces in the Configuration Profile are part of a - Linode’s configuration. - - - Cloud Firewalls are applied at the Linode level and - automatically cover all non-VLAN interfaces in the - Configuration Profile. - + + Interfaces are part of the Linode's Configuration + Profile. +
+
+ Cloud Firewalls are applied at the Linode level and + automatically cover all non-VLAN interfaces in the + Configuration Profile. + + } + /> } sx={{ alignItems: 'flex-start' }} diff --git a/packages/manager/src/features/Linodes/LinodeCreate/Networking/InterfaceType.tsx b/packages/manager/src/features/Linodes/LinodeCreate/Networking/InterfaceType.tsx index 62dc33ee27b..0e8df2a5f20 100644 --- a/packages/manager/src/features/Linodes/LinodeCreate/Networking/InterfaceType.tsx +++ b/packages/manager/src/features/Linodes/LinodeCreate/Networking/InterfaceType.tsx @@ -7,13 +7,12 @@ import { TooltipIcon, Typography, } from '@linode/ui'; -import { Grid } from '@mui/material'; +import { FormControlLabel, Stack } from '@mui/material'; import { useSnackbar } from 'notistack'; import React from 'react'; import { useController, useFormContext, useWatch } from 'react-hook-form'; import { FormLabel } from 'src/components/FormLabel'; -import { SelectionCard } from 'src/components/SelectionCard/SelectionCard'; import { useGetLinodeCreateType } from '../Tabs/utils/useGetLinodeCreateType'; import { getDefaultFirewallForInterfacePurpose } from './utilities'; @@ -36,7 +35,7 @@ const interfaceTypes = [ label: 'VPC', purpose: 'vpc', description: - 'Connects your Linode to a private, Layer 3–isolated network, enabling secure communication with other Linodes in the same VPC.', + 'Connects your Linode to a private, Layer 3 isolated network, allowing secure communication with other Linodes in the same VPC.', }, { label: 'VLAN', @@ -122,48 +121,33 @@ export const InterfaceType = ({ index }: Props) => { /> )} - - The default interface used by this Linode to route network traffic. - Additional interfaces can be added after the Linode is created. - onChange(e.target.value as InterfacePurpose)} + value={field.value} > - - {interfaceTypes.map((interfaceType) => ( - onChange(interfaceType.purpose)} - renderIcon={() => ( - - )} - renderVariant={() => ( + {interfaceTypes.map((interfaceType) => ( + } + disabled={disabled} + key={interfaceType.purpose} + label={ + + ({ font: theme.font.bold })}> + {interfaceType.label} + - )} - subheadings={[]} - sxCardBaseIcon={{ svg: { fontSize: '20px' } }} - /> - ))} - + + } + sx={{ alignItems: 'flex-start' }} + value={disabled ? false : interfaceType.purpose} + /> + ))} ); From a3e4c4b230603e6e9140024c5703b6b75b5837c0 Mon Sep 17 00:00:00 2001 From: Ganesh Revanakar Date: Tue, 23 Dec 2025 17:36:12 +0530 Subject: [PATCH 2/8] Added changeset: UX/UI changes in Linode Create flow - Networking --- .../manager/.changeset/pr-13223-changed-1766491572015.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 packages/manager/.changeset/pr-13223-changed-1766491572015.md diff --git a/packages/manager/.changeset/pr-13223-changed-1766491572015.md b/packages/manager/.changeset/pr-13223-changed-1766491572015.md new file mode 100644 index 00000000000..3b5fb24d878 --- /dev/null +++ b/packages/manager/.changeset/pr-13223-changed-1766491572015.md @@ -0,0 +1,5 @@ +--- +"@linode/manager": Changed +--- + +UX/UI changes in Linode Create flow - Networking ([#13223](https://github.com/linode/manager/pull/13223)) From 1cdab3ab61a9bfc8954c806780bc9e77b4967cb2 Mon Sep 17 00:00:00 2001 From: Ganesh Revanakar Date: Tue, 23 Dec 2025 18:09:34 +0530 Subject: [PATCH 3/8] Fix unit test --- .../LinodeCreate/Networking/InterfaceGeneration.test.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/manager/src/features/Linodes/LinodeCreate/Networking/InterfaceGeneration.test.tsx b/packages/manager/src/features/Linodes/LinodeCreate/Networking/InterfaceGeneration.test.tsx index 53ba9c1c1b0..ae7dbecf155 100644 --- a/packages/manager/src/features/Linodes/LinodeCreate/Networking/InterfaceGeneration.test.tsx +++ b/packages/manager/src/features/Linodes/LinodeCreate/Networking/InterfaceGeneration.test.tsx @@ -33,7 +33,7 @@ describe('InterfaceGeneration', () => { await userEvent.hover(getByText('Network Interface Type')); await findByText( - 'You account administrator has enforced that all new Linodes are created with Linode interfaces.' + 'Your account administrator has enforced that all new Linodes are created with Linode interfaces.' ); for (const radio of getAllByRole('radio')) { @@ -66,7 +66,7 @@ describe('InterfaceGeneration', () => { await userEvent.hover(getByText('Network Interface Type')); await findByText( - 'You account administrator has enforced that all new Linodes are created with legacy configuration interfaces.' + 'Your account administrator has enforced that all new Linodes are created with legacy configuration interfaces.' ); const radios = getAllByRole('radio'); From 9a01cab492f89302b0da384c399b449039655133 Mon Sep 17 00:00:00 2001 From: Ganesh Revanakar Date: Mon, 29 Dec 2025 11:35:02 +0530 Subject: [PATCH 4/8] Fix cypress test cases --- .../linodes/create-linode-with-vlan.spec.ts | 45 +++++++++++++------ .../linodes/create-linode-with-vpc.spec.ts | 14 +++--- .../support/constants/linode-interfaces.ts | 4 +- .../support/ui/pages/linode-create-page.ts | 12 +++-- .../manager/cypress/support/util/linodes.ts | 13 +----- .../Networking/InterfaceGeneration.tsx | 2 + .../LinodeCreate/Networking/InterfaceType.tsx | 1 + 7 files changed, 49 insertions(+), 42 deletions(-) diff --git a/packages/manager/cypress/e2e/core/linodes/create-linode-with-vlan.spec.ts b/packages/manager/cypress/e2e/core/linodes/create-linode-with-vlan.spec.ts index fd96e194f24..1b4a1c62f3e 100644 --- a/packages/manager/cypress/e2e/core/linodes/create-linode-with-vlan.spec.ts +++ b/packages/manager/cypress/e2e/core/linodes/create-linode-with-vlan.spec.ts @@ -319,9 +319,14 @@ describe('Create Linode with VLANs (Linode Interfaces)', () => { // Confirm the Linode Interfaces section is shown. assertNewLinodeInterfacesIsAvailable(); - // Open VLAN accordion and select existing VLAN. - cy.get('[data-qa-select-card-heading="VLAN"]').should('be.visible').click(); - cy.findByLabelText('VLAN').should('be.enabled').type(mockVlan.label); + // select existing VLAN. + linodeCreatePage.selectInterface('vlan'); + // Confirm that mocked VLAN is shown in the Autocomplete, and then select it. + cy.get('[data-qa-autocomplete="VLAN"]').within(() => { + cy.findByLabelText('VLAN').should('be.visible'); + cy.get('[data-testid="textfield-input"]').click(); + cy.focused().type(`${mockVlan.label}`); + }); ui.autocompletePopper .findByTitle(mockVlan.label) .should('be.visible') @@ -399,10 +404,14 @@ describe('Create Linode with VLANs (Linode Interfaces)', () => { linodeCreatePage.selectLinodeInterfacesType(); // Select VLAN card - linodeCreatePage.selectInterfaceCard('VLAN'); + linodeCreatePage.selectInterface('vlan'); - // Open VLAN accordion and select existing VLAN. - cy.findByLabelText('VLAN').should('be.enabled').type(mockVlan.label); + // select existing VLAN. + cy.get('[data-qa-autocomplete="VLAN"]').within(() => { + cy.findByLabelText('VLAN').should('be.visible'); + cy.get('[data-testid="textfield-input"]').click(); + cy.focused().type(`${mockVlan.label}`); + }); ui.autocompletePopper .findByTitle(mockVlan.label) .should('be.visible') @@ -477,10 +486,14 @@ describe('Create Linode with VLANs (Linode Interfaces)', () => { assertNewLinodeInterfacesIsAvailable(); // Select VLAN card - linodeCreatePage.selectInterfaceCard('VLAN'); + linodeCreatePage.selectInterface('vlan'); - // Open VLAN accordion and specify new VLAN. - cy.findByLabelText('VLAN').should('be.enabled').type(mockVlan.label); + // select new VLAN. + cy.get('[data-qa-autocomplete="VLAN"]').within(() => { + cy.findByLabelText('VLAN').should('be.visible'); + cy.get('[data-testid="textfield-input"]').click(); + cy.focused().type(`${mockVlan.label}`); + }); ui.autocompletePopper .findByTitle(`Create "${mockVlan.label}"`) .should('be.visible') @@ -558,10 +571,14 @@ describe('Create Linode with VLANs (Linode Interfaces)', () => { linodeCreatePage.selectLinodeInterfacesType(); // Select VLAN card - linodeCreatePage.selectInterfaceCard('VLAN'); + linodeCreatePage.selectInterface('vlan'); - // Open VLAN accordion and specify new VLAN. - cy.findByLabelText('VLAN').should('be.enabled').type(mockVlan.label); + // select new VLAN. + cy.get('[data-qa-autocomplete="VLAN"]').within(() => { + cy.findByLabelText('VLAN').should('be.visible'); + cy.get('[data-testid="textfield-input"]').click(); + cy.focused().type(`${mockVlan.label}`); + }); ui.autocompletePopper .findByTitle(`Create "${mockVlan.label}"`) .should('be.visible') @@ -620,9 +637,9 @@ describe('Create Linode with VLANs (Linode Interfaces)', () => { assertNewLinodeInterfacesIsAvailable(); // Select VLAN card - linodeCreatePage.selectInterfaceCard('VLAN'); + linodeCreatePage.selectInterface('vlan'); - // Expand VLAN accordion, confirm VLAN availability notice is displayed and + // confirm VLAN availability notice is displayed and // that VLAN fields are disabled while no region is selected. cy.findByText('VLAN is not available in the selected region.', { exact: false, diff --git a/packages/manager/cypress/e2e/core/linodes/create-linode-with-vpc.spec.ts b/packages/manager/cypress/e2e/core/linodes/create-linode-with-vpc.spec.ts index ae8f63ed9b4..ea1688c42d8 100644 --- a/packages/manager/cypress/e2e/core/linodes/create-linode-with-vpc.spec.ts +++ b/packages/manager/cypress/e2e/core/linodes/create-linode-with-vpc.spec.ts @@ -476,8 +476,8 @@ describe('Create Linode with VPCs (Linode Interfaces)', () => { // Confirm the Linode Interfaces section is shown. assertNewLinodeInterfacesIsAvailable(); - // Select VPC card - linodeCreatePage.selectInterfaceCard('VPC'); + // Select VPC + linodeCreatePage.selectInterface('vpc'); // Confirm that mocked VPC is shown in the Autocomplete, and then select it. cy.get('[data-qa-autocomplete="VPC"]').within(() => { @@ -615,8 +615,8 @@ describe('Create Linode with VPCs (Linode Interfaces)', () => { // Switch to Linode Interfaces linodeCreatePage.selectLinodeInterfacesType(); - // Select VPC card - linodeCreatePage.selectInterfaceCard('VPC'); + // Select VPC option + linodeCreatePage.selectInterface('vpc'); // Confirm that mocked VPC is shown in the Autocomplete, and then select it. cy.get('[data-qa-autocomplete="VPC"]').within(() => { @@ -751,7 +751,7 @@ describe('Create Linode with VPCs (Linode Interfaces)', () => { assertNewLinodeInterfacesIsAvailable(); // Select VPC card - linodeCreatePage.selectInterfaceCard('VPC'); + linodeCreatePage.selectInterface('vpc'); cy.findByText('Create VPC').should('be.visible').click(); @@ -937,7 +937,7 @@ describe('Create Linode with VPCs (Linode Interfaces)', () => { linodeCreatePage.selectLinodeInterfacesType(); // Select VPC card - linodeCreatePage.selectInterfaceCard('VPC'); + linodeCreatePage.selectInterface('vpc'); cy.findByText('Create VPC').should('be.visible').click(); @@ -1068,7 +1068,7 @@ describe('Create Linode with VPCs (Linode Interfaces)', () => { assertNewLinodeInterfacesIsAvailable(); // Select VPC card. - linodeCreatePage.selectInterfaceCard('VPC'); + linodeCreatePage.selectInterface('vpc'); // Confirm that VPC selection is disabled. cy.get('[data-qa-autocomplete="VPC"]').within(() => { diff --git a/packages/manager/cypress/support/constants/linode-interfaces.ts b/packages/manager/cypress/support/constants/linode-interfaces.ts index b734307f030..d78f38c6ed9 100644 --- a/packages/manager/cypress/support/constants/linode-interfaces.ts +++ b/packages/manager/cypress/support/constants/linode-interfaces.ts @@ -44,7 +44,7 @@ export const linodeInterfacesLabelText = 'Linode Interfaces'; export const betaLabelText = 'beta'; export const linodeInterfacesDescriptionText1 = - 'Linode Interfaces are the preferred option for VPCs and are managed directly through a Linode’s Network settings.'; + "Managed directly through a Linode's Network settings. This is the recommended option."; export const linodeInterfacesDescriptionText2 = 'Cloud Firewalls are assigned to individual VPC and public interfaces.'; @@ -53,7 +53,7 @@ export const legacyInterfacesLabelText = 'Configuration Profile Interfaces (Legacy)'; export const legacyInterfacesDescriptionText1 = - 'Interfaces in the Configuration Profile are part of a Linode’s configuration.'; + 'Interfaces are part of the Linode’s Configuration Profile.'; export const legacyInterfacesDescriptionText2 = 'Cloud Firewalls are applied at the Linode level and automatically cover all non-VLAN interfaces in the Configuration Profile.'; diff --git a/packages/manager/cypress/support/ui/pages/linode-create-page.ts b/packages/manager/cypress/support/ui/pages/linode-create-page.ts index 2d4f986e197..c272642c6e4 100644 --- a/packages/manager/cypress/support/ui/pages/linode-create-page.ts +++ b/packages/manager/cypress/support/ui/pages/linode-create-page.ts @@ -130,7 +130,7 @@ export const linodeCreatePage = { * Select the Linode Interfaces Type. */ selectLinodeInterfacesType: () => { - cy.findByText('Linode Interfaces').click(); + cy.get('[data-qa-interfaces-option="linode"]').click(); }, /** @@ -141,13 +141,11 @@ export const linodeCreatePage = { }, /** - * Select the interfaces' card. + * Select the interfaces' type. * - * @param title - Interfaces' card title to select. + * @param type - Interfaces' type title to select. */ - selectInterfaceCard: (title: string) => { - cy.get(`[data-qa-select-card-heading="${title}"]`) - .should('be.visible') - .click(); + selectInterface: (type: 'public' | 'vlan' | 'vpc') => { + cy.get(`[data-qa-interface-type-option="${type}"]`).click(); }, }; diff --git a/packages/manager/cypress/support/util/linodes.ts b/packages/manager/cypress/support/util/linodes.ts index 98ee8d6af74..ba990a3c94d 100644 --- a/packages/manager/cypress/support/util/linodes.ts +++ b/packages/manager/cypress/support/util/linodes.ts @@ -5,13 +5,7 @@ import { findOrCreateDependencyVlan } from 'support/api/vlans'; import { pageSize } from 'support/constants/api'; import { dryRunButtonText, - legacyInterfacesDescriptionText1, - legacyInterfacesDescriptionText2, legacyInterfacesLabelText, - linodeInterfacesDescriptionText1, - linodeInterfacesDescriptionText2, - linodeInterfacesLabelText, - networkConnectionDescriptionText, networkConnectionSectionText, networkInterfaceTypeSectionText, promptDialogDescription1, @@ -330,14 +324,9 @@ export const assertNewLinodeInterfacesIsAvailable = ( ): void => { const expectedBehavior = linodeInterfacesEnabled ? 'be.visible' : 'not.exist'; cy.findByText(networkInterfaceTypeSectionText).should(expectedBehavior); - cy.findByText(linodeInterfacesLabelText).should(expectedBehavior); - cy.findByText(linodeInterfacesDescriptionText1).should(expectedBehavior); - cy.findByText(linodeInterfacesDescriptionText2).should(expectedBehavior); + cy.get('[data-qa-interfaces-option="linode"]').should(expectedBehavior); cy.findByText(legacyInterfacesLabelText).should(expectedBehavior); - cy.findByText(legacyInterfacesDescriptionText1).should(expectedBehavior); - cy.findByText(legacyInterfacesDescriptionText2).should(expectedBehavior); cy.findByText(networkConnectionSectionText).should(expectedBehavior); - cy.findByText(networkConnectionDescriptionText).should(expectedBehavior); }; /** diff --git a/packages/manager/src/features/Linodes/LinodeCreate/Networking/InterfaceGeneration.tsx b/packages/manager/src/features/Linodes/LinodeCreate/Networking/InterfaceGeneration.tsx index bb2dadcd50a..1b95fcf3283 100644 --- a/packages/manager/src/features/Linodes/LinodeCreate/Networking/InterfaceGeneration.tsx +++ b/packages/manager/src/features/Linodes/LinodeCreate/Networking/InterfaceGeneration.tsx @@ -66,6 +66,7 @@ export const InterfaceGeneration = () => { > } + data-qa-interfaces-option="linode" label={ @@ -95,6 +96,7 @@ export const InterfaceGeneration = () => { /> } + data-qa-interfaces-option="legacy_config" label={ ({ font: theme.font.bold })}> diff --git a/packages/manager/src/features/Linodes/LinodeCreate/Networking/InterfaceType.tsx b/packages/manager/src/features/Linodes/LinodeCreate/Networking/InterfaceType.tsx index 0e8df2a5f20..2eac6c4c679 100644 --- a/packages/manager/src/features/Linodes/LinodeCreate/Networking/InterfaceType.tsx +++ b/packages/manager/src/features/Linodes/LinodeCreate/Networking/InterfaceType.tsx @@ -130,6 +130,7 @@ export const InterfaceType = ({ index }: Props) => { {interfaceTypes.map((interfaceType) => ( } + data-qa-interface-type-option={interfaceType.purpose} disabled={disabled} key={interfaceType.purpose} label={ From b0adaeb6eaa5b89fa1b6b4ab5529a12e4f44724f Mon Sep 17 00:00:00 2001 From: Ganesh Revanakar Date: Fri, 2 Jan 2026 19:14:55 +0530 Subject: [PATCH 5/8] Addressed review comments --- .../features/Linodes/LinodeCreate/Networking/InterfaceType.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/manager/src/features/Linodes/LinodeCreate/Networking/InterfaceType.tsx b/packages/manager/src/features/Linodes/LinodeCreate/Networking/InterfaceType.tsx index 2eac6c4c679..fbf5da03b00 100644 --- a/packages/manager/src/features/Linodes/LinodeCreate/Networking/InterfaceType.tsx +++ b/packages/manager/src/features/Linodes/LinodeCreate/Networking/InterfaceType.tsx @@ -9,6 +9,7 @@ import { } from '@linode/ui'; import { FormControlLabel, Stack } from '@mui/material'; import { useSnackbar } from 'notistack'; +import type { ChangeEvent } from 'react'; import React from 'react'; import { useController, useFormContext, useWatch } from 'react-hook-form'; @@ -124,7 +125,7 @@ export const InterfaceType = ({ index }: Props) => { onChange(e.target.value as InterfacePurpose)} + onChange={(_: ChangeEvent, value: InterfacePurpose) => onChange(value)} value={field.value} > {interfaceTypes.map((interfaceType) => ( From e8bfa7e1a531c43e828a8de94f8855e70f43c79e Mon Sep 17 00:00:00 2001 From: Ganesh Revanakar Date: Mon, 5 Jan 2026 19:56:47 +0530 Subject: [PATCH 6/8] Adjust spacing within networking section in create linode flow --- .../Linodes/LinodeCreate/Networking/InterfaceGeneration.tsx | 5 ++++- .../src/features/Linodes/LinodeCreate/Networking/VPC.tsx | 1 + 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/packages/manager/src/features/Linodes/LinodeCreate/Networking/InterfaceGeneration.tsx b/packages/manager/src/features/Linodes/LinodeCreate/Networking/InterfaceGeneration.tsx index 1b95fcf3283..bd4cf8cf802 100644 --- a/packages/manager/src/features/Linodes/LinodeCreate/Networking/InterfaceGeneration.tsx +++ b/packages/manager/src/features/Linodes/LinodeCreate/Networking/InterfaceGeneration.tsx @@ -57,7 +57,10 @@ export const InterfaceGeneration = () => { defaultExpanded={!disabled} name="Network Interface Type" > - + { + ({ marginTop: theme.spacingFunction(16) })} /> {showIPv6Fields && ( Date: Tue, 6 Jan 2026 17:04:06 +0530 Subject: [PATCH 7/8] Adjust spacing within networking section in create linode flow --- .../src/features/Linodes/LinodeCreate/Networking/VLAN.tsx | 2 +- .../src/features/Linodes/LinodeCreate/Networking/VPC.tsx | 3 +-- 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/packages/manager/src/features/Linodes/LinodeCreate/Networking/VLAN.tsx b/packages/manager/src/features/Linodes/LinodeCreate/Networking/VLAN.tsx index d64ceaf6110..54810126cf4 100644 --- a/packages/manager/src/features/Linodes/LinodeCreate/Networking/VLAN.tsx +++ b/packages/manager/src/features/Linodes/LinodeCreate/Networking/VLAN.tsx @@ -27,7 +27,7 @@ export const VLAN = ({ index }: Props) => { selectedRegion?.capabilities.includes('Vlans') ?? false; return ( - + {selectedRegion && !regionSupportsVLANs && } { Boolean(selectedSubnet?.ipv6?.length && selectedSubnet?.ipv6?.length > 0); return ( - + {selectedRegion && !regionSupportsVPCs && } { - ({ marginTop: theme.spacingFunction(16) })} /> {showIPv6Fields && ( Date: Wed, 7 Jan 2026 13:54:38 +0530 Subject: [PATCH 8/8] Add spacing for fields within VPC panel --- .../Linodes/LinodeCreate/Networking/VPC.tsx | 36 ++++++++++--------- 1 file changed, 19 insertions(+), 17 deletions(-) diff --git a/packages/manager/src/features/Linodes/LinodeCreate/Networking/VPC.tsx b/packages/manager/src/features/Linodes/LinodeCreate/Networking/VPC.tsx index 626fea450be..49a9cbcfaa0 100644 --- a/packages/manager/src/features/Linodes/LinodeCreate/Networking/VPC.tsx +++ b/packages/manager/src/features/Linodes/LinodeCreate/Networking/VPC.tsx @@ -164,23 +164,25 @@ export const VPC = ({ index }: Props) => { )} /> {showIPv6Fields && ( - ( - - )} - /> + + ( + + )} + /> + )}