-
Notifications
You must be signed in to change notification settings - Fork 63
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
5 changed files
with
163 additions
and
152 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,49 @@ | ||
| import { transparentize } from 'polished'; | ||
|
|
||
| import { css } from '@leafygreen-ui/emotion'; | ||
| import { Theme } from '@leafygreen-ui/lib'; | ||
| import { palette } from '@leafygreen-ui/palette'; | ||
|
|
||
| export const footerBaseStyle = css` | ||
| min-height: 92px; | ||
| width: 100%; | ||
| padding: 26px 24px; | ||
| display: flex; | ||
| align-items: center; | ||
| `; | ||
|
|
||
| export const footerThemeStyle: Record<Theme, string> = { | ||
| [Theme.Light]: css` | ||
| background-color: ${palette.white}; | ||
| box-shadow: 0px -1px 4px 0px ${transparentize(0.75, '#000000')}; | ||
| `, | ||
| [Theme.Dark]: css` | ||
| background-color: ${palette.black}; | ||
| border-top: 1px solid ${palette.gray.dark2}; | ||
| box-shadow: 0px -1px 4px 0px ${transparentize(0.75, '#000000')}; | ||
| `, | ||
| }; | ||
|
|
||
| export const contentStyle = css` | ||
| display: flex; | ||
| align-items: center; | ||
| gap: 8px; | ||
| width: 100%; | ||
| `; | ||
|
|
||
| export const flexEndContent = css` | ||
| margin-left: auto; | ||
| display: inline-flex; | ||
| align-items: center; | ||
| gap: inherit; | ||
| `; | ||
|
|
||
| export const bannerStyle = css` | ||
| flex-grow: 0; | ||
| padding-block: 7px; | ||
| max-width: 700px; | ||
| `; | ||
|
|
||
| export const buttonStyle = css` | ||
| white-space: nowrap; | ||
| `; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,98 @@ | ||
| import { ButtonProps } from '@leafygreen-ui/button'; | ||
| import { HTMLElementProps } from '@leafygreen-ui/lib'; | ||
|
|
||
| import { PrimaryButtonProps } from './PrimaryButton'; | ||
|
|
||
| type CustomButtonProps = Pick< | ||
| ButtonProps, | ||
| 'children' | 'leftGlyph' | 'onClick' | ||
| >; | ||
|
|
||
| export interface FormFooterProps extends HTMLElementProps<'footer'> { | ||
| /** | ||
| * The primary (right-most) button. | ||
| * Defined as a `<Button>` element, or as an object with the shape: | ||
| * | ||
| * ```ts | ||
| * interface PrimaryButtonProps { | ||
| * text: string; | ||
| * onClick?: React.MouseEventHandler<HTMLButtonElement>; | ||
| * variant?: 'primary' | 'danger'; | ||
| * disabled?: boolean; | ||
| * type?: 'button' | 'submit'; | ||
| * } | ||
| * ``` | ||
| * | ||
| * darkMode is handled internally so you do not have to pass the darkMode prop. | ||
| */ | ||
| primaryButton: React.ReactElement | PrimaryButtonProps; | ||
|
|
||
| /** | ||
| * The cancel button which will only appear if cancelButtonProps is defined. | ||
| * Customizable props include children, leftGlyph, and onClick. | ||
| * | ||
| * darkMode is handled internally so you do not have to pass the darkMode prop. | ||
| */ | ||
| cancelButtonProps?: CustomButtonProps; | ||
|
|
||
| /** | ||
| * The back button which will only appear if backButtonProps is defined. | ||
| * Customizable props include children, leftGlyph, and onClick. | ||
| * | ||
| * darkMode is handled internally so you do not have to pass the darkMode prop. | ||
| */ | ||
| backButtonProps?: CustomButtonProps; | ||
|
|
||
| /** | ||
| * Text for the cancel button. | ||
| * A cancel button will only appear if this text is defined. | ||
| * | ||
| * @default "Cancel" | ||
| * @deprecated since version 3.1.0 - use cancelButtonProps instead | ||
| */ | ||
| cancelButtonText?: string; | ||
|
|
||
| /** | ||
| * onClick callback for the cancel button | ||
| * | ||
| * @deprecated since version 3.1.0 - use cancelButtonProps instead | ||
| */ | ||
| onCancel?: React.MouseEventHandler<HTMLButtonElement>; | ||
|
|
||
| /** | ||
| * Text for the back button. A back button will only appear if text is defined. | ||
| * | ||
| * @deprecated since version 3.1.0 - use backButtonProps instead | ||
| */ | ||
| backButtonText?: string; | ||
|
|
||
| /** | ||
| * onClick callback for the back button | ||
| * | ||
| * @deprecated since version 3.1.0 - use backButtonProps instead | ||
| */ | ||
| onBackClick?: React.MouseEventHandler<HTMLButtonElement>; | ||
|
|
||
| /** | ||
| * Text within the error banner. The banner will only appear if an error message is defined. | ||
| */ | ||
| errorMessage?: string; | ||
|
|
||
| /** | ||
| * Styling prop for the content. | ||
| * Useful for setting left and right margins, or max-width | ||
| */ | ||
| contentClassName?: string; | ||
|
|
||
| /** | ||
| * Styling prop | ||
| */ | ||
| className?: string; | ||
|
|
||
| /** | ||
| * Determines whether or not the component will be rendered in dark theme. | ||
| * | ||
| * @default false | ||
| */ | ||
| darkMode?: boolean; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1 +1,2 @@ | ||
| export { default, type FormFooterProps } from './FormFooter'; | ||
| export { default } from './FormFooter'; | ||
| export { type FormFooterProps } from './FormFooter.types'; |