Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

use output #5609

Draft
wants to merge 1 commit into
base: spike-enhanced-file-upload
Choose a base branch
from
Draft

use output #5609

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 18 additions & 0 deletions packages/govuk-frontend/src/govuk/components/file-upload/_index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -97,3 +97,21 @@
margin-left: govuk-spacing(2);
}
}

.govuk-file-upload:focus + .govuk-button {
background-color: $govuk-focus-colour;
}

.govuk-file-upload:disabled + .govuk-button {
opacity: (0.5);

&:hover {
background-color: govuk-colour("light-grey");
cursor: not-allowed;
}

&:active {
top: 0;
box-shadow: 0 $govuk-border-width-form-element 0 govuk-shade(govuk-colour("white"), 60%); // s0
}
}
42 changes: 4 additions & 38 deletions packages/govuk-frontend/src/govuk/components/file-upload/file-upload.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,18 +57,19 @@ export class FileUpload extends ConfigurableComponent {
$wrapper.className = 'govuk-file-upload-wrapper'

// Create the file selection button
const $button = document.createElement('button')
const $button = document.createElement('span')
$button.className =
'govuk-button govuk-button--secondary govuk-file-upload__button'
$button.type = 'button'
$button.innerText = this.i18n.t('selectFilesButton')
$button.setAttribute('role', 'button')
$button.setAttribute('aria-hidden', 'true')
$button.addEventListener('click', this.onClick.bind(this))

// 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.innerText = this.i18n.t('filesSelectedDefault')
$status.setAttribute('role', 'status')
$status.setAttribute('aria-hidden', 'true')

// Assemble these all together
$wrapper.insertAdjacentElement('beforeend', $button)
Expand All @@ -85,13 +86,6 @@ export class FileUpload extends ConfigurableComponent {
this.$button = $button
this.$status = $status

// Prevent the hidden input being tabbed to by keyboard users
this.$root.setAttribute('tabindex', '-1')

// Syncronise the `disabled` state between the button and underlying input
this.updateDisabledState()
this.observeDisabledState()

// Bind change event to the underlying input
this.$root.addEventListener('change', this.onChange.bind(this))

Expand Down Expand Up @@ -175,34 +169,6 @@ export class FileUpload extends ConfigurableComponent {
this.$wrapper.classList.remove('govuk-file-upload-wrapper--show-dropzone')
}

/**
* Create a mutation observer to check if the input's attributes altered.
*/
observeDisabledState() {
const observer = new MutationObserver((mutationList) => {
for (const mutation of mutationList) {
console.log('mutation', mutation)
if (
mutation.type === 'attributes' &&
mutation.attributeName === 'disabled'
) {
this.updateDisabledState()
}
}
})

observer.observe(this.$root, {
attributes: true
})
}

/**
* Synchronise the `disabled` state between the input and replacement button.
*/
updateDisabledState() {
this.$button.disabled = this.$root.disabled
}

/**
* Name for the component used when initialising using data-module attributes.
*/
Expand Down
Loading