Skip to content

Commit

Permalink
Rename .govuk-file-upload__button to .govuk-file-upload-button
Browse files Browse the repository at this point in the history 
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`.
  • Loading branch information
@romaricpascal
romaricpascal committed Feb 7, 2025
1 parent bcc3823 commit ed38aa7
Show file tree
Hide file tree
Showing 3 changed files with 48 additions and 46 deletions.
52 changes: 26 additions & 26 deletions packages/govuk-frontend/src/govuk/components/file-upload/_index.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -80,42 +80,42 @@
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);
background-color: govuk-colour("white");
text-align: left;
}

.govuk-file-upload__button--empty .govuk-file-upload__status {
.govuk-file-upload-button--empty .govuk-file-upload-button__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);
Expand All @@ -128,55 +128,55 @@
}
}

.govuk-file-upload__button--empty {
.govuk-file-upload-button--empty {
border-style: dashed;
background-color: govuk-colour("white");
}

.govuk-file-upload__button.govuk-file-upload__button--empty:hover {
.govuk-file-upload-button--empty:hover {
background-color: govuk-colour("light-grey");
}

.govuk-file-upload__button:disabled {
.govuk-file-upload-button:disabled {
pointer-events: none;
opacity: 0.5;
}

.govuk-file-upload__button--dragging.govuk-file-upload__button,
.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--dragging.govuk-file-upload__button--empty {
.govuk-file-upload-button--dragging.govuk-file-upload-button--empty {
background-color: govuk-colour("light-grey");
}

.govuk-file-upload__button--dragging:not(:disabled) {
.govuk-file-upload-button--dragging:not(:disabled) {
border-color: govuk-shade(govuk-colour("mid-grey"), 20%);
}

.govuk-file-upload__button--dragging:not(:disabled) .govuk-file-upload__pseudo-button,
.govuk-file-upload__button:hover .govuk-file-upload__pseudo-button {
.govuk-file-upload-button--dragging:not(:disabled) .govuk-file-upload-button__pseudo-button,
.govuk-file-upload-button:hover .govuk-file-upload-button__pseudo-button {
background-color: govuk-shade(govuk-colour("light-grey"), 10%);
}

.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 {
.govuk-file-upload-button--empty.govuk-file-upload-button--dragging:not(:disabled) .govuk-file-upload-button__status,
.govuk-file-upload-button--empty:hover .govuk-file-upload-button__status,
.govuk-file-upload-button--empty:focus .govuk-file-upload-button__status {
background-color: govuk-tint(govuk-colour("blue"), 80%);
}

.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 .govuk-file-upload-button__pseudo-button,
.govuk-file-upload-button--empty.govuk-file-upload-button--dragging .govuk-file-upload-button__pseudo-button {
background-color: govuk-colour("white");
}

.govuk-file-upload__button--empty .govuk-file-upload__pseudo-button {
.govuk-file-upload-button--empty .govuk-file-upload-button__pseudo-button {
background-color: govuk-colour("light-grey");
}

.govuk-file-upload__button:active,
.govuk-file-upload__button:focus {
.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
Expand All @@ -190,17 +190,17 @@
box-shadow: inset 0 0 0 $govuk-border-width-form-element;
}

.govuk-file-upload__button--empty:active,
.govuk-file-upload__button--empty:focus {
.govuk-file-upload-button--empty:active,
.govuk-file-upload-button--empty:focus {
background-color: govuk-colour("light-grey");
}

.govuk-file-upload__button:focus .govuk-file-upload__pseudo-button {
.govuk-file-upload-button:focus .govuk-file-upload-button__pseudo-button {
background-color: $govuk-focus-colour;
box-shadow: 0 2px 0 govuk-colour("black");
}

.govuk-file-upload__button:focus:hover .govuk-file-upload__pseudo-button {
.govuk-file-upload-button:focus:hover .govuk-file-upload-button__pseudo-button {
border-color: $govuk-focus-colour;
outline: 3px solid transparent;
background-color: govuk-colour("light-grey");
Expand Down
26 changes: 14 additions & 12 deletions packages/govuk-frontend/src/govuk/components/file-upload/file-upload.mjs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -90,10 +90,10 @@ export class FileUpload extends ConfigurableComponent {

// Create the file selection button
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')

// Copy `aria-describedby` if present so hints and errors
// are associated to the `<button>`
Expand All @@ -104,7 +104,7 @@ export class FileUpload extends ConfigurableComponent {

// Create status element that shows what/how many files are selected
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('filesSelectedDefault')

$button.appendChild($status)
Expand All @@ -117,11 +117,12 @@ export class FileUpload extends ConfigurableComponent {
$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'
'govuk-button govuk-button--secondary govuk-file-upload-button__pseudo-button'
buttonSpan.innerText = this.i18n.t('selectFilesButton')

containerSpan.appendChild(buttonSpan)
Expand All @@ -131,7 +132,8 @@ export class FileUpload extends ConfigurableComponent {
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('instruction')

containerSpan.appendChild(instructionSpan)
Expand Down Expand Up @@ -227,10 +229,10 @@ export class FileUpload extends ConfigurableComponent {
// to avoid repeated announcements on NVDA (2024.4) + Firefox (133)
if (
!this.$button.classList.contains(
'govuk-file-upload__button--dragging'
'govuk-file-upload-button--dragging'
)
) {
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')
this.$announcements.innerText = this.i18n.t('dropZoneEntered')
}
Expand All @@ -240,7 +242,7 @@ export class FileUpload extends ConfigurableComponent {
// left the drop zone when they enter the page but haven't reached yet
// the file upload component
if (
this.$button.classList.contains('govuk-file-upload__button--dragging')
this.$button.classList.contains('govuk-file-upload-button--dragging')
) {
this.hideDropZone()
}
Expand All @@ -252,7 +254,7 @@ export class FileUpload extends ConfigurableComponent {
* Hides the dropzone once user has dropped files on the `<input>`
*/
hideDropZone() {
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')
this.$announcements.innerText = this.i18n.t('dropZoneLeft')
}
Expand All @@ -266,7 +268,7 @@ export class FileUpload extends ConfigurableComponent {
if (fileCount === 0) {
// If there are no files, show the default selection text
this.$status.innerText = this.i18n.t('filesSelectedDefault')
this.$button.classList.add('govuk-file-upload__button--empty')
this.$button.classList.add('govuk-file-upload-button--empty')
} else {
if (
// If there is 1 file, just show the file name
Expand All @@ -280,7 +282,7 @@ export class FileUpload extends ConfigurableComponent {
})
}

this.$button.classList.remove('govuk-file-upload__button--empty')
this.$button.classList.remove('govuk-file-upload-button--empty')
}
}

Expand Down
16 changes: 8 additions & 8 deletions packages/govuk-frontend/src/govuk/components/file-upload/file-upload.puppeteer.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,9 +8,9 @@ const { getExamples } = require('@govuk-frontend/lib/components')

const inputSelector = '.govuk-file-upload'
const wrapperSelector = '.govuk-drop-zone'
const buttonSelector = '.govuk-file-upload__button'
const statusSelector = '.govuk-file-upload__status'
const pseudoButtonSelector = '.govuk-file-upload__pseudo-button'
const buttonSelector = '.govuk-file-upload-button'
const statusSelector = '.govuk-file-upload-button__status'
const pseudoButtonSelector = '.govuk-file-upload-button__pseudo-button'

describe('/components/file-upload', () => {
let examples
Expand Down Expand Up @@ -255,9 +255,9 @@ describe('/components/file-upload', () => {
}

const selectorDropzoneVisible =
'.govuk-file-upload__button.govuk-file-upload__button--dragging'
'.govuk-file-upload-button.govuk-file-upload-button--dragging'
const selectorDropzoneHidden =
'.govuk-file-upload__button:not(.govuk-file-upload__button--dragging)'
'.govuk-file-upload-button:not(.govuk-file-upload-button--dragging)'

beforeEach(async () => {
await render(page, 'file-upload', examples.enhanced)
Expand Down Expand Up @@ -350,7 +350,7 @@ describe('/components/file-upload', () => {
it('includes the label, the status, the pseudo button and instruction', async () => {
await render(page, 'file-upload', examples.enhanced)

const $element = await page.$('.govuk-file-upload__button')
const $element = await page.$('.govuk-file-upload-button')

const accessibleName = await getAccessibleName(page, $element)
await expect(accessibleName.replaceAll(/\s+/g, ' ')).toBe(
Expand All @@ -361,7 +361,7 @@ describe('/components/file-upload', () => {
it('includes the label, file name, pseudo button and instruction once a file is selected', async () => {
await render(page, 'file-upload', examples.enhanced)

const $element = await page.$('.govuk-file-upload__button')
const $element = await page.$('.govuk-file-upload-button')

const [fileChooser] = await Promise.all([
page.waitForFileChooser(),
Expand All @@ -384,7 +384,7 @@ describe('/components/file-upload', () => {
}
})

const $element = await page.$('.govuk-file-upload__button')
const $element = await page.$('.govuk-file-upload-button')

const [fileChooser] = await Promise.all([
page.waitForFileChooser(),
Expand Down

0 comments on commit ed38aa7

Please sign in to comment.