Skip to content

Commit 0761fd1

Browse files
JadsonLucenaJadsonLucena
committed
feat (BREAKING CHANGE): user experience
1 parent 98ec1ed commit 0761fd1

File tree

3 files changed

+32
-26
lines changed

3 files changed

+32
-26
lines changed

‎assets/script/index.js‎

Lines changed: 14 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -227,8 +227,6 @@ summary.querySelector('form').onsubmit = function(e) { e.preventDefault();
227227

228228
if (e.submitter.classList.contains('finish')) {
229229

230-
significantChange.querySelector('form').significantChange.checked = false;
231-
232230
currentTarget = significantChange;
233231
significantChange.scrollIntoView({
234232
behavior: 'smooth'
@@ -277,8 +275,6 @@ body.querySelector('form').onsubmit = function(e) { e.preventDefault();
277275

278276
if (e.submitter.classList.contains('finish')) {
279277

280-
significantChange.querySelector('form').significantChange.checked = false;
281-
282278
currentTarget = significantChange;
283279
significantChange.scrollIntoView({
284280
behavior: 'smooth'
@@ -329,12 +325,12 @@ for (let text of footer.querySelectorAll('form > div > label > input[type="text"
329325
};
330326

331327
}
332-
footer.querySelector('form').onsubmit = function(e) { e.preventDefault();
333328

334-
significantChange.querySelector('form').significantChange.checked = false;
329+
footer.querySelector('form').breakingChangeDescription.oninput = e => footer.querySelector('form').breakingChangeSummary.required = Boolean(e.target.value.trim());
330+
331+
footer.querySelector('form').onsubmit = function(e) { e.preventDefault();
335332

336-
if (this.breakingChange.value.trim() != '')
337-
significantChange.querySelector('form').significantChange.checked = true;
333+
significantChange.querySelector('form').significantChange.checked = Boolean(this.breakingChangeSummary.value.trim());
338334

339335
currentTarget = significantChange;
340336
significantChange.scrollIntoView({
@@ -346,6 +342,8 @@ footer.querySelector('form').onsubmit = function(e) { e.preventDefault();
346342
};
347343
footer.querySelector('form').onreset = function() {
348344

345+
footer.querySelector('form').breakingChangeSummary.required = false;
346+
349347
currentTarget = body;
350348
body.scrollIntoView({
351349
behavior: 'smooth'
@@ -378,8 +376,11 @@ significantChange.querySelector('form').onsubmit = function(e) { e.preventDefaul
378376
if (footer.querySelector('form').onBehalfOf.value.trim())
379377
footerContent.push('on-behalf-of: '+ footer.querySelector('form').onBehalfOf.value.trim());
380378

381-
if (footer.querySelector('form').breakingChange.value.trim())
382-
footerContent.push(footer.querySelector('form').breakingChange.value.trim());
379+
if (footer.querySelector('form').breakingChangeSummary.value.trim())
380+
footerContent.push('BREAKING CHANGE: '+ footer.querySelector('form').breakingChangeSummary.value.trim());
381+
382+
if (footer.querySelector('form').breakingChangeDescription.value.trim())
383+
footerContent.push('\n'+ footer.querySelector('form').breakingChangeDescription.value.trim());
383384

384385
result.querySelector('form').header.value = `${type.querySelector('form').type.value != 'other' ? type.querySelector('form').type.value : type.querySelector('form > div > label[for="other"] > span > input[name="otherType"]').value.trim()}${scope.querySelector('form').scope.value.trim() ? ' ('+ scope.querySelector('form').scope.value.trim() +')' : ''}${this.significantChange.checked ? '!' : ''}: ${summary.querySelector('form').summary.value.trim()}`;
385386
result.querySelector('form').description.innerHTML = `${body.querySelector('form').body.value.trim() ? body.querySelector('form').body.value.trim() : ''}${body.querySelector('form').body.value.trim() && footerContent.length ? '\n\n' : ''}${footerContent.length ? footerContent.join('\n') : ''}`.replaceAll('<', '&lt;').replaceAll('>', '&gt;').replaceAll('\n', '<br>').replaceAll(' ', '&nbsp;');
@@ -394,7 +395,9 @@ significantChange.querySelector('form').onsubmit = function(e) { e.preventDefaul
394395
waitTransition(result);
395396

396397
};
397-
significantChange.querySelector('form').onreset = function() {
398+
significantChange.querySelector('form').onreset = function(e) {
399+
400+
significantChange.querySelector('form').significantChange.checked = false;
398401

399402
currentTarget = footer;
400403
footer.scrollIntoView({
@@ -438,10 +441,6 @@ result.querySelector('form').onsubmit = function(e) { e.preventDefault();
438441
};
439442
result.querySelector('form').onreset = function() {
440443

441-
let checked = significantChange.querySelector('form').significantChange.checked;
442-
443-
significantChange.querySelector('form').significantChange.checked = checked;
444-
445444
currentTarget = significantChange;
446445
significantChange.scrollIntoView({
447446
behavior: 'smooth'

‎assets/style/index.css‎

Lines changed: 13 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -75,13 +75,21 @@ main {
7575
flex-direction: column;
7676
align-items: center;
7777
}
78-
main > section > form > div > label {
78+
main > section > form > div > :is(label, fieldset) {
7979
display: block;
8080
margin: 0 5px 20px 5px;
8181
float: left;
8282
width: 800px;
8383
max-width: calc(100% - 10px);
8484
}
85+
main > section#footer > form > div > fieldset {
86+
padding: 20px;
87+
border-radius: 5px;
88+
}
89+
main > section > form > div > fieldset > legend {
90+
user-select: none;
91+
padding: 10px;
92+
}
8593
main > section > form > div > label > small {
8694
float: right;
8795
font-size: 14px;
@@ -101,7 +109,7 @@ main {
101109
font-size: 8px;
102110
font-weight: normal;
103111
}
104-
main > section > form > div > label > a.help {
112+
main > section > form > div > :is(label, fieldset) a.help {
105113
text-decoration: none;
106114
width: 16px;
107115
height: 16px;
@@ -118,15 +126,15 @@ main {
118126
justify-content: center;
119127
align-items: center;
120128
}
121-
main > section > form > div > label > a.help:hover {
129+
main > section > form > div > :is(label, fieldset) a.help:hover {
122130
background-color: #96999c80;
123131
}
124132
main > section > form > div > label > em {
125133
display: block;
126134
width: 100%;
127135
text-align: center;
128136
}
129-
main > section > form > div > label input[type="text"], main > section > form > div > label > output#header {
137+
main > section > form > div > :is(label, fieldset) input[type="text"], main > section > form > div > label > output#header {
130138
display: block;
131139
margin: 5px 0;
132140
padding: 7px 14px;
@@ -142,7 +150,7 @@ main {
142150
width: 300px;
143151
max-width: calc(100% - 50px);
144152
}
145-
main > section > form > div > label > textarea, main > section > form > div > label > output#description {
153+
main > section > form > div > :is(label, fieldset) textarea, main > section > form > div > label > output#description {
146154
display: block;
147155
margin: 5px 0;
148156
padding: 7px 14px;
@@ -168,8 +176,6 @@ main {
168176
text-align: center;
169177
}
170178
main > section#result > form > div > fieldset > legend {
171-
user-select: none;
172-
padding: 10px;
173179
font-weight: bold;
174180
}
175181
main > section#result > form > div > fieldset > code {

‎index.html‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -223,10 +223,11 @@
223223
on-behalf-of: <a href="https://docs.github.com/en/github/committing-changes-to-your-project/creating-a-commit-on-behalf-of-an-organization" class="help" target="_blank" title="Help">?</a><br>
224224
<input type="text" name="onBehalfOf" id="onBehalfOf" pattern="^@[A-Za-z0-9][+A-Za-z0-9._-]*\s<[A-Za-z0-9][+A-Za-z0-9._-]*@[^.]+(\.[^.>]+)+>$" placeholder="@org <name@organization.com>">
225225
</label>
226-
<label for="breakingChange">
227-
BREAKING CHANGE: <a href="https://github.com/angular/angular/blob/master/CONTRIBUTING.md#commit-message-footer" class="help" target="_blank" title="Help">?</a><br>
228-
<textarea name="breakingChange" id="breakingChange" minlength="20" placeholder="<breaking change summary>&#10;<BLANK LINE>&#10;<breaking change description + migration instructions>"></textarea>
229-
</label>
226+
<fieldset>
227+
<legend>BREAKING CHANGE <a href="https://github.com/angular/angular/blob/master/CONTRIBUTING.md#commit-message-footer" class="help" target="_blank" title="Help">?</a></legend>
228+
<input type="text" name="breakingChangeSummary" id="breakingChangeSummary" placeholder="Breaking change summary"><br>
229+
<textarea name="breakingChangeDescription" id="breakingChangeDescription" minlength="20" placeholder="breaking change description + migration instructions"></textarea>
230+
</fieldset>
230231

231232
</div>
232233

0 commit comments

Comments
 (0)