1
0
mirror of https://github.com/Unleash/unleash.git synced 2024-12-22 19:07:54 +01:00

feat: reverse source order of form control buttons.

this makes 'submit' or 'next' the first button you reach when tabbing
out of the control
This commit is contained in:
Thomas Heartman 2022-02-27 16:01:30 +01:00
parent 19e03e94e0
commit 5bc48076a2
2 changed files with 22 additions and 21 deletions

View File

@ -171,20 +171,6 @@ export const FeedbackWrapper = ({ seedData }) => {
></textarea> ></textarea>
<div className={styles['button-container']}> <div className={styles['button-container']}>
<button
className={styles['button-secondary']}
type="button"
onClick={stepForward}
>
Skip
</button>
<button
className={styles['button-secondary']}
type="button"
onClick={stepBack}
>
Back
</button>
<button <button
type="submit" type="submit"
onSubmit={(e) => { onSubmit={(e) => {
@ -197,6 +183,20 @@ export const FeedbackWrapper = ({ seedData }) => {
> >
Next Next
</button> </button>
<button
className={styles['button-secondary']}
type="button"
onClick={stepBack}
>
Back
</button>
<button
className={styles['button-secondary']}
type="button"
onClick={stepForward}
>
Skip
</button>
</div> </div>
</form> </form>
); );
@ -245,13 +245,6 @@ export const FeedbackWrapper = ({ seedData }) => {
</div> </div>
<div className={styles['button-container']}> <div className={styles['button-container']}>
<button
className={styles['button-secondary']}
type="button"
onClick={stepBack}
>
Back
</button>
<button <button
type="submit" type="submit"
onSubmit={(e) => { onSubmit={(e) => {
@ -262,6 +255,13 @@ export const FeedbackWrapper = ({ seedData }) => {
> >
Submit feedback Submit feedback
</button> </button>
<button
className={styles['button-secondary']}
type="button"
onClick={stepBack}
>
Back
</button>
</div> </div>
</form> </form>
); );

View File

@ -75,6 +75,7 @@
.button-container { .button-container {
margin-top: var(--row-gap); margin-top: var(--row-gap);
display: flex; display: flex;
flex-direction: row-reverse;
justify-content: end; justify-content: end;
gap: var(--element-horizontal-gap); gap: var(--element-horizontal-gap);
} }