Skip to content

Commit afafbbe

Browse files
PavelLaptevPavelLaptev
authored
Refactor SectionCard (#11410)
* new Section component in order to implify old SectionCard component usage * replace old sectioncard component * refactor(ui): replace Section/Section.Card with CardGroup/CardGroup * fix(login): remove unused local user binding to avoid lint errors * feat(ui): mark disable-codegen CardGroup.Item as standalone
1 parent d8c5a84 commit afafbbe

Some content is hidden

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

47 files changed

+1577
-1627
lines changed

‎apps/desktop/src/components/AnalyticsSettings.svelte‎

Lines changed: 9 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<script lang="ts">
22
import { APP_SETTINGS } from '$lib/config/appSettings';
33
import { inject } from '@gitbutler/core/context';
4-
import { SectionCard, Toggle, Link, TestId } from '@gitbutler/ui';
4+
import { CardGroup, Link, TestId, Toggle } from '@gitbutler/ui';
55
66
const appSettings = inject(APP_SETTINGS);
77
const errorReportingEnabled = appSettings.appErrorReportingEnabled;
@@ -26,8 +26,8 @@
2626
</p>
2727
</div>
2828

29-
<div class="analytics-settings__actions" data-testid={TestId.OnboardingPageAnalyticsSettings}>
30-
<SectionCard labelFor="errorReportingToggle" orientation="row">
29+
<CardGroup testId={TestId.OnboardingPageAnalyticsSettings}>
30+
<CardGroup.Item labelFor="errorReportingToggle">
3131
{#snippet title()}
3232
Error reporting
3333
{/snippet}
@@ -42,9 +42,9 @@
4242
onclick={() => ($errorReportingEnabled = !$errorReportingEnabled)}
4343
/>
4444
{/snippet}
45-
</SectionCard>
45+
</CardGroup.Item>
4646

47-
<SectionCard labelFor="metricsEnabledToggle" orientation="row">
47+
<CardGroup.Item labelFor="metricsEnabledToggle">
4848
{#snippet title()}
4949
Usage metrics
5050
{/snippet}
@@ -59,9 +59,9 @@
5959
onclick={() => ($metricsEnabled = !$metricsEnabled)}
6060
/>
6161
{/snippet}
62-
</SectionCard>
62+
</CardGroup.Item>
6363

64-
<SectionCard labelFor="nonAnonMetricsEnabledToggle" orientation="row">
64+
<CardGroup.Item labelFor="nonAnonMetricsEnabledToggle">
6565
{#snippet title()}
6666
Non-anonymous usage metrics
6767
{/snippet}
@@ -76,8 +76,8 @@
7676
onclick={() => ($nonAnonMetricsEnabled = !$nonAnonMetricsEnabled)}
7777
/>
7878
{/snippet}
79-
</SectionCard>
80-
</div>
79+
</CardGroup.Item>
80+
</CardGroup>
8181

8282
<style lang="postcss">
8383
.analytics-settings__content {
@@ -90,10 +90,4 @@
9090
margin-bottom: 10px;
9191
color: var(--clr-text-2);
9292
}
93-
94-
.analytics-settings__actions {
95-
display: flex;
96-
flex-direction: column;
97-
gap: 8px;
98-
}
9993
</style>

‎apps/desktop/src/components/AuthorizationBanner.svelte‎

Lines changed: 17 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<script lang="ts">
22
import LoginButtons from '$components/LoginButtons.svelte';
3-
import { Icon, SectionCard } from '@gitbutler/ui';
3+
import { CardGroup, Icon } from '@gitbutler/ui';
44
55
interface Props {
66
title?: string;
@@ -13,17 +13,19 @@
1313
}: Props = $props();
1414
</script>
1515

16-
<SectionCard orientation="row">
17-
{#snippet iconSide()}
18-
<Icon name="warning" color="warning" />
19-
{/snippet}
20-
{#snippet title()}
21-
{titleLabel}
22-
{/snippet}
23-
{#snippet caption()}
24-
{message}
25-
{/snippet}
26-
{#snippet actions()}
27-
<LoginButtons />
28-
{/snippet}
29-
</SectionCard>
16+
<CardGroup>
17+
<CardGroup.Item>
18+
{#snippet iconSide()}
19+
<Icon name="warning" color="warning" />
20+
{/snippet}
21+
{#snippet title()}
22+
{titleLabel}
23+
{/snippet}
24+
{#snippet caption()}
25+
{message}
26+
{/snippet}
27+
{#snippet actions()}
28+
<LoginButtons />
29+
{/snippet}
30+
</CardGroup.Item>
31+
</CardGroup>

‎apps/desktop/src/components/BaseBranchSwitch.svelte‎

Lines changed: 59 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
import { BASE_BRANCH_SERVICE } from '$lib/baseBranch/baseBranchService.svelte';
33
import { STACK_SERVICE } from '$lib/stacks/stackService.svelte';
44
import { inject } from '@gitbutler/core/context';
5-
import { Button, InfoMessage, SectionCard, Select, SelectItem } from '@gitbutler/ui';
5+
import { Button, CardGroup, InfoMessage, Select, SelectItem } from '@gitbutler/ui';
66
77
const { projectId }: { projectId: string } = $props();
88
@@ -50,74 +50,78 @@
5050
{:else if remoteBranchesQuery.result.isSuccess}
5151
{@const remoteBranches = remoteBranchesQuery.response}
5252
{#if remoteBranches && remoteBranches.length > 0}
53-
<SectionCard>
54-
{#snippet title()}
55-
Remote configuration
56-
{/snippet}
57-
{#snippet caption()}
58-
Lets you choose where to push code and set the target branch for contributions. The target
59-
branch is usually the "production" branch like 'origin/master' or 'upstream/main.' This
60-
section helps ensure your code goes to the correct remote and branch for integration.
61-
{/snippet}
62-
63-
<Select
64-
value={selectedBranch}
65-
options={remoteBranches.map((b) => ({ label: b.name, value: b.name }))}
66-
wide
67-
onselect={(value) => {
68-
selectedBranch = value;
69-
}}
70-
disabled={targetChangeDisabled}
71-
label="Current target branch"
72-
searchable
73-
>
74-
{#snippet itemSnippet({ item, highlighted })}
75-
<SelectItem selected={item.value === selectedBranch} {highlighted}>
76-
{item.label}
77-
</SelectItem>
53+
<CardGroup>
54+
<CardGroup.Item>
55+
{#snippet title()}
56+
Remote configuration
57+
{/snippet}
58+
{#snippet caption()}
59+
Lets you choose where to push code and set the target branch for contributions. The target
60+
branch is usually the "production" branch like 'origin/master' or 'upstream/main.' This
61+
section helps ensure your code goes to the correct remote and branch for integration.
7862
{/snippet}
79-
</Select>
8063

81-
{#if uniqueRemotes(remoteBranches).length > 1}
8264
<Select
83-
value={selectedRemote}
84-
options={uniqueRemotes(remoteBranches).map((r) => ({ label: r.name!, value: r.name! }))}
65+
value={selectedBranch}
66+
options={remoteBranches.map((b) => ({ label: b.name, value: b.name }))}
8567
wide
8668
onselect={(value) => {
87-
selectedRemote = value;
69+
selectedBranch = value;
8870
}}
8971
disabled={targetChangeDisabled}
90-
label="Create branches on remote"
72+
label="Current target branch"
73+
searchable
9174
>
9275
{#snippet itemSnippet({ item, highlighted })}
93-
<SelectItem selected={item.value === selectedRemote} {highlighted}>
76+
<SelectItem selected={item.value === selectedBranch} {highlighted}>
9477
{item.label}
9578
</SelectItem>
9679
{/snippet}
9780
</Select>
98-
{/if}
9981

100-
{#if targetChangeDisabled}
101-
<InfoMessage filled outlined={false} icon="info">
102-
{#snippet content()}
103-
You have {stackCount === 1 ? '1 active branch' : `${stackCount} active branches`} in your
104-
workspace. Please clear the workspace before switching the base branch.
105-
{/snippet}
106-
</InfoMessage>
107-
{:else}
108-
<Button
109-
kind="outline"
110-
onclick={onSetBaseBranchClick}
111-
id="set-base-branch"
112-
loading={targetBranchSwitch.current.isLoading}
113-
disabled={(selectedBranch === baseBranch?.branchName &&
114-
selectedRemote === baseBranch?.actualPushRemoteName()) ||
115-
targetChangeDisabled}
116-
>
117-
{targetBranchSwitch.current.isLoading ? 'Switching branches...' : 'Update configuration'}
118-
</Button>
119-
{/if}
120-
</SectionCard>
82+
{#if uniqueRemotes(remoteBranches).length > 1}
83+
<Select
84+
value={selectedRemote}
85+
options={uniqueRemotes(remoteBranches).map((r) => ({ label: r.name!, value: r.name! }))}
86+
wide
87+
onselect={(value) => {
88+
selectedRemote = value;
89+
}}
90+
disabled={targetChangeDisabled}
91+
label="Create branches on remote"
92+
>
93+
{#snippet itemSnippet({ item, highlighted })}
94+
<SelectItem selected={item.value === selectedRemote} {highlighted}>
95+
{item.label}
96+
</SelectItem>
97+
{/snippet}
98+
</Select>
99+
{/if}
100+
101+
{#if targetChangeDisabled}
102+
<InfoMessage filled outlined={false} icon="info">
103+
{#snippet content()}
104+
You have {stackCount === 1 ? '1 active branch' : `${stackCount} active branches`} in your
105+
workspace. Please clear the workspace before switching the base branch.
106+
{/snippet}
107+
</InfoMessage>
108+
{:else}
109+
<Button
110+
kind="outline"
111+
onclick={onSetBaseBranchClick}
112+
id="set-base-branch"
113+
loading={targetBranchSwitch.current.isLoading}
114+
disabled={(selectedBranch === baseBranch?.branchName &&
115+
selectedRemote === baseBranch?.actualPushRemoteName()) ||
116+
targetChangeDisabled}
117+
>
118+
{targetBranchSwitch.current.isLoading
119+
? 'Switching branches...'
120+
: 'Update configuration'}
121+
</Button>
122+
{/if}
123+
</CardGroup.Item>
124+
</CardGroup>
121125
{/if}
122126
{:else if remoteBranchesQuery.result.isError}
123127
<InfoMessage filled outlined={true} style="error" icon="error">

‎apps/desktop/src/components/CherryApplyModal.svelte‎

Lines changed: 28 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
import { STACK_SERVICE } from '$lib/stacks/stackService.svelte';
88
import { combineResults } from '$lib/state/helpers';
99
import { inject } from '@gitbutler/core/context';
10-
import { Button, InfoMessage, Modal, RadioButton, SectionCard } from '@gitbutler/ui';
10+
import { Button, CardGroup, InfoMessage, Modal, RadioButton } from '@gitbutler/ui';
1111
1212
type Props = {
1313
projectId: string;
@@ -96,44 +96,39 @@
9696
<ReduxResult {projectId} result={combineResults(statusResult?.result, stacksResult.result)}>
9797
{#snippet children([_status, stacks], { projectId: _projectId })}
9898
<div class="cherry-apply-modal">
99-
<InfoMessage style={messageStyle} outlined filled>
99+
<InfoMessage style={messageStyle} outlined>
100100
{#snippet content()}
101101
{getStatusMessage()}
102102
{/snippet}
103103
</InfoMessage>
104104

105105
{#if canApply && stacks.length > 0}
106-
<form onchange={(e) => handleStackSelectionChange(e.currentTarget)}>
107-
{#each stacks as stack, idx (stack.id)}
108-
{@const isFirst = idx === 0}
109-
{@const isLast = idx === stacks.length - 1}
110-
{@const isDisabled = !canSelectStack && selectedStackId !== stack.id}
111-
<SectionCard
112-
orientation="row"
113-
roundedBottom={isLast}
114-
roundedTop={isFirst}
115-
labelFor="stack-{stack.id}"
116-
disabled={isDisabled}
117-
>
118-
{#snippet title()}
119-
{getStackName(stack)}
120-
{/snippet}
121-
{#snippet caption()}
122-
{stack.heads.length}
123-
{stack.heads.length === 1 ? 'branch' : 'branches'}
124-
{/snippet}
125-
{#snippet actions()}
126-
<RadioButton
127-
name="stackSelection"
128-
value={stack.id ?? undefined}
129-
id="stack-{stack.id}"
130-
checked={selectedStackId === stack.id}
131-
disabled={isDisabled}
132-
/>
133-
{/snippet}
134-
</SectionCard>
135-
{/each}
136-
</form>
106+
<CardGroup>
107+
<form onchange={(e) => handleStackSelectionChange(e.currentTarget)}>
108+
{#each stacks as stack}
109+
{@const isDisabled = !canSelectStack && selectedStackId !== stack.id}
110+
111+
<CardGroup.Item labelFor="stack-{stack.id}" disabled={isDisabled}>
112+
{#snippet title()}
113+
{getStackName(stack)}
114+
{/snippet}
115+
{#snippet caption()}
116+
{stack.heads.length}
117+
{stack.heads.length === 1 ? 'branch' : 'branches'}
118+
{/snippet}
119+
{#snippet actions()}
120+
<RadioButton
121+
name="stackSelection"
122+
value={stack.id ?? undefined}
123+
id="stack-{stack.id}"
124+
checked={selectedStackId === stack.id}
125+
disabled={isDisabled}
126+
/>
127+
{/snippet}
128+
</CardGroup.Item>
129+
{/each}
130+
</form>
131+
</CardGroup>
137132
{/if}
138133
</div>
139134
{/snippet}

‎apps/desktop/src/components/CloneForm.svelte‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<script lang="ts">
22
import { goto } from '$app/navigation';
3-
import Section from '$components/Section.svelte';
3+
import SettingsSection from '$components/SettingsSection.svelte';
44
import { OnboardingEvent, POSTHOG_WRAPPER } from '$lib/analytics/posthog';
55
import { BACKEND } from '$lib/backend';
66
import { GIT_SERVICE } from '$lib/git/gitService';
@@ -119,7 +119,7 @@
119119
</script>
120120

121121
<h1 class="clone-title text-serif-42">Clone a <i>repository</i></h1>
122-
<Section>
122+
<SettingsSection>
123123
<div class="clone__field repositoryUrl">
124124
<div class="text-13 text-semibold clone__field--label">Clone URL</div>
125125
<Textbox bind:value={repositoryUrl} />
@@ -129,7 +129,7 @@
129129
<Textbox bind:value={targetDirPath} placeholder="/Users/tipsy/Documents" />
130130
<Button kind="outline" disabled={loading} onclick={handleCloneTargetSelect}>Choose..</Button>
131131
</div>
132-
</Section>
132+
</SettingsSection>
133133

134134
<Spacer dotted margin={24} />
135135

0 commit comments

Comments
 (0)