Improve naming of File Upload classes and regroup state styles #5705
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
govuk-design-system-ci
temporarily deployed
to
govuk-frontend-pr-5705
📋 StatsFile sizes
Modules
View stats and visualisations on the review app Action run for 8fec1e1 |
JavaScript changes to npm packagediff --git a/packages/govuk-frontend/dist/govuk/govuk-frontend.min.js b/packages/govuk-frontend/dist/govuk/govuk-frontend.min.js
index 7c4de1824..f7916b86b 100644
--- a/packages/govuk-frontend/dist/govuk/govuk-frontend.min.js
+++ b/packages/govuk-frontend/dist/govuk/govuk-frontend.min.js
@@ -765,19 +765,19 @@ class FileUpload extends ConfigurableComponent {
const i = this.findLabel();
i.setAttribute("for", `${this.id}-input`), i.id || (i.id = `${this.id}-label`), this.$input.id = `${this.id}-input`;
const s = document.createElement("button");
- s.classList.add("govuk-file-upload__button"), s.type = "button", s.id = this.id, s.classList.add("govuk-file-upload__button--empty");
+ s.classList.add("govuk-file-upload-button"), s.type = "button", s.id = this.id, s.classList.add("govuk-file-upload-button--empty");
const o = this.$input.getAttribute("aria-describedby");
o && s.setAttribute("aria-describedby", o);
const r = document.createElement("span");
- r.className = "govuk-body govuk-file-upload__status", r.innerText = this.i18n.t("noFileChosen"), s.appendChild(r);
+ r.className = "govuk-body govuk-file-upload-button__status", r.innerText = this.i18n.t("noFileChosen"), s.appendChild(r);
const a = document.createElement("span");
a.className = "govuk-visually-hidden", a.innerText = ", ", a.id = `${this.id}-comma`, s.appendChild(a);
const l = document.createElement("span");
- l.className = "govuk-file-upload__pseudo-button-container";
+ l.className = "govuk-file-upload-button__pseudo-button-container";
const c = document.createElement("span");
- c.className = "govuk-button govuk-button--secondary govuk-file-upload__pseudo-button", c.innerText = this.i18n.t("chooseFilesButton"), l.appendChild(c), l.insertAdjacentText("beforeend", " ");
+ c.className = "govuk-button govuk-button--secondary govuk-file-upload-button__pseudo-button", c.innerText = this.i18n.t("chooseFilesButton"), l.appendChild(c), l.insertAdjacentText("beforeend", " ");
const u = document.createElement("span");
- u.className = "govuk-body govuk-file-upload__instruction", u.innerText = this.i18n.t("dropInstruction"), l.appendChild(u), s.appendChild(l), s.setAttribute("aria-labelledby", `${i.id} ${a.id} ${s.id}`), s.addEventListener("click", this.onClick.bind(this)), this.$root.insertAdjacentElement("afterbegin", s), this.$input.setAttribute("tabindex", "-1"), this.$input.setAttribute("aria-hidden", "true"), this.$button = s, this.$status = r, this.$input.addEventListener("change", this.onChange.bind(this)), this.updateDisabledState(), this.observeDisabledState(), this.$announcements = document.createElement("span"), this.$announcements.classList.add("govuk-file-upload-announcements"), this.$announcements.classList.add("govuk-visually-hidden"), this.$announcements.setAttribute("aria-live", "assertive"), this.$root.insertAdjacentElement("afterend", this.$announcements), this.$input.addEventListener("drop", this.onDrop.bind(this)), document.addEventListener("dragenter", this.updateDropzoneVisibility.bind(this)), document.addEventListener("dragenter", (() => {
+ u.className = "govuk-body govuk-file-upload-button__instruction", u.innerText = this.i18n.t("dropInstruction"), l.appendChild(u), s.appendChild(l), s.setAttribute("aria-labelledby", `${i.id} ${a.id} ${s.id}`), s.addEventListener("click", this.onClick.bind(this)), this.$root.insertAdjacentElement("afterbegin", s), this.$input.setAttribute("tabindex", "-1"), this.$input.setAttribute("aria-hidden", "true"), this.$input.classList.remove("govuk-file-upload"), this.$input.classList.add("govuk-file-upload--enhanced"), this.$button = s, this.$status = r, this.$input.addEventListener("change", this.onChange.bind(this)), this.updateDisabledState(), this.observeDisabledState(), this.$announcements = document.createElement("span"), this.$announcements.classList.add("govuk-file-upload-announcements"), this.$announcements.classList.add("govuk-visually-hidden"), this.$announcements.setAttribute("aria-live", "assertive"), this.$root.insertAdjacentElement("afterend", this.$announcements), this.$input.addEventListener("drop", this.onDrop.bind(this)), document.addEventListener("dragenter", this.updateDropzoneVisibility.bind(this)), document.addEventListener("dragenter", (() => {
this.enteredAnotherElement = !0
})), document.addEventListener("dragleave", (() => {
this.enteredAnotherElement || (this.hideDraggingState(), this.$announcements.innerText = this.i18n.t("leftDropZone")), this.enteredAnotherElement = !1
@@ -788,13 +788,13 @@ class FileUpload extends ConfigurableComponent {
const e = 0 === t.types.length,
n = t.types.some((t => "Files" === t));
return e || n
- }(t.dataTransfer) && (this.$button.classList.contains("govuk-file-upload__button--dragging") || (this.showDraggingState(), this.$announcements.innerText = this.i18n.t("enteredDropZone"))) : this.$button.classList.contains("govuk-file-upload__button--dragging") && (this.hideDraggingState(), this.$announcements.innerText = this.i18n.t("leftDropZone")))
+ }(t.dataTransfer) && (this.$button.classList.contains("govuk-file-upload-button--dragging") || (this.showDraggingState(), this.$announcements.innerText = this.i18n.t("enteredDropZone"))) : this.$button.classList.contains("govuk-file-upload-button--dragging") && (this.hideDraggingState(), this.$announcements.innerText = this.i18n.t("leftDropZone")))
}
showDraggingState() {
- this.$button.classList.add("govuk-file-upload__button--dragging"), this.$input.classList.add("govuk-file-upload--dragging")
+ this.$button.classList.add("govuk-file-upload-button--dragging"), this.$input.classList.add("govuk-file-upload--dragging")
}
hideDraggingState() {
- this.$button.classList.remove("govuk-file-upload__button--dragging"), this.$input.classList.remove("govuk-file-upload--dragging")
+ this.$button.classList.remove("govuk-file-upload-button--dragging"), this.$input.classList.remove("govuk-file-upload--dragging")
}
onDrop() {
this.hideDraggingState(), this.$input.addEventListener("change", (() => {
@@ -805,9 +805,9 @@ class FileUpload extends ConfigurableComponent {
}
onChange() {
const t = this.$input.files.length;
- 0 === t ? (this.$status.innerText = this.i18n.t("noFileChosen"), this.$button.classList.add("govuk-file-upload__button--empty")) : (this.$status.innerText = 1 === t ? this.$input.files[0].name : this.i18n.t("multipleFilesChosen", {
+ 0 === t ? (this.$status.innerText = this.i18n.t("noFileChosen"), this.$button.classList.add("govuk-file-upload-button--empty")) : (this.$status.innerText = 1 === t ? this.$input.files[0].name : this.i18n.t("multipleFilesChosen", {
count: t
- }), this.$button.classList.remove("govuk-file-upload__button--empty"))
+ }), this.$button.classList.remove("govuk-file-upload-button--empty"))
}
findLabel() {
const t = document.querySelector(`label[for="${this.$input.id}"]`);
@@ -828,7 +828,7 @@ class FileUpload extends ConfigurableComponent {
})
}
updateDisabledState() {
- this.$button.disabled = this.$input.disabled, this.$button.disabled ? this.$root.classList.add("govuk-file-upload-wrapper--disabled") : this.$root.classList.remove("govuk-file-upload-wrapper--disabled")
+ this.$button.disabled = this.$input.disabled, this.$button.disabled ? this.$root.classList.add("govuk-drop-zone--disabled") : this.$root.classList.remove("govuk-drop-zone--disabled")
}
}
FileUpload.moduleName = "govuk-file-upload", FileUpload.defaults = Object.freeze({
Action run for 8fec1e1 |
Stylesheets changes to npm packagediff --git a/packages/govuk-frontend/dist/govuk/govuk-frontend.min.css b/packages/govuk-frontend/dist/govuk/govuk-frontend.min.css
index dc6bbc4e8..4f3f65acf 100644
--- a/packages/govuk-frontend/dist/govuk/govuk-frontend.min.css
+++ b/packages/govuk-frontend/dist/govuk/govuk-frontend.min.css
@@ -3389,18 +3389,18 @@ screen and (forced-colors:active) {
cursor: not-allowed
}
-.govuk-file-upload-wrapper {
+.govuk-drop-zone {
display: block;
position: relative;
z-index: 0;
background-color: #fff
}
-.govuk-file-upload-wrapper--disabled {
+.govuk-drop-zone--disabled {
cursor: not-allowed
}
-.govuk-frontend-supported .govuk-file-upload-wrapper .govuk-file-upload {
+.govuk-file-upload--enhanced {
position: absolute;
z-index: -1;
top: 0;
@@ -3412,24 +3412,24 @@ screen and (forced-colors:active) {
opacity: 0
}
-.govuk-frontend-supported .govuk-file-upload-wrapper .govuk-file-upload--dragging {
+.govuk-file-upload--dragging {
z-index: 1
}
-.govuk-file-upload__pseudo-button {
+.govuk-file-upload-button__pseudo-button {
width: auto;
margin-right: 10px;
margin-bottom: 3px;
flex-shrink: 0
}
-.govuk-file-upload__instruction {
+.govuk-file-upload-button__instruction {
margin-top: 7px;
margin-bottom: 0;
text-align: left
}
-.govuk-file-upload__status {
+.govuk-file-upload-button__status {
display: block;
margin-bottom: 10px;
padding: 15px 10px;
@@ -3437,18 +3437,13 @@ screen and (forced-colors:active) {
text-align: left
}
-.govuk-file-upload__button--empty .govuk-file-upload__status {
- color: #0c2d4a;
- background-color: #bbd4ea
-}
-
-.govuk-file-upload__pseudo-button-container {
+.govuk-file-upload-button__pseudo-button-container {
display: flex;
align-items: baseline;
flex-wrap: wrap
}
-.govuk-file-upload__button {
+.govuk-file-upload-button {
width: 100%;
padding: 18px;
border: 2px solid #b1b4b6;
@@ -3457,82 +3452,100 @@ screen and (forced-colors:active) {
}
@media (min-width:40.0625em) {
- .govuk-file-upload__button {
+ .govuk-file-upload-button {
padding: 23px
}
}
-.govuk-file-upload__button--empty {
- border-style: dashed;
+.govuk-file-upload-button .govuk-file-upload-button__pseudo-button {
background-color: #fff
}
-.govuk-file-upload__button.govuk-file-upload__button--empty:hover {
- background-color: #f3f2f1
+.govuk-file-upload-button:hover {
+ background-color: #c1c3c5
}
-.govuk-file-upload__button:disabled {
- pointer-events: none;
- opacity: .5
+.govuk-file-upload-button:hover .govuk-file-upload-button__pseudo-button {
+ background-color: #dbdad9
}
-.govuk-file-upload__button--dragging.govuk-file-upload__button,
-.govuk-file-upload__button:hover {
- background-color: #c1c3c5
+.govuk-file-upload-button:hover .govuk-file-upload-button__status {
+ background-color: #d2e2f1
}
-.govuk-file-upload__button--dragging.govuk-file-upload__button--empty {
- background-color: #f3f2f1
+.govuk-file-upload-button:active,
+.govuk-file-upload-button:focus {
+ border: 2px solid #0b0c0c;
+ outline: 3px solid #fd0;
+ outline-offset: 0;
+ background-color: #c1c3c5;
+ box-shadow: inset 0 0 0 2px
}
-.govuk-file-upload__button--dragging:not(:disabled) {
- border-color: #8e9092
+.govuk-file-upload-button:active .govuk-file-upload-button__pseudo-button,
+.govuk-file-upload-button:focus .govuk-file-upload-button__pseudo-button {
+ background-color: #fd0;
+ box-shadow: 0 2px 0 #0b0c0c
}
-.govuk-file-upload__button--dragging:not(:disabled) .govuk-file-upload__pseudo-button,
-.govuk-file-upload__button:hover .govuk-file-upload__pseudo-button {
- background-color: #dbdad9
+.govuk-file-upload-button:active:hover .govuk-file-upload-button__pseudo-button,
+.govuk-file-upload-button:focus:hover .govuk-file-upload-button__pseudo-button {
+ border-color: #fd0;
+ outline: 3px solid transparent;
+ background-color: #f3f2f1;
+ box-shadow: inset 0 0 0 1px #fd0
}
-.govuk-file-upload__button--empty.govuk-file-upload__button--dragging:not(:disabled) .govuk-file-upload__status,
-.govuk-file-upload__button--empty:focus .govuk-file-upload__status,
-.govuk-file-upload__button--empty:hover .govuk-file-upload__status {
- background-color: #d2e2f1
+.govuk-file-upload-button:disabled {
+ pointer-events: none;
+ opacity: .5
}
-.govuk-file-upload__button .govuk-file-upload__pseudo-button,
-.govuk-file-upload__button--empty.govuk-file-upload__button--dragging .govuk-file-upload__pseudo-button {
+.govuk-file-upload-button--empty {
+ border-style: dashed;
background-color: #fff
}
-.govuk-file-upload__button--empty .govuk-file-upload__pseudo-button {
+.govuk-file-upload-button--empty .govuk-file-upload-button__pseudo-button {
background-color: #f3f2f1
}
-.govuk-file-upload__button:active,
-.govuk-file-upload__button:focus {
- border: 2px solid #0b0c0c;
- outline: 3px solid #fd0;
- outline-offset: 0;
- background-color: #c1c3c5;
- box-shadow: inset 0 0 0 2px
+.govuk-file-upload-button--empty .govuk-file-upload-button__status {
+ color: #0c2d4a;
+ background-color: #bbd4ea
}
-.govuk-file-upload__button--empty:active,
-.govuk-file-upload__button--empty:focus {
+.govuk-file-upload-button--empty:active,
+.govuk-file-upload-button--empty:focus,
+.govuk-file-upload-button--empty:hover {
background-color: #f3f2f1
}
-.govuk-file-upload__button:focus .govuk-file-upload__pseudo-button {
- background-color: #fd0;
- box-shadow: 0 2px 0 #0b0c0c
+.govuk-file-upload-button--empty:active .govuk-file-upload-button__status,
+.govuk-file-upload-button--empty:focus .govuk-file-upload-button__status,
+.govuk-file-upload-button--empty:hover .govuk-file-upload-button__status {
+ background-color: #d2e2f1
}
-.govuk-file-upload__button:focus:hover .govuk-file-upload__pseudo-button {
- border-color: #fd0;
- outline: 3px solid transparent;
- background-color: #f3f2f1;
- box-shadow: inset 0 0 0 1px #fd0
+.govuk-file-upload-button--dragging.govuk-file-upload-button {
+ background-color: #c1c3c5
+}
+
+.govuk-file-upload-button--dragging.govuk-file-upload-button--empty {
+ background-color: #f3f2f1
+}
+
+.govuk-file-upload-button--dragging:not(:disabled) {
+ border-color: #8e9092
+}
+
+.govuk-file-upload-button--dragging:not(:disabled) .govuk-file-upload-button__pseudo-button {
+ background-color: #dbdad9
+}
+
+.govuk-file-upload-button--dragging.govuk-file-upload-button--empty .govuk-file-upload-button__pseudo-button,
+.govuk-file-upload-button--dragging.govuk-file-upload-button--empty:not(:disabled) .govuk-file-upload-button__status {
+ background-color: #fff
}
.govuk-footer {
Action run for 8fec1e1 |
Rendered HTML changes to npm packagediff --git a/packages/govuk-frontend/dist/govuk/components/file-upload/template-enhanced-disabled.html b/packages/govuk-frontend/dist/govuk/components/file-upload/template-enhanced-disabled.html
index 1db59dc8f..42f3cbcaf 100644
--- a/packages/govuk-frontend/dist/govuk/components/file-upload/template-enhanced-disabled.html
+++ b/packages/govuk-frontend/dist/govuk/components/file-upload/template-enhanced-disabled.html
@@ -6,7 +6,7 @@
Your photo may be in your Pictures, Photos, Downloads or Desktop folder. Or in an app like iPhoto.
</div>
<div
- class="govuk-file-upload-wrapper"
+ class="govuk-drop-zone"
data-module="govuk-file-upload">
<input class="govuk-file-upload" id="file-upload-error" name="file-upload-error" type="file" disabled aria-describedby="file-upload-error-hint">
</div>
diff --git a/packages/govuk-frontend/dist/govuk/components/file-upload/template-enhanced-with-error-message-and-hint.html b/packages/govuk-frontend/dist/govuk/components/file-upload/template-enhanced-with-error-message-and-hint.html
index fbd49ac6a..b6abfe22e 100644
--- a/packages/govuk-frontend/dist/govuk/components/file-upload/template-enhanced-with-error-message-and-hint.html
+++ b/packages/govuk-frontend/dist/govuk/components/file-upload/template-enhanced-with-error-message-and-hint.html
@@ -9,7 +9,7 @@
<span class="govuk-visually-hidden">Error:</span> Error message goes here
</p>
<div
- class="govuk-file-upload-wrapper"
+ class="govuk-drop-zone"
data-module="govuk-file-upload">
<input class="govuk-file-upload govuk-file-upload--error" id="file-upload-3" name="file-upload-3" type="file" aria-describedby="file-upload-3-hint file-upload-3-error">
</div>
diff --git a/packages/govuk-frontend/dist/govuk/components/file-upload/template-enhanced.html b/packages/govuk-frontend/dist/govuk/components/file-upload/template-enhanced.html
index 87132280f..941aae0b3 100644
--- a/packages/govuk-frontend/dist/govuk/components/file-upload/template-enhanced.html
+++ b/packages/govuk-frontend/dist/govuk/components/file-upload/template-enhanced.html
@@ -3,7 +3,7 @@
Upload a file
</label>
<div
- class="govuk-file-upload-wrapper"
+ class="govuk-drop-zone"
data-module="govuk-file-upload">
<input class="govuk-file-upload" id="file-upload-1" name="file-upload-1" type="file">
</div>
diff --git a/packages/govuk-frontend/dist/govuk/components/file-upload/template-translated.html b/packages/govuk-frontend/dist/govuk/components/file-upload/template-translated.html
index 115e42096..00a8076b1 100644
--- a/packages/govuk-frontend/dist/govuk/components/file-upload/template-translated.html
+++ b/packages/govuk-frontend/dist/govuk/components/file-upload/template-translated.html
@@ -3,7 +3,7 @@
Llwythwch ffeil i fyny
</label>
<div
- class="govuk-file-upload-wrapper"
+ class="govuk-drop-zone"
data-module="govuk-file-upload" data-i18n.choose-files-button="Dewiswch ffeil" data-i18n.no-file-chosen="Dim ffeil wedi'i dewis" data-i18n.multiple-files-chosen.other="%{count} ffeil wedi'u dewis" data-i18n.multiple-files-chosen.one="%{count} ffeil wedi'i dewis" data-i18n.drop-instruction="neu ollwng ffeil" data-i18n.entered-drop-zone="Wedi mynd i mewn i'r parth gollwng" data-i18n.left-drop-zone="Parth gollwng i'r chwith">
<input class="govuk-file-upload" id="file-upload-1" name="file-upload-1" type="file" multiple>
</div>
Action run for 8fec1e1 |
Other changes to npm packagediff --git a/packages/govuk-frontend/dist/govuk/all.bundle.js b/packages/govuk-frontend/dist/govuk/all.bundle.js
index 72b727cda..1e2bb2b28 100644
--- a/packages/govuk-frontend/dist/govuk/all.bundle.js
+++ b/packages/govuk-frontend/dist/govuk/all.bundle.js
@@ -1702,16 +1702,16 @@
}
this.$input.id = `${this.id}-input`;
const $button = document.createElement('button');
- $button.classList.add('govuk-file-upload__button');
+ $button.classList.add('govuk-file-upload-button');
$button.type = 'button';
$button.id = this.id;
- $button.classList.add('govuk-file-upload__button--empty');
+ $button.classList.add('govuk-file-upload-button--empty');
const ariaDescribedBy = this.$input.getAttribute('aria-describedby');
if (ariaDescribedBy) {
$button.setAttribute('aria-describedby', ariaDescribedBy);
}
const $status = document.createElement('span');
- $status.className = 'govuk-body govuk-file-upload__status';
+ $status.className = 'govuk-body govuk-file-upload-button__status';
$status.innerText = this.i18n.t('noFileChosen');
$button.appendChild($status);
const commaSpan = document.createElement('span');
@@ -1720,14 +1720,14 @@
commaSpan.id = `${this.id}-comma`;
$button.appendChild(commaSpan);
const containerSpan = document.createElement('span');
- containerSpan.className = 'govuk-file-upload__pseudo-button-container';
+ containerSpan.className = 'govuk-file-upload-button__pseudo-button-container';
const buttonSpan = document.createElement('span');
- buttonSpan.className = 'govuk-button govuk-button--secondary govuk-file-upload__pseudo-button';
+ buttonSpan.className = 'govuk-button govuk-button--secondary govuk-file-upload-button__pseudo-button';
buttonSpan.innerText = this.i18n.t('chooseFilesButton');
containerSpan.appendChild(buttonSpan);
containerSpan.insertAdjacentText('beforeend', ' ');
const instructionSpan = document.createElement('span');
- instructionSpan.className = 'govuk-body govuk-file-upload__instruction';
+ instructionSpan.className = 'govuk-body govuk-file-upload-button__instruction';
instructionSpan.innerText = this.i18n.t('dropInstruction');
containerSpan.appendChild(instructionSpan);
$button.appendChild(containerSpan);
@@ -1736,6 +1736,8 @@
this.$root.insertAdjacentElement('afterbegin', $button);
this.$input.setAttribute('tabindex', '-1');
this.$input.setAttribute('aria-hidden', 'true');
+ this.$input.classList.remove('govuk-file-upload');
+ this.$input.classList.add('govuk-file-upload--enhanced');
this.$button = $button;
this.$status = $status;
this.$input.addEventListener('change', this.onChange.bind(this));
@@ -1769,13 +1771,13 @@
if (event.target instanceof Node) {
if (this.$root.contains(event.target)) {
if (event.dataTransfer && isContainingFiles(event.dataTransfer)) {
- if (!this.$button.classList.contains('govuk-file-upload__button--dragging')) {
+ if (!this.$button.classList.contains('govuk-file-upload-button--dragging')) {
this.showDraggingState();
this.$announcements.innerText = this.i18n.t('enteredDropZone');
}
}
} else {
- if (this.$button.classList.contains('govuk-file-upload__button--dragging')) {
+ if (this.$button.classList.contains('govuk-file-upload-button--dragging')) {
this.hideDraggingState();
this.$announcements.innerText = this.i18n.t('leftDropZone');
}
@@ -1783,11 +1785,11 @@
}
}
showDraggingState() {
- this.$button.classList.add('govuk-file-upload__button--dragging');
+ this.$button.classList.add('govuk-file-upload-button--dragging');
this.$input.classList.add('govuk-file-upload--dragging');
}
hideDraggingState() {
- this.$button.classList.remove('govuk-file-upload__button--dragging');
+ this.$button.classList.remove('govuk-file-upload-button--dragging');
this.$input.classList.remove('govuk-file-upload--dragging');
}
onDrop() {
@@ -1802,7 +1804,7 @@
const fileCount = this.$input.files.length;
if (fileCount === 0) {
this.$status.innerText = this.i18n.t('noFileChosen');
- this.$button.classList.add('govuk-file-upload__button--empty');
+ this.$button.classList.add('govuk-file-upload-button--empty');
} else {
if (fileCount === 1) {
this.$status.innerText = this.$input.files[0].name;
@@ -1811,7 +1813,7 @@
count: fileCount
});
}
- this.$button.classList.remove('govuk-file-upload__button--empty');
+ this.$button.classList.remove('govuk-file-upload-button--empty');
}
}
findLabel() {
@@ -1842,9 +1844,9 @@
updateDisabledState() {
this.$button.disabled = this.$input.disabled;
if (this.$button.disabled) {
- this.$root.classList.add('govuk-file-upload-wrapper--disabled');
+ this.$root.classList.add('govuk-drop-zone--disabled');
} else {
- this.$root.classList.remove('govuk-file-upload-wrapper--disabled');
+ this.$root.classList.remove('govuk-drop-zone--disabled');
}
}
}
diff --git a/packages/govuk-frontend/dist/govuk/all.bundle.mjs b/packages/govuk-frontend/dist/govuk/all.bundle.mjs
index c6161d0e0..0d39a39e3 100644
--- a/packages/govuk-frontend/dist/govuk/all.bundle.mjs
+++ b/packages/govuk-frontend/dist/govuk/all.bundle.mjs
@@ -1696,16 +1696,16 @@ class FileUpload extends ConfigurableComponent {
}
this.$input.id = `${this.id}-input`;
const $button = document.createElement('button');
- $button.classList.add('govuk-file-upload__button');
+ $button.classList.add('govuk-file-upload-button');
$button.type = 'button';
$button.id = this.id;
- $button.classList.add('govuk-file-upload__button--empty');
+ $button.classList.add('govuk-file-upload-button--empty');
const ariaDescribedBy = this.$input.getAttribute('aria-describedby');
if (ariaDescribedBy) {
$button.setAttribute('aria-describedby', ariaDescribedBy);
}
const $status = document.createElement('span');
- $status.className = 'govuk-body govuk-file-upload__status';
+ $status.className = 'govuk-body govuk-file-upload-button__status';
$status.innerText = this.i18n.t('noFileChosen');
$button.appendChild($status);
const commaSpan = document.createElement('span');
@@ -1714,14 +1714,14 @@ class FileUpload extends ConfigurableComponent {
commaSpan.id = `${this.id}-comma`;
$button.appendChild(commaSpan);
const containerSpan = document.createElement('span');
- containerSpan.className = 'govuk-file-upload__pseudo-button-container';
+ containerSpan.className = 'govuk-file-upload-button__pseudo-button-container';
const buttonSpan = document.createElement('span');
- buttonSpan.className = 'govuk-button govuk-button--secondary govuk-file-upload__pseudo-button';
+ buttonSpan.className = 'govuk-button govuk-button--secondary govuk-file-upload-button__pseudo-button';
buttonSpan.innerText = this.i18n.t('chooseFilesButton');
containerSpan.appendChild(buttonSpan);
containerSpan.insertAdjacentText('beforeend', ' ');
const instructionSpan = document.createElement('span');
- instructionSpan.className = 'govuk-body govuk-file-upload__instruction';
+ instructionSpan.className = 'govuk-body govuk-file-upload-button__instruction';
instructionSpan.innerText = this.i18n.t('dropInstruction');
containerSpan.appendChild(instructionSpan);
$button.appendChild(containerSpan);
@@ -1730,6 +1730,8 @@ class FileUpload extends ConfigurableComponent {
this.$root.insertAdjacentElement('afterbegin', $button);
this.$input.setAttribute('tabindex', '-1');
this.$input.setAttribute('aria-hidden', 'true');
+ this.$input.classList.remove('govuk-file-upload');
+ this.$input.classList.add('govuk-file-upload--enhanced');
this.$button = $button;
this.$status = $status;
this.$input.addEventListener('change', this.onChange.bind(this));
@@ -1763,13 +1765,13 @@ class FileUpload extends ConfigurableComponent {
if (event.target instanceof Node) {
if (this.$root.contains(event.target)) {
if (event.dataTransfer && isContainingFiles(event.dataTransfer)) {
- if (!this.$button.classList.contains('govuk-file-upload__button--dragging')) {
+ if (!this.$button.classList.contains('govuk-file-upload-button--dragging')) {
this.showDraggingState();
this.$announcements.innerText = this.i18n.t('enteredDropZone');
}
}
} else {
- if (this.$button.classList.contains('govuk-file-upload__button--dragging')) {
+ if (this.$button.classList.contains('govuk-file-upload-button--dragging')) {
this.hideDraggingState();
this.$announcements.innerText = this.i18n.t('leftDropZone');
}
@@ -1777,11 +1779,11 @@ class FileUpload extends ConfigurableComponent {
}
}
showDraggingState() {
- this.$button.classList.add('govuk-file-upload__button--dragging');
+ this.$button.classList.add('govuk-file-upload-button--dragging');
this.$input.classList.add('govuk-file-upload--dragging');
}
hideDraggingState() {
- this.$button.classList.remove('govuk-file-upload__button--dragging');
+ this.$button.classList.remove('govuk-file-upload-button--dragging');
this.$input.classList.remove('govuk-file-upload--dragging');
}
onDrop() {
@@ -1796,7 +1798,7 @@ class FileUpload extends ConfigurableComponent {
const fileCount = this.$input.files.length;
if (fileCount === 0) {
this.$status.innerText = this.i18n.t('noFileChosen');
- this.$button.classList.add('govuk-file-upload__button--empty');
+ this.$button.classList.add('govuk-file-upload-button--empty');
} else {
if (fileCount === 1) {
this.$status.innerText = this.$input.files[0].name;
@@ -1805,7 +1807,7 @@ class FileUpload extends ConfigurableComponent {
count: fileCount
});
}
- this.$button.classList.remove('govuk-file-upload__button--empty');
+ this.$button.classList.remove('govuk-file-upload-button--empty');
}
}
findLabel() {
@@ -1836,9 +1838,9 @@ class FileUpload extends ConfigurableComponent {
updateDisabledState() {
this.$button.disabled = this.$input.disabled;
if (this.$button.disabled) {
- this.$root.classList.add('govuk-file-upload-wrapper--disabled');
+ this.$root.classList.add('govuk-drop-zone--disabled');
} else {
- this.$root.classList.remove('govuk-file-upload-wrapper--disabled');
+ this.$root.classList.remove('govuk-drop-zone--disabled');
}
}
}
diff --git a/packages/govuk-frontend/dist/govuk/components/file-upload/_index.scss b/packages/govuk-frontend/dist/govuk/components/file-upload/_index.scss
index af77bac64..ee31df439 100644
--- a/packages/govuk-frontend/dist/govuk/components/file-upload/_index.scss
+++ b/packages/govuk-frontend/dist/govuk/components/file-upload/_index.scss
@@ -48,7 +48,7 @@
}
}
- .govuk-file-upload-wrapper {
+ .govuk-drop-zone {
display: block;
position: relative;
z-index: 0;
@@ -58,11 +58,11 @@
// required because disabling pointer events
// on the button means that the cursor style
// be applied on the button itself
- .govuk-file-upload-wrapper--disabled {
+ .govuk-drop-zone--disabled {
cursor: not-allowed;
}
- .govuk-frontend-supported .govuk-file-upload-wrapper .govuk-file-upload {
+ .govuk-file-upload--enhanced {
position: absolute;
// Make the native control take up the entire space of the element, but
// invisible and behind the other elements until we need it
@@ -76,24 +76,24 @@
opacity: 0;
}
- .govuk-frontend-supported .govuk-file-upload-wrapper .govuk-file-upload--dragging {
+ .govuk-file-upload--dragging {
z-index: 1;
}
- .govuk-file-upload__pseudo-button {
+ .govuk-file-upload-button__pseudo-button {
width: auto;
margin-right: govuk-spacing(2);
margin-bottom: $govuk-border-width-form-element + 1;
flex-shrink: 0;
}
- .govuk-file-upload__instruction {
+ .govuk-file-upload-button__instruction {
margin-top: govuk-spacing(2) - ($govuk-border-width-form-element + 1);
margin-bottom: 0;
text-align: left;
}
- .govuk-file-upload__status {
+ .govuk-file-upload-button__status {
display: block;
margin-bottom: govuk-spacing(2);
padding: govuk-spacing(3) govuk-spacing(2);
@@ -101,21 +101,16 @@
text-align: left;
}
- .govuk-file-upload__button--empty .govuk-file-upload__status {
- color: govuk-shade(govuk-colour("blue"), 60%);
- background-color: govuk-tint(govuk-colour("blue"), 70%);
- }
-
// bugs documented with button using flex
// https://github.com/philipwalton/flexbugs#flexbug-9
// so we need a container here
- .govuk-file-upload__pseudo-button-container {
+ .govuk-file-upload-button__pseudo-button-container {
display: flex;
align-items: baseline;
flex-wrap: wrap;
}
- .govuk-file-upload__button {
+ .govuk-file-upload-button {
width: 100%;
// align the padding to be same as notification banner and error summary accounting for the thicker borders
padding: (govuk-spacing(3) + $govuk-border-width - $file-upload-border-width);
@@ -126,85 +121,103 @@
@include govuk-media-query($from: tablet) {
padding: (govuk-spacing(4) + $govuk-border-width - $file-upload-border-width);
}
- }
- .govuk-file-upload__button--empty {
- border-style: dashed;
- background-color: govuk-colour("white");
- }
+ .govuk-file-upload-button__pseudo-button {
+ background-color: govuk-colour("white");
+ }
- .govuk-file-upload__button.govuk-file-upload__button--empty:hover {
- background-color: govuk-colour("light-grey");
- }
+ &:hover {
+ background-color: govuk-tint(govuk-colour("mid-grey"), 20%);
- .govuk-file-upload__button:disabled {
- pointer-events: none;
- opacity: 0.5;
- }
+ .govuk-file-upload-button__pseudo-button {
+ background-color: govuk-shade(govuk-colour("light-grey"), 10%);
+ }
- .govuk-file-upload__button--dragging.govuk-file-upload__button,
- .govuk-file-upload__button:hover {
- background-color: govuk-tint(govuk-colour("mid-grey"), 20%);
- }
+ .govuk-file-upload-button__status {
+ background-color: govuk-tint(govuk-colour("blue"), 80%);
+ }
+ }
- .govuk-file-upload__button--dragging.govuk-file-upload__button--empty {
- background-color: govuk-colour("light-grey");
- }
+ &:active,
+ &:focus {
+ border: $file-upload-border-width solid govuk-colour("black");
+ outline: $govuk-focus-width solid $govuk-focus-colour;
+ // Ensure outline appears outside of the element
+ outline-offset: 0;
+ background-color: govuk-tint(govuk-colour("mid-grey"), 20%);
+ // Double the border by adding its width again. Use `box-shadow` for this
+ // instead of changing `border-width` - this is for consistency with
+ // components such as textarea where we avoid changing `border-width` as
+ // it will change the element size. Also, `outline` cannot be utilised
+ // here as it is already used for the yellow focus state.
+ box-shadow: inset 0 0 0 $govuk-border-width-form-element;
+
+ .govuk-file-upload-button__pseudo-button {
+ background-color: $govuk-focus-colour;
+ box-shadow: 0 2px 0 govuk-colour("black");
+ }
+
+ &:hover .govuk-file-upload-button__pseudo-button {
+ border-color: $govuk-focus-colour;
+ outline: 3px solid transparent;
+ background-color: govuk-colour("light-grey");
+ box-shadow: inset 0 0 0 1px $govuk-focus-colour;
+ }
+ }
- .govuk-file-upload__button--dragging:not(:disabled) {
- border-color: govuk-shade(govuk-colour("mid-grey"), 20%);
+ &:disabled {
+ pointer-events: none;
+ opacity: 0.5;
+ }
}
- .govuk-file-upload__button--dragging:not(:disabled) .govuk-file-upload__pseudo-button,
- .govuk-file-upload__button:hover .govuk-file-upload__pseudo-button {
- background-color: govuk-shade(govuk-colour("light-grey"), 10%);
- }
+ .govuk-file-upload-button--empty {
+ border-style: dashed;
+ background-color: govuk-colour("white");
- .govuk-file-upload__button--empty.govuk-file-upload__button--dragging:not(:disabled) .govuk-file-upload__status,
- .govuk-file-upload__button--empty:hover .govuk-file-upload__status,
- .govuk-file-upload__button--empty:focus .govuk-file-upload__status {
- background-color: govuk-tint(govuk-colour("blue"), 80%);
- }
+ .govuk-file-upload-button__pseudo-button {
+ background-color: govuk-colour("light-grey");
+ }
- .govuk-file-upload__button .govuk-file-upload__pseudo-button,
- .govuk-file-upload__button--empty.govuk-file-upload__button--dragging .govuk-file-upload__pseudo-button {
- background-color: govuk-colour("white");
- }
+ .govuk-file-upload-button__status {
+ color: govuk-shade(govuk-colour("blue"), 60%);
+ background-color: govuk-tint(govuk-colour("blue"), 70%);
+ }
- .govuk-file-upload__button--empty .govuk-file-upload__pseudo-button {
- background-color: govuk-colour("light-grey");
- }
+ &:hover,
+ &:focus,
+ &:active {
+ background-color: govuk-colour("light-grey");
- .govuk-file-upload__button:active,
- .govuk-file-upload__button:focus {
- border: $file-upload-border-width solid govuk-colour("black");
- outline: $govuk-focus-width solid $govuk-focus-colour;
- // Ensure outline appears outside of the element
- outline-offset: 0;
- background-color: govuk-tint(govuk-colour("mid-grey"), 20%);
- // Double the border by adding its width again. Use `box-shadow` for this
- // instead of changing `border-width` - this is for consistency with
- // components such as textarea where we avoid changing `border-width` as
- // it will change the element size. Also, `outline` cannot be utilised
- // here as it is already used for the yellow focus state.
- box-shadow: inset 0 0 0 $govuk-border-width-form-element;
+ .govuk-file-upload-button__status {
+ background-color: govuk-tint(govuk-colour("blue"), 80%);
+ }
+ }
}
- .govuk-file-upload__button--empty:active,
- .govuk-file-upload__button--empty:focus {
- background-color: govuk-colour("light-grey");
- }
+ .govuk-file-upload-button--dragging {
+ // extra specificity to apply when
+ // empty
+ &.govuk-file-upload-button {
+ background-color: govuk-tint(govuk-colour("mid-grey"), 20%);
+ }
- .govuk-file-upload__button:focus .govuk-file-upload__pseudo-button {
- background-color: $govuk-focus-colour;
- box-shadow: 0 2px 0 govuk-colour("black");
- }
+ &.govuk-file-upload-button--empty {
+ background-color: govuk-colour("light-grey");
+ }
- .govuk-file-upload__button:focus:hover .govuk-file-upload__pseudo-button {
- border-color: $govuk-focus-colour;
- outline: 3px solid transparent;
- background-color: govuk-colour("light-grey");
- box-shadow: inset 0 0 0 1px $govuk-focus-colour;
+ &:not(:disabled) {
+ border-color: govuk-shade(govuk-colour("mid-grey"), 20%);
+
+ .govuk-file-upload-button__pseudo-button {
+ background-color: govuk-shade(govuk-colour("light-grey"), 10%);
+ }
+ }
+
+ &.govuk-file-upload-button--empty:not(:disabled) .govuk-file-upload-button__status,
+ &.govuk-file-upload-button--empty .govuk-file-upload-button__pseudo-button {
+ background-color: govuk-colour("white");
+ }
}
}
diff --git a/packages/govuk-frontend/dist/govuk/components/file-upload/file-upload.bundle.js b/packages/govuk-frontend/dist/govuk/components/file-upload/file-upload.bundle.js
index b289716a9..5d28c222d 100644
--- a/packages/govuk-frontend/dist/govuk/components/file-upload/file-upload.bundle.js
+++ b/packages/govuk-frontend/dist/govuk/components/file-upload/file-upload.bundle.js
@@ -529,16 +529,16 @@
}
this.$input.id = `${this.id}-input`;
const $button = document.createElement('button');
- $button.classList.add('govuk-file-upload__button');
+ $button.classList.add('govuk-file-upload-button');
$button.type = 'button';
$button.id = this.id;
- $button.classList.add('govuk-file-upload__button--empty');
+ $button.classList.add('govuk-file-upload-button--empty');
const ariaDescribedBy = this.$input.getAttribute('aria-describedby');
if (ariaDescribedBy) {
$button.setAttribute('aria-describedby', ariaDescribedBy);
}
const $status = document.createElement('span');
- $status.className = 'govuk-body govuk-file-upload__status';
+ $status.className = 'govuk-body govuk-file-upload-button__status';
$status.innerText = this.i18n.t('noFileChosen');
$button.appendChild($status);
const commaSpan = document.createElement('span');
@@ -547,14 +547,14 @@
commaSpan.id = `${this.id}-comma`;
$button.appendChild(commaSpan);
const containerSpan = document.createElement('span');
- containerSpan.className = 'govuk-file-upload__pseudo-button-container';
+ containerSpan.className = 'govuk-file-upload-button__pseudo-button-container';
const buttonSpan = document.createElement('span');
- buttonSpan.className = 'govuk-button govuk-button--secondary govuk-file-upload__pseudo-button';
+ buttonSpan.className = 'govuk-button govuk-button--secondary govuk-file-upload-button__pseudo-button';
buttonSpan.innerText = this.i18n.t('chooseFilesButton');
containerSpan.appendChild(buttonSpan);
containerSpan.insertAdjacentText('beforeend', ' ');
const instructionSpan = document.createElement('span');
- instructionSpan.className = 'govuk-body govuk-file-upload__instruction';
+ instructionSpan.className = 'govuk-body govuk-file-upload-button__instruction';
instructionSpan.innerText = this.i18n.t('dropInstruction');
containerSpan.appendChild(instructionSpan);
$button.appendChild(containerSpan);
@@ -563,6 +563,8 @@
this.$root.insertAdjacentElement('afterbegin', $button);
this.$input.setAttribute('tabindex', '-1');
this.$input.setAttribute('aria-hidden', 'true');
+ this.$input.classList.remove('govuk-file-upload');
+ this.$input.classList.add('govuk-file-upload--enhanced');
this.$button = $button;
this.$status = $status;
this.$input.addEventListener('change', this.onChange.bind(this));
@@ -596,13 +598,13 @@
if (event.target instanceof Node) {
if (this.$root.contains(event.target)) {
if (event.dataTransfer && isContainingFiles(event.dataTransfer)) {
- if (!this.$button.classList.contains('govuk-file-upload__button--dragging')) {
+ if (!this.$button.classList.contains('govuk-file-upload-button--dragging')) {
this.showDraggingState();
this.$announcements.innerText = this.i18n.t('enteredDropZone');
}
}
} else {
- if (this.$button.classList.contains('govuk-file-upload__button--dragging')) {
+ if (this.$button.classList.contains('govuk-file-upload-button--dragging')) {
this.hideDraggingState();
this.$announcements.innerText = this.i18n.t('leftDropZone');
}
@@ -610,11 +612,11 @@
}
}
showDraggingState() {
- this.$button.classList.add('govuk-file-upload__button--dragging');
+ this.$button.classList.add('govuk-file-upload-button--dragging');
this.$input.classList.add('govuk-file-upload--dragging');
}
hideDraggingState() {
- this.$button.classList.remove('govuk-file-upload__button--dragging');
+ this.$button.classList.remove('govuk-file-upload-button--dragging');
this.$input.classList.remove('govuk-file-upload--dragging');
}
onDrop() {
@@ -629,7 +631,7 @@
const fileCount = this.$input.files.length;
if (fileCount === 0) {
this.$status.innerText = this.i18n.t('noFileChosen');
- this.$button.classList.add('govuk-file-upload__button--empty');
+ this.$button.classList.add('govuk-file-upload-button--empty');
} else {
if (fileCount === 1) {
this.$status.innerText = this.$input.files[0].name;
@@ -638,7 +640,7 @@
count: fileCount
});
}
- this.$button.classList.remove('govuk-file-upload__button--empty');
+ this.$button.classList.remove('govuk-file-upload-button--empty');
}
}
findLabel() {
@@ -669,9 +671,9 @@
updateDisabledState() {
this.$button.disabled = this.$input.disabled;
if (this.$button.disabled) {
- this.$root.classList.add('govuk-file-upload-wrapper--disabled');
+ this.$root.classList.add('govuk-drop-zone--disabled');
} else {
- this.$root.classList.remove('govuk-file-upload-wrapper--disabled');
+ this.$root.classList.remove('govuk-drop-zone--disabled');
}
}
}
diff --git a/packages/govuk-frontend/dist/govuk/components/file-upload/file-upload.bundle.mjs b/packages/govuk-frontend/dist/govuk/components/file-upload/file-upload.bundle.mjs
index 86d3a5ed1..95751ed2f 100644
--- a/packages/govuk-frontend/dist/govuk/components/file-upload/file-upload.bundle.mjs
+++ b/packages/govuk-frontend/dist/govuk/components/file-upload/file-upload.bundle.mjs
@@ -523,16 +523,16 @@ class FileUpload extends ConfigurableComponent {
}
this.$input.id = `${this.id}-input`;
const $button = document.createElement('button');
- $button.classList.add('govuk-file-upload__button');
+ $button.classList.add('govuk-file-upload-button');
$button.type = 'button';
$button.id = this.id;
- $button.classList.add('govuk-file-upload__button--empty');
+ $button.classList.add('govuk-file-upload-button--empty');
const ariaDescribedBy = this.$input.getAttribute('aria-describedby');
if (ariaDescribedBy) {
$button.setAttribute('aria-describedby', ariaDescribedBy);
}
const $status = document.createElement('span');
- $status.className = 'govuk-body govuk-file-upload__status';
+ $status.className = 'govuk-body govuk-file-upload-button__status';
$status.innerText = this.i18n.t('noFileChosen');
$button.appendChild($status);
const commaSpan = document.createElement('span');
@@ -541,14 +541,14 @@ class FileUpload extends ConfigurableComponent {
commaSpan.id = `${this.id}-comma`;
$button.appendChild(commaSpan);
const containerSpan = document.createElement('span');
- containerSpan.className = 'govuk-file-upload__pseudo-button-container';
+ containerSpan.className = 'govuk-file-upload-button__pseudo-button-container';
const buttonSpan = document.createElement('span');
- buttonSpan.className = 'govuk-button govuk-button--secondary govuk-file-upload__pseudo-button';
+ buttonSpan.className = 'govuk-button govuk-button--secondary govuk-file-upload-button__pseudo-button';
buttonSpan.innerText = this.i18n.t('chooseFilesButton');
containerSpan.appendChild(buttonSpan);
containerSpan.insertAdjacentText('beforeend', ' ');
const instructionSpan = document.createElement('span');
- instructionSpan.className = 'govuk-body govuk-file-upload__instruction';
+ instructionSpan.className = 'govuk-body govuk-file-upload-button__instruction';
instructionSpan.innerText = this.i18n.t('dropInstruction');
containerSpan.appendChild(instructionSpan);
$button.appendChild(containerSpan);
@@ -557,6 +557,8 @@ class FileUpload extends ConfigurableComponent {
this.$root.insertAdjacentElement('afterbegin', $button);
this.$input.setAttribute('tabindex', '-1');
this.$input.setAttribute('aria-hidden', 'true');
+ this.$input.classList.remove('govuk-file-upload');
+ this.$input.classList.add('govuk-file-upload--enhanced');
this.$button = $button;
this.$status = $status;
this.$input.addEventListener('change', this.onChange.bind(this));
@@ -590,13 +592,13 @@ class FileUpload extends ConfigurableComponent {
if (event.target instanceof Node) {
if (this.$root.contains(event.target)) {
if (event.dataTransfer && isContainingFiles(event.dataTransfer)) {
- if (!this.$button.classList.contains('govuk-file-upload__button--dragging')) {
+ if (!this.$button.classList.contains('govuk-file-upload-button--dragging')) {
this.showDraggingState();
this.$announcements.innerText = this.i18n.t('enteredDropZone');
}
}
} else {
- if (this.$button.classList.contains('govuk-file-upload__button--dragging')) {
+ if (this.$button.classList.contains('govuk-file-upload-button--dragging')) {
this.hideDraggingState();
this.$announcements.innerText = this.i18n.t('leftDropZone');
}
@@ -604,11 +606,11 @@ class FileUpload extends ConfigurableComponent {
}
}
showDraggingState() {
- this.$button.classList.add('govuk-file-upload__button--dragging');
+ this.$button.classList.add('govuk-file-upload-button--dragging');
this.$input.classList.add('govuk-file-upload--dragging');
}
hideDraggingState() {
- this.$button.classList.remove('govuk-file-upload__button--dragging');
+ this.$button.classList.remove('govuk-file-upload-button--dragging');
this.$input.classList.remove('govuk-file-upload--dragging');
}
onDrop() {
@@ -623,7 +625,7 @@ class FileUpload extends ConfigurableComponent {
const fileCount = this.$input.files.length;
if (fileCount === 0) {
this.$status.innerText = this.i18n.t('noFileChosen');
- this.$button.classList.add('govuk-file-upload__button--empty');
+ this.$button.classList.add('govuk-file-upload-button--empty');
} else {
if (fileCount === 1) {
this.$status.innerText = this.$input.files[0].name;
@@ -632,7 +634,7 @@ class FileUpload extends ConfigurableComponent {
count: fileCount
});
}
- this.$button.classList.remove('govuk-file-upload__button--empty');
+ this.$button.classList.remove('govuk-file-upload-button--empty');
}
}
findLabel() {
@@ -663,9 +665,9 @@ class FileUpload extends ConfigurableComponent {
updateDisabledState() {
this.$button.disabled = this.$input.disabled;
if (this.$button.disabled) {
- this.$root.classList.add('govuk-file-upload-wrapper--disabled');
+ this.$root.classList.add('govuk-drop-zone--disabled');
} else {
- this.$root.classList.remove('govuk-file-upload-wrapper--disabled');
+ this.$root.classList.remove('govuk-drop-zone--disabled');
}
}
}
diff --git a/packages/govuk-frontend/dist/govuk/components/file-upload/file-upload.mjs b/packages/govuk-frontend/dist/govuk/components/file-upload/file-upload.mjs
index 69ca82332..a2b27fb33 100644
--- a/packages/govuk-frontend/dist/govuk/components/file-upload/file-upload.mjs
+++ b/packages/govuk-frontend/dist/govuk/components/file-upload/file-upload.mjs
@@ -44,16 +44,16 @@ class FileUpload extends ConfigurableComponent {
}
this.$input.id = `${this.id}-input`;
const $button = document.createElement('button');
- $button.classList.add('govuk-file-upload__button');
+ $button.classList.add('govuk-file-upload-button');
$button.type = 'button';
$button.id = this.id;
- $button.classList.add('govuk-file-upload__button--empty');
+ $button.classList.add('govuk-file-upload-button--empty');
const ariaDescribedBy = this.$input.getAttribute('aria-describedby');
if (ariaDescribedBy) {
$button.setAttribute('aria-describedby', ariaDescribedBy);
}
const $status = document.createElement('span');
- $status.className = 'govuk-body govuk-file-upload__status';
+ $status.className = 'govuk-body govuk-file-upload-button__status';
$status.innerText = this.i18n.t('noFileChosen');
$button.appendChild($status);
const commaSpan = document.createElement('span');
@@ -62,14 +62,14 @@ class FileUpload extends ConfigurableComponent {
commaSpan.id = `${this.id}-comma`;
$button.appendChild(commaSpan);
const containerSpan = document.createElement('span');
- containerSpan.className = 'govuk-file-upload__pseudo-button-container';
+ containerSpan.className = 'govuk-file-upload-button__pseudo-button-container';
const buttonSpan = document.createElement('span');
- buttonSpan.className = 'govuk-button govuk-button--secondary govuk-file-upload__pseudo-button';
+ buttonSpan.className = 'govuk-button govuk-button--secondary govuk-file-upload-button__pseudo-button';
buttonSpan.innerText = this.i18n.t('chooseFilesButton');
containerSpan.appendChild(buttonSpan);
containerSpan.insertAdjacentText('beforeend', ' ');
const instructionSpan = document.createElement('span');
- instructionSpan.className = 'govuk-body govuk-file-upload__instruction';
+ instructionSpan.className = 'govuk-body govuk-file-upload-button__instruction';
instructionSpan.innerText = this.i18n.t('dropInstruction');
containerSpan.appendChild(instructionSpan);
$button.appendChild(containerSpan);
@@ -78,6 +78,8 @@ class FileUpload extends ConfigurableComponent {
this.$root.insertAdjacentElement('afterbegin', $button);
this.$input.setAttribute('tabindex', '-1');
this.$input.setAttribute('aria-hidden', 'true');
+ this.$input.classList.remove('govuk-file-upload');
+ this.$input.classList.add('govuk-file-upload--enhanced');
this.$button = $button;
this.$status = $status;
this.$input.addEventListener('change', this.onChange.bind(this));
@@ -111,13 +113,13 @@ class FileUpload extends ConfigurableComponent {
if (event.target instanceof Node) {
if (this.$root.contains(event.target)) {
if (event.dataTransfer && isContainingFiles(event.dataTransfer)) {
- if (!this.$button.classList.contains('govuk-file-upload__button--dragging')) {
+ if (!this.$button.classList.contains('govuk-file-upload-button--dragging')) {
this.showDraggingState();
this.$announcements.innerText = this.i18n.t('enteredDropZone');
}
}
} else {
- if (this.$button.classList.contains('govuk-file-upload__button--dragging')) {
+ if (this.$button.classList.contains('govuk-file-upload-button--dragging')) {
this.hideDraggingState();
this.$announcements.innerText = this.i18n.t('leftDropZone');
}
@@ -125,11 +127,11 @@ class FileUpload extends ConfigurableComponent {
}
}
showDraggingState() {
- this.$button.classList.add('govuk-file-upload__button--dragging');
+ this.$button.classList.add('govuk-file-upload-button--dragging');
this.$input.classList.add('govuk-file-upload--dragging');
}
hideDraggingState() {
- this.$button.classList.remove('govuk-file-upload__button--dragging');
+ this.$button.classList.remove('govuk-file-upload-button--dragging');
this.$input.classList.remove('govuk-file-upload--dragging');
}
onDrop() {
@@ -144,7 +146,7 @@ class FileUpload extends ConfigurableComponent {
const fileCount = this.$input.files.length;
if (fileCount === 0) {
this.$status.innerText = this.i18n.t('noFileChosen');
- this.$button.classList.add('govuk-file-upload__button--empty');
+ this.$button.classList.add('govuk-file-upload-button--empty');
} else {
if (fileCount === 1) {
this.$status.innerText = this.$input.files[0].name;
@@ -153,7 +155,7 @@ class FileUpload extends ConfigurableComponent {
count: fileCount
});
}
- this.$button.classList.remove('govuk-file-upload__button--empty');
+ this.$button.classList.remove('govuk-file-upload-button--empty');
}
}
findLabel() {
@@ -184,9 +186,9 @@ class FileUpload extends ConfigurableComponent {
updateDisabledState() {
this.$button.disabled = this.$input.disabled;
if (this.$button.disabled) {
- this.$root.classList.add('govuk-file-upload-wrapper--disabled');
+ this.$root.classList.add('govuk-drop-zone--disabled');
} else {
- this.$root.classList.remove('govuk-file-upload-wrapper--disabled');
+ this.$root.classList.remove('govuk-drop-zone--disabled');
}
}
}
diff --git a/packages/govuk-frontend/dist/govuk/components/file-upload/fixtures.json b/packages/govuk-frontend/dist/govuk/components/file-upload/fixtures.json
index 8f9ee6edf..b80b3d3e6 100644
--- a/packages/govuk-frontend/dist/govuk/components/file-upload/fixtures.json
+++ b/packages/govuk-frontend/dist/govuk/components/file-upload/fixtures.json
@@ -171,7 +171,7 @@
"description": "",
"previewLayoutModifiers": [],
"screenshot": true,
- "html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"file-upload-1\">\n Upload a file\n </label>\n <div\n class=\"govuk-file-upload-wrapper\"\n data-module=\"govuk-file-upload\">\n <input class=\"govuk-file-upload\" id=\"file-upload-1\" name=\"file-upload-1\" type=\"file\">\n </div>\n</div>"
+ "html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"file-upload-1\">\n Upload a file\n </label>\n <div\n class=\"govuk-drop-zone\"\n data-module=\"govuk-file-upload\">\n <input class=\"govuk-file-upload\" id=\"file-upload-1\" name=\"file-upload-1\" type=\"file\">\n </div>\n</div>"
},
{
"name": "enhanced, disabled",
@@ -191,7 +191,7 @@
"description": "",
"previewLayoutModifiers": [],
"screenshot": false,
- "html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"file-upload-error\">\n Upload a file\n </label>\n <div id=\"file-upload-error-hint\" class=\"govuk-hint\">\n Your photo may be in your Pictures, Photos, Downloads or Desktop folder. Or in an app like iPhoto.\n </div>\n <div\n class=\"govuk-file-upload-wrapper\"\n data-module=\"govuk-file-upload\">\n <input class=\"govuk-file-upload\" id=\"file-upload-error\" name=\"file-upload-error\" type=\"file\" disabled aria-describedby=\"file-upload-error-hint\">\n </div>\n</div>"
+ "html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"file-upload-error\">\n Upload a file\n </label>\n <div id=\"file-upload-error-hint\" class=\"govuk-hint\">\n Your photo may be in your Pictures, Photos, Downloads or Desktop folder. Or in an app like iPhoto.\n </div>\n <div\n class=\"govuk-drop-zone\"\n data-module=\"govuk-file-upload\">\n <input class=\"govuk-file-upload\" id=\"file-upload-error\" name=\"file-upload-error\" type=\"file\" disabled aria-describedby=\"file-upload-error-hint\">\n </div>\n</div>"
},
{
"name": "enhanced, with error message and hint",
@@ -213,7 +213,7 @@
"description": "",
"previewLayoutModifiers": [],
"screenshot": false,
- "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n <label class=\"govuk-label\" for=\"file-upload-3\">\n Upload a file\n </label>\n <div id=\"file-upload-3-hint\" class=\"govuk-hint\">\n Your photo may be in your Pictures, Photos, Downloads or Desktop folder. Or in an app like iPhoto.\n </div>\n <p id=\"file-upload-3-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Error message goes here\n </p>\n <div\n class=\"govuk-file-upload-wrapper\"\n data-module=\"govuk-file-upload\">\n <input class=\"govuk-file-upload govuk-file-upload--error\" id=\"file-upload-3\" name=\"file-upload-3\" type=\"file\" aria-describedby=\"file-upload-3-hint file-upload-3-error\">\n </div>\n</div>"
+ "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n <label class=\"govuk-label\" for=\"file-upload-3\">\n Upload a file\n </label>\n <div id=\"file-upload-3-hint\" class=\"govuk-hint\">\n Your photo may be in your Pictures, Photos, Downloads or Desktop folder. Or in an app like iPhoto.\n </div>\n <p id=\"file-upload-3-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Error message goes here\n </p>\n <div\n class=\"govuk-drop-zone\"\n data-module=\"govuk-file-upload\">\n <input class=\"govuk-file-upload govuk-file-upload--error\" id=\"file-upload-3\" name=\"file-upload-3\" type=\"file\" aria-describedby=\"file-upload-3-hint file-upload-3-error\">\n </div>\n</div>"
},
{
"name": "translated",
@@ -239,7 +239,7 @@
"description": "",
"previewLayoutModifiers": [],
"screenshot": false,
- "html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"file-upload-1\">\n Llwythwch ffeil i fyny\n </label>\n <div\n class=\"govuk-file-upload-wrapper\"\n data-module=\"govuk-file-upload\" data-i18n.choose-files-button=\"Dewiswch ffeil\" data-i18n.no-file-chosen=\"Dim ffeil wedi'i dewis\" data-i18n.multiple-files-chosen.other=\"%{count} ffeil wedi'u dewis\" data-i18n.multiple-files-chosen.one=\"%{count} ffeil wedi'i dewis\" data-i18n.drop-instruction=\"neu ollwng ffeil\" data-i18n.entered-drop-zone=\"Wedi mynd i mewn i'r parth gollwng\" data-i18n.left-drop-zone=\"Parth gollwng i'r chwith\">\n <input class=\"govuk-file-upload\" id=\"file-upload-1\" name=\"file-upload-1\" type=\"file\" multiple>\n </div>\n</div>"
+ "html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"file-upload-1\">\n Llwythwch ffeil i fyny\n </label>\n <div\n class=\"govuk-drop-zone\"\n data-module=\"govuk-file-upload\" data-i18n.choose-files-button=\"Dewiswch ffeil\" data-i18n.no-file-chosen=\"Dim ffeil wedi'i dewis\" data-i18n.multiple-files-chosen.other=\"%{count} ffeil wedi'u dewis\" data-i18n.multiple-files-chosen.one=\"%{count} ffeil wedi'i dewis\" data-i18n.drop-instruction=\"neu ollwng ffeil\" data-i18n.entered-drop-zone=\"Wedi mynd i mewn i'r parth gollwng\" data-i18n.left-drop-zone=\"Parth gollwng i'r chwith\">\n <input class=\"govuk-file-upload\" id=\"file-upload-1\" name=\"file-upload-1\" type=\"file\" multiple>\n </div>\n</div>"
},
{
"name": "with value",
Action run for 8fec1e1 |
govuk-design-system-ci
temporarily deployed
to
govuk-frontend-pr-5705
govuk-design-system-ci
temporarily deployed
to
govuk-frontend-pr-5705
romaricpascal
force-pushed
the
file-upload-css-refactoring
branch
from
3a55201 to
f4a3678
Compare
govuk-design-system-ci
temporarily deployed
to
govuk-frontend-pr-5705
romaricpascal
force-pushed
the
file-upload-css-refactoring
branch
from
f4a3678 to
ed38aa7
Compare
govuk-design-system-ci
temporarily deployed
to
govuk-frontend-pr-5705
govuk-design-system-ci
temporarily deployed
to
govuk-frontend-pr-5705
patrickpatrickpatrick
force-pushed
the
file-upload-css-refactoring
branch
from
1cb1e89 to
e9b6aaf
Compare
govuk-design-system-ci
temporarily deployed
to
govuk-frontend-pr-5705
govuk-design-system-ci
temporarily deployed
to
govuk-frontend-pr-5705
govuk-design-system-ci
temporarily deployed
to
govuk-frontend-pr-5705
patrickpatrickpatrick
force-pushed
the
file-upload-css-refactoring
branch
from
5feada8 to
7a9e277
Compare
govuk-design-system-ci
temporarily deployed
to
govuk-frontend-pr-5705
|
@CharlotteDowns We've moved quite a bit of CSS, hopefully without breaking the different states, but would appreciate a look and a PR approval if everything is OK, just in case 😊 |
romaricpascal
changed the title
.govuk-file-upload-wrapper to .govuk-drop-zone
romaricpascal
changed the title
1 task
Looking good to me, I like the decision to do the blue status on the dark grey in hover when a file is uploaded |
romaricpascal
force-pushed
the
file-upload-css-refactoring
branch
from
7a9e277 to
3145bc4
Compare
govuk-design-system-ci
temporarily deployed
to
govuk-frontend-pr-5705
The name is more representative
romaricpascal
force-pushed
the
file-upload-css-refactoring
branch
from
3145bc4 to
7f96f23
Compare
govuk-design-system-ci
temporarily deployed
to
govuk-frontend-pr-5705
Simplify selectors in `index.scss` of File Upload by adding new `govuk-file-upload--enhanced` class. Add `govuk-file-upload--enhanced` to `input` element in Javascript initialisation.
The element is its own block not a descendant of `.govuk-file-upload`. Renames its descendants to make them elements of `.govuk-file-upload-button` rather than of `.govuk-file-upload`.
Helps understand the changes that happen on hover
Use SCSS nesting to simplify selectors.
romaricpascal
force-pushed
the
file-upload-css-refactoring
branch
from
7f96f23 to
8fec1e1
Compare
govuk-design-system-ci
temporarily deployed
to
govuk-frontend-pr-5705
patrickpatrickpatrick
approved these changes
Feb 10, 2025
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Pairing with @patrickpatrickpatrick, refactored the styles of the enhanced file upload to clarify naming and regroup the styles of each state.
Thoughts
Given the number of states of the component throughout user interactions, regrouping by state gives a better understanding than regrouping selectors where the same style applies. Minifiers will take care of regrouping selectors of different states that apply a given style.
The code uses nesting to regroup the code of given states to make each state more identifiable than if it was a series of selectors at the root of the file.
Fixes #5682