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

Add bottom-padding to sign-in and sign-up footer #778

Merged
merged 5 commits into from
Nov 18, 2021
Merged

Add bottom-padding to sign-in and sign-up footer #778

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
e20011b
Add default margin below the router footers
Nov 18, 2021
76aaf48
Apply footer styles to angular
Nov 18, 2021
cb0d2b0
Apply footer styles to vue
Nov 18, 2021
deada01
Remove non-overridden default header/footer style
Nov 18, 2021
b62f219
Remove data-amplify-footer off base-footer
Nov 18, 2021
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
10 changes: 3 additions & 7 deletions ...ar/src/lib/components/authenticator/components/authenticator/authenticator.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,7 @@
<div data-amplify-authenticator [attr.data-variation]="variation">
<div data-amplify-container>
<div data-amplify-header>
<amplify-slot name="header" [context]="context"></amplify-slot>
</div>
<div data-amplify-body>
<amplify-slot name="header" [context]="context"></amplify-slot>
<div data-amplify-router>
Comment on lines +3 to +4
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No longer shipping default styles as discussed

<amplify-tabs
(tabChange)="onTabChange()"
*ngIf="route === 'signIn' || route === 'signUp'"
Expand Down Expand Up @@ -103,9 +101,7 @@
</amplify-slot>
</div>

<div data-amplify-footer>
<amplify-slot name="footer" [context]="context"></amplify-slot>
</div>
<amplify-slot name="footer" [context]="context"></amplify-slot>
</div>
</div>

Expand Down
22 changes: 12 additions & 10 deletions ...cts/ui-angular/src/lib/components/authenticator/components/sign-in/sign-in.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,15 +27,17 @@
</form>

<amplify-slot name="sign-in-footer" [context]="context">
<button
amplify-button
fontWeight="normal"
size="small"
variation="link"
fullWidth="true"
(click)="authenticator.toResetPassword()"
>
{{ forgotPasswordText }}
</button>
<div data-amplify-footer>
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We use default styles under the slot, so that these opinionated slots are gone if customers override it.

One cool thing they can do is to put data-amplify-footer, and they'll get back the styles!

<button
amplify-button
fontWeight="normal"
size="small"
variation="link"
fullWidth="true"
(click)="authenticator.toResetPassword()"
>
{{ forgotPasswordText }}
</button>
</div>
</amplify-slot>
</div>
2 changes: 1 addition & 1 deletion packages/react/src/components/Authenticator/Router/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@ export function Router({
<View data-amplify-container="">
<Header />

<View data-amplify-body="">
<View data-amplify-router="">
Copy link
Contributor Author

@wlee221 wlee221 Nov 18, 2021 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Changed naming for clarity/declarative name

{(() => {
switch (route) {
case 'idle':
Expand Down
3 changes: 1 addition & 2 deletions packages/react/src/components/Authenticator/SignIn/SignIn.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -77,7 +77,6 @@ export function SignIn() {
</Button>
</Flex>
</form>

<Footer />
</View>
);
Expand All @@ -88,7 +87,7 @@ SignIn.Footer = () => {
const { toResetPassword } = useAuthenticator();

return (
<View textAlign="center">
<View data-amplify-footer="">
<Button
fontWeight="normal"
onClick={toResetPassword}
Expand Down
11 changes: 5 additions & 6 deletions packages/ui/src/theme/css/component/authenticator.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,14 +42,13 @@
}
}

[data-amplify-authenticator] [data-amplify-container] > {
[data-amplify-header],
[data-amplify-footer] {
text-align: center;
}
// footers inside each screen should have some margin below it
[data-amplify-authenticator] [data-amplify-router] [data-amplify-footer] {
padding-bottom: var(--amplify-space-medium);
text-align: center;
}

[data-amplify-authenticator] [data-amplify-container] > [data-amplify-body] {
[data-amplify-authenticator] [data-amplify-router] {
background-color: var(--amplify-colors-background-primary);
box-shadow: var(--amplify-shadows-medium);
}
Expand Down
10 changes: 3 additions & 7 deletions packages/vue/src/components/authenticator.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -203,10 +203,8 @@ watch(
v-if="!state?.matches('authenticated')"
>
<div data-amplify-container>
<div data-amplify-header>
<slot name="header"> </slot>
</div>
<div data-amplify-body>
<slot name="header"> </slot>
<div data-amplify-router>
<base-two-tabs
v-if="actorState?.matches('signIn') || actorState?.matches('signUp')"
>
Expand Down Expand Up @@ -444,9 +442,7 @@ watch(
</template>
</confirm-verify-user>
</div>
<div data-amplify-footer>
<slot name="footer"></slot>
</div>
<slot name="footer"></slot>
</div>
</div>

Expand Down
2 changes: 1 addition & 1 deletion packages/vue/src/components/primitives/base-footer.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
name="footert"
:slotData="mySlots.default && mySlots.default()"
>
<footer v-bind="$attrs" data-amplify-footer=""><slot></slot></footer>
<footer v-bind="$attrs"><slot></slot></footer>
</slot>
</template>

Expand Down
32 changes: 20 additions & 12 deletions packages/vue/src/components/sign-in.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -100,7 +100,13 @@ const onForgotPasswordClicked = (): void => {

<user-name-alias :userNameAlias="true" />
<base-wrapper
class=" amplify-flex amplify-field amplify-textfield amplify-passwordfield password-field"
class="
amplify-flex
amplify-field
amplify-textfield
amplify-passwordfield
password-field
"
style="flex-direction: column"
>
<password-control
Expand Down Expand Up @@ -135,17 +141,19 @@ const onForgotPasswordClicked = (): void => {

<base-footer>
<slot name="footer">
<amplify-button
@click="onForgotPasswordClicked"
class="amplify-field-group__control"
data-fullwidth="true"
data-size="small"
data-variation="link"
style="font-weight: normal"
type="button"
>
{{ forgotYourPasswordLink }}
</amplify-button>
<div data-amplify-footer>
<amplify-button
@click="onForgotPasswordClicked"
class="amplify-field-group__control"
data-fullwidth="true"
data-size="small"
data-variation="link"
style="font-weight: normal"
type="button"
>
{{ forgotYourPasswordLink }}
</amplify-button>
</div>
</slot>
</base-footer>
</slot>
Expand Down