Skip to content

Commit 01b83de

Browse files
hqhhuanghqhhuang
authored
Other declaration pills should be clickable when there are changes data (#832) rdar://127125451
Other declaration pills should be clickable when there are changes data (#832) rdar://127125451
1 parent 5248ab0 commit 01b83de

File tree

8 files changed

+399
-212
lines changed

8 files changed

+399
-212
lines changed

‎src/components/DocumentationTopic/PrimaryContent/Declaration.vue

-1
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,6 @@
2020
<template v-else>
2121
<DeclarationList
2222
v-for="(declaration, i) in declarations"
23-
:class="changeClasses"
2423
:key="i"
2524
:declaration="declaration"
2625
:shouldCaption="hasPlatformVariants"

‎src/components/DocumentationTopic/PrimaryContent/DeclarationDiff.vue

-10
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,6 @@
1717
:key="i"
1818
:declaration="declaration"
1919
:should-caption="currentDeclarations.length > 1"
20-
:changeType="changeType"
2120
/>
2221
</div>
2322
<div class="declaration-diff-previous">
@@ -27,7 +26,6 @@
2726
:key="i"
2827
:declaration="declaration"
2928
:should-caption="previousDeclarations.length > 1"
30-
:changeType="changeType"
3129
/>
3230
</div>
3331
</div>
@@ -50,14 +48,6 @@ export default {
5048
type: Object,
5149
required: true,
5250
},
53-
/**
54-
* The applied change type to the diff.
55-
* @type {"added"|"deprecated"|"modified"}
56-
*/
57-
changeType: {
58-
type: String,
59-
required: true,
60-
},
6151
},
6252
computed: {
6353
previousDeclarations: ({ changes }) => changes.declaration.previous || [],

‎src/components/DocumentationTopic/PrimaryContent/DeclarationGroup.vue

+164
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,164 @@
1+
<!--
2+
This source file is part of the Swift.org open source project
3+
4+
Copyright (c) 2024 Apple Inc. and the Swift project authors
5+
Licensed under Apache License v2.0 with Runtime Library Exception
6+
7+
See https://swift.org/LICENSE.txt for license information
8+
See https://swift.org/CONTRIBUTORS.txt for Swift project authors
9+
-->
10+
11+
<template>
12+
<div
13+
class="declaration-group"
14+
:class="classes"
15+
ref="apiChangesDiff"
16+
>
17+
<p v-if="shouldCaption" class="platforms">
18+
<strong>{{ caption }}</strong>
19+
</p>
20+
<Source
21+
:tokens="declaration.tokens"
22+
:language="interfaceLanguage"
23+
/>
24+
</div>
25+
</template>
26+
27+
<script>
28+
import DeclarationSource from 'docc-render/components/DocumentationTopic/PrimaryContent/DeclarationSource.vue';
29+
import Language from 'docc-render/constants/Language';
30+
import { APIChangesMultipleLines } from 'docc-render/mixins/apiChangesHelpers';
31+
32+
/**
33+
* Renders a code source with an optional caption.
34+
*/
35+
export default {
36+
name: 'DeclarationGroup',
37+
components: {
38+
Source: DeclarationSource,
39+
},
40+
mixins: [APIChangesMultipleLines],
41+
inject: {
42+
languages: {
43+
default: () => new Set(),
44+
},
45+
interfaceLanguage: {
46+
default: () => Language.swift.key.api,
47+
},
48+
symbolKind: {
49+
default: () => undefined,
50+
},
51+
},
52+
props: {
53+
declaration: {
54+
type: Object,
55+
required: true,
56+
},
57+
/**
58+
* Whether to show the caption or not.
59+
* Usually if there is more than Declaration group.
60+
*/
61+
shouldCaption: {
62+
type: Boolean,
63+
default: false,
64+
},
65+
/**
66+
* The type of code change.
67+
* @type {"added"|"deprecated"|"modified"}
68+
*/
69+
changeType: {
70+
type: String,
71+
required: false,
72+
},
73+
},
74+
computed: {
75+
classes: ({
76+
changeType,
77+
multipleLinesClass,
78+
displaysMultipleLinesAfterAPIChanges,
79+
}) => ({
80+
[`declaration-group--changed declaration-group--${changeType}`]: changeType,
81+
[multipleLinesClass]: displaysMultipleLinesAfterAPIChanges,
82+
}),
83+
caption() {
84+
return this.declaration.platforms.join(', ');
85+
},
86+
},
87+
};
88+
</script>
89+
90+
<style scoped lang="scss">
91+
@import 'docc-render/styles/_core.scss';
92+
93+
.platforms {
94+
@include font-styles(body-reduced);
95+
96+
margin-bottom: 0.45rem;
97+
margin-top: var(--spacing-stacked-margin-xlarge);
98+
99+
.changed & {
100+
padding-left: $code-source-spacing;
101+
}
102+
103+
&:first-of-type {
104+
margin-top: 1rem;
105+
}
106+
}
107+
108+
.source {
109+
transition: margin 0.3s linear;
110+
111+
.platforms + & {
112+
margin: 0;
113+
}
114+
}
115+
116+
// don't highlight tokens in initial declaration until the user has explicitly
117+
// expanded a list of overloaded declarations — this rule could be simplified
118+
// in the future if the HTML is restructured to have an expanded state class for
119+
// the whole list instead of having it on each declaration
120+
.declaration-pill:not(.declaration-pill--expanded) {
121+
.source:deep(.highlighted) {
122+
background: unset;
123+
font-weight: normal;
124+
}
125+
}
126+
127+
// only applicable for when other declaration list is expanded
128+
.declaration-pill--expanded {
129+
$docs-declaration-source-border-width: 1px;
130+
131+
.source {
132+
border-width: $docs-declaration-source-border-width;
133+
134+
// ensure links are not clickable, when expanded
135+
:deep(a) {
136+
pointer-events: none;
137+
}
138+
}
139+
140+
&.selected-declaration {
141+
.source {
142+
border-color: var(--color-focus-border-color, var(--color-focus-border-color));
143+
}
144+
}
145+
146+
&:not(.selected-declaration) {
147+
.source {
148+
background: none;
149+
}
150+
}
151+
}
152+
153+
@include changedStyles {
154+
.source {
155+
// background should also be applied over changed icon over whole pill
156+
background: none;
157+
border: none;
158+
margin-top: 0;
159+
margin-bottom: 0;
160+
margin-left: $change-icon-occupied-space;
161+
padding-left: 0;
162+
}
163+
}
164+
</style>

0 commit comments

Comments
 (0)