mirror of
https://gitlab.nic.cz/turris/reforis/foris-js.git
synced 2024-12-25 00:11:36 +01:00
Merge branch 'fix-button-spinner' into 'dev'
Button: Fix loading state & button's layout See merge request turris/reforis/foris-js!211
This commit is contained in:
commit
80619fab3c
|
@ -1,5 +1,5 @@
|
|||
/*
|
||||
* Copyright (C) 2019 CZ.NIC z.s.p.o. (http://www.nic.cz/)
|
||||
* Copyright (C) 2019-2023 CZ.NIC z.s.p.o. (https://www.nic.cz/)
|
||||
*
|
||||
* This is free software, licensed under the GNU General Public License v3.
|
||||
* See /LICENSE for more information.
|
||||
|
@ -31,24 +31,25 @@ export function Button({
|
|||
children,
|
||||
...props
|
||||
}) {
|
||||
let buttonClass = className ? `btn ${className}` : "btn btn-primary ";
|
||||
let buttonClass = className ? `btn ${className}` : "btn btn-primary";
|
||||
if (forisFormSize) {
|
||||
buttonClass = `${buttonClass} col-sm-12 col-md-3 col-lg-2`;
|
||||
}
|
||||
|
||||
const span = loading ? (
|
||||
<span
|
||||
className="spinner-border spinner-border-sm"
|
||||
role="status"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
) : null;
|
||||
|
||||
return (
|
||||
<button type="button" className={buttonClass} {...props}>
|
||||
{span}
|
||||
{span ? " " : null}
|
||||
{children}
|
||||
<button
|
||||
type="button"
|
||||
className={`${buttonClass} d-inline-flex justify-content-center align-items-center`}
|
||||
{...props}
|
||||
>
|
||||
{loading && (
|
||||
<span
|
||||
className="spinner-border spinner-border-sm mr-1"
|
||||
role="status"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
)}
|
||||
<span>{children}</span>
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -31,3 +31,7 @@
|
|||
.spinner-fs-wrapper .spinner-text {
|
||||
margin: 1rem;
|
||||
}
|
||||
|
||||
.spinner-border-sm {
|
||||
min-width: 16px;
|
||||
}
|
||||
|
|
|
@ -2,33 +2,38 @@
|
|||
|
||||
exports[`<Button /> Render button correctly 1`] = `
|
||||
<button
|
||||
class="btn btn-primary "
|
||||
class="btn btn-primary d-inline-flex justify-content-center align-items-center"
|
||||
type="button"
|
||||
>
|
||||
Test Button
|
||||
<span>
|
||||
Test Button
|
||||
</span>
|
||||
</button>
|
||||
`;
|
||||
|
||||
exports[`<Button /> Render button with custom classes 1`] = `
|
||||
<button
|
||||
class="btn one two three"
|
||||
class="btn one two three d-inline-flex justify-content-center align-items-center"
|
||||
type="button"
|
||||
>
|
||||
Test Button
|
||||
<span>
|
||||
Test Button
|
||||
</span>
|
||||
</button>
|
||||
`;
|
||||
|
||||
exports[`<Button /> Render button with spinner 1`] = `
|
||||
<button
|
||||
class="btn btn-primary "
|
||||
class="btn btn-primary d-inline-flex justify-content-center align-items-center"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="spinner-border spinner-border-sm"
|
||||
class="spinner-border spinner-border-sm mr-1"
|
||||
role="status"
|
||||
/>
|
||||
|
||||
Test Button
|
||||
<span>
|
||||
Test Button
|
||||
</span>
|
||||
</button>
|
||||
`;
|
||||
|
|
|
@ -301,10 +301,12 @@ exports[`<WiFiSettings/> Snapshot both modules disabled. 1`] = `
|
|||
class="text-right"
|
||||
>
|
||||
<button
|
||||
class="btn btn-primary col-sm-12 col-md-3 col-lg-2"
|
||||
class="btn btn-primary col-sm-12 col-md-3 col-lg-2 d-inline-flex justify-content-center align-items-center"
|
||||
type="submit"
|
||||
>
|
||||
Save
|
||||
<span>
|
||||
Save
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
|
@ -322,10 +324,12 @@ exports[`<WiFiSettings/> Snapshot both modules disabled. 1`] = `
|
|||
class="text-right"
|
||||
>
|
||||
<button
|
||||
class="btn btn-primary col-sm-12 col-md-3 col-lg-2"
|
||||
class="btn btn-primary col-sm-12 col-md-3 col-lg-2 d-inline-flex justify-content-center align-items-center"
|
||||
type="button"
|
||||
>
|
||||
Reset Wi-Fi Settings
|
||||
<span>
|
||||
Reset Wi-Fi Settings
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -435,13 +439,13 @@ exports[`<WiFiSettings/> Snapshot guest network. 1`] = `
|
|||
class=\\"text-right\\"
|
||||
>
|
||||
<button
|
||||
class=\\"btn btn-primary col-sm-12 col-md-3 col-lg-2\\"
|
||||
class=\\"btn btn-primary col-sm-12 col-md-3 col-lg-2 d-inline-flex justify-content-center align-items-center\\"
|
||||
+ disabled=\\"\\"
|
||||
type=\\"submit\\"
|
||||
>
|
||||
Save
|
||||
</button>
|
||||
</div>"
|
||||
<span>
|
||||
Save
|
||||
</span>"
|
||||
`;
|
||||
|
||||
exports[`<WiFiSettings/> Snapshot one module enabled. 1`] = `
|
||||
|
|
|
@ -46,16 +46,20 @@ exports[`<RebootButton/> Render modal. 1`] = `
|
|||
class="modal-footer"
|
||||
>
|
||||
<button
|
||||
class="btn btn-primary "
|
||||
class="btn btn-primary d-inline-flex justify-content-center align-items-center"
|
||||
type="button"
|
||||
>
|
||||
Cancel
|
||||
<span>
|
||||
Cancel
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
class="btn btn-danger"
|
||||
class="btn btn-danger d-inline-flex justify-content-center align-items-center"
|
||||
type="button"
|
||||
>
|
||||
Confirm reboot
|
||||
<span>
|
||||
Confirm reboot
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -63,10 +67,12 @@ exports[`<RebootButton/> Render modal. 1`] = `
|
|||
</div>
|
||||
</div>
|
||||
<button
|
||||
class="btn btn-danger"
|
||||
class="btn btn-danger d-inline-flex justify-content-center align-items-center"
|
||||
type="button"
|
||||
>
|
||||
Reboot
|
||||
<span>
|
||||
Reboot
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
`;
|
||||
|
@ -77,10 +83,12 @@ exports[`<RebootButton/> Render. 1`] = `
|
|||
id="modal-container"
|
||||
/>
|
||||
<button
|
||||
class="btn btn-danger"
|
||||
class="btn btn-danger d-inline-flex justify-content-center align-items-center"
|
||||
type="button"
|
||||
>
|
||||
Reboot
|
||||
<span>
|
||||
Reboot
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
`;
|
||||
|
|
|
@ -3,17 +3,18 @@
|
|||
exports[`<SubmitButton/> Render load 1`] = `
|
||||
<div>
|
||||
<button
|
||||
class="btn btn-primary col-sm-12 col-md-3 col-lg-2"
|
||||
class="btn btn-primary col-sm-12 col-md-3 col-lg-2 d-inline-flex justify-content-center align-items-center"
|
||||
disabled=""
|
||||
type="submit"
|
||||
>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="spinner-border spinner-border-sm"
|
||||
class="spinner-border spinner-border-sm mr-1"
|
||||
role="status"
|
||||
/>
|
||||
|
||||
Load settings
|
||||
<span>
|
||||
Load settings
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
`;
|
||||
|
@ -21,10 +22,12 @@ exports[`<SubmitButton/> Render load 1`] = `
|
|||
exports[`<SubmitButton/> Render ready 1`] = `
|
||||
<div>
|
||||
<button
|
||||
class="btn btn-primary col-sm-12 col-md-3 col-lg-2"
|
||||
class="btn btn-primary col-sm-12 col-md-3 col-lg-2 d-inline-flex justify-content-center align-items-center"
|
||||
type="submit"
|
||||
>
|
||||
Save
|
||||
<span>
|
||||
Save
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
`;
|
||||
|
@ -32,17 +35,18 @@ exports[`<SubmitButton/> Render ready 1`] = `
|
|||
exports[`<SubmitButton/> Render saving 1`] = `
|
||||
<div>
|
||||
<button
|
||||
class="btn btn-primary col-sm-12 col-md-3 col-lg-2"
|
||||
class="btn btn-primary col-sm-12 col-md-3 col-lg-2 d-inline-flex justify-content-center align-items-center"
|
||||
disabled=""
|
||||
type="submit"
|
||||
>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="spinner-border spinner-border-sm"
|
||||
class="spinner-border spinner-border-sm mr-1"
|
||||
role="status"
|
||||
/>
|
||||
|
||||
Updating
|
||||
<span>
|
||||
Updating
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
`;
|
||||
|
|
Loading…
Reference in New Issue
Block a user