From ecae3f9c4852ba488ab5a0777dae2f7a9c45ddc0 Mon Sep 17 00:00:00 2001 From: Steve Klebanoff Date: Mon, 5 Nov 2018 17:19:37 -0800 Subject: wip: full display of mobile hard coded --- packages/instant/src/components/ui/container.tsx | 3 +++ packages/instant/src/components/ui/flex.tsx | 2 ++ packages/instant/src/components/ui/overlay.tsx | 4 ++-- 3 files changed, 7 insertions(+), 2 deletions(-) (limited to 'packages/instant/src/components/ui') diff --git a/packages/instant/src/components/ui/container.tsx b/packages/instant/src/components/ui/container.tsx index a0a187e5f..228085f51 100644 --- a/packages/instant/src/components/ui/container.tsx +++ b/packages/instant/src/components/ui/container.tsx @@ -33,13 +33,16 @@ export interface ContainerProps { cursor?: string; overflow?: string; darkenOnHover?: boolean; + flexGrow?: string | number; } +// TODO Dont commit flex grow export const Container = styled.div < ContainerProps > ` box-sizing: border-box; + ${props => cssRuleIfExists(props, 'flex-grow')} ${props => cssRuleIfExists(props, 'display')} ${props => cssRuleIfExists(props, 'position')} ${props => cssRuleIfExists(props, 'top')} diff --git a/packages/instant/src/components/ui/flex.tsx b/packages/instant/src/components/ui/flex.tsx index 29c6511bb..57abd8b5b 100644 --- a/packages/instant/src/components/ui/flex.tsx +++ b/packages/instant/src/components/ui/flex.tsx @@ -10,6 +10,7 @@ export interface FlexProps { height?: string; backgroundColor?: ColorOption; inline?: boolean; + flexGrow?: number | string; } export const Flex = @@ -19,6 +20,7 @@ export const Flex = display: ${props => (props.inline ? 'inline-flex' : 'flex')}; flex-direction: ${props => props.direction}; flex-wrap: ${props => props.flexWrap}; + ${props => cssRuleIfExists(props, 'flexGrow')} justify-content: ${props => props.justify}; align-items: ${props => props.align}; ${props => cssRuleIfExists(props, 'width')} diff --git a/packages/instant/src/components/ui/overlay.tsx b/packages/instant/src/components/ui/overlay.tsx index f1706c874..e930ffacd 100644 --- a/packages/instant/src/components/ui/overlay.tsx +++ b/packages/instant/src/components/ui/overlay.tsx @@ -14,11 +14,11 @@ export interface OverlayProps { } const PlainOverlay: React.StatelessComponent = ({ children, className, onClose }) => ( - + -
{children}
+ {children} ); export const Overlay = styled(PlainOverlay)` -- cgit v1.2.3 From 188e317504ba788c8a287d4b8da2ed2d6745f97e Mon Sep 17 00:00:00 2001 From: Steve Klebanoff Date: Mon, 5 Nov 2018 17:23:09 -0800 Subject: wip: height 100% --- packages/instant/src/components/ui/overlay.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) (limited to 'packages/instant/src/components/ui') diff --git a/packages/instant/src/components/ui/overlay.tsx b/packages/instant/src/components/ui/overlay.tsx index e930ffacd..c4778363d 100644 --- a/packages/instant/src/components/ui/overlay.tsx +++ b/packages/instant/src/components/ui/overlay.tsx @@ -18,7 +18,9 @@ const PlainOverlay: React.StatelessComponent = ({ children, classN - {children} + + {children} + ); export const Overlay = styled(PlainOverlay)` -- cgit v1.2.3 From f6487122d1ed3dea731adcb6a08165b44c887282 Mon Sep 17 00:00:00 2001 From: Steve Klebanoff Date: Tue, 6 Nov 2018 09:26:45 -0800 Subject: Putting back in old heights as not necessary for full bleed --- packages/instant/src/components/ui/overlay.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'packages/instant/src/components/ui') diff --git a/packages/instant/src/components/ui/overlay.tsx b/packages/instant/src/components/ui/overlay.tsx index c4778363d..11496e895 100644 --- a/packages/instant/src/components/ui/overlay.tsx +++ b/packages/instant/src/components/ui/overlay.tsx @@ -14,7 +14,7 @@ export interface OverlayProps { } const PlainOverlay: React.StatelessComponent = ({ children, className, onClose }) => ( - + -- cgit v1.2.3 From a2bc62b17a773625220817c79265c017cb61979f Mon Sep 17 00:00:00 2001 From: Steve Klebanoff Date: Tue, 6 Nov 2018 10:26:39 -0800 Subject: feat(instant): when on mobile, show mobile specific styling that takes up whole screen --- packages/instant/src/components/ui/container.tsx | 17 +++++++++++++++++ packages/instant/src/components/ui/flex.tsx | 18 ++++++++++++++++++ packages/instant/src/components/ui/overlay.tsx | 2 +- 3 files changed, 36 insertions(+), 1 deletion(-) (limited to 'packages/instant/src/components/ui') diff --git a/packages/instant/src/components/ui/container.tsx b/packages/instant/src/components/ui/container.tsx index 228085f51..36d7cf2ec 100644 --- a/packages/instant/src/components/ui/container.tsx +++ b/packages/instant/src/components/ui/container.tsx @@ -1,5 +1,7 @@ +import * as _ from 'lodash'; import { darken } from 'polished'; +import { media } from '../../style/media'; import { ColorOption, styled } from '../../style/theme'; import { cssRuleIfExists } from '../../style/util'; @@ -34,8 +36,22 @@ export interface ContainerProps { overflow?: string; darkenOnHover?: boolean; flexGrow?: string | number; + + smallWidth?: string; + smallHeight?: string; } +const mediaStyles = (props: ContainerProps) => { + if (!_.some([props.smallWidth, props.smallHeight])) { + return ''; + } + + return media.small` + width: ${props.smallWidth || props.width || 'auto'} + height: ${props.smallHeight || props.height || 'auto'} + `; +}; + // TODO Dont commit flex grow export const Container = styled.div < @@ -68,6 +84,7 @@ export const Container = ${props => cssRuleIfExists(props, 'cursor')} ${props => cssRuleIfExists(props, 'overflow')} ${props => (props.hasBoxShadow ? `box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1)` : '')}; + ${props => mediaStyles(props)} background-color: ${props => (props.backgroundColor ? props.theme[props.backgroundColor] : 'none')}; border-color: ${props => (props.borderColor ? props.theme[props.borderColor] : 'none')}; &:hover { diff --git a/packages/instant/src/components/ui/flex.tsx b/packages/instant/src/components/ui/flex.tsx index 57abd8b5b..f85d45e36 100644 --- a/packages/instant/src/components/ui/flex.tsx +++ b/packages/instant/src/components/ui/flex.tsx @@ -1,3 +1,6 @@ +import * as _ from 'lodash'; + +import { media } from '../../style/media'; import { ColorOption, styled } from '../../style/theme'; import { cssRuleIfExists } from '../../style/util'; @@ -11,8 +14,22 @@ export interface FlexProps { backgroundColor?: ColorOption; inline?: boolean; flexGrow?: number | string; + + smallWidth?: string; + smallHeight?: string; } +const mediaStyles = (props: FlexProps) => { + if (!_.some([props.smallWidth, props.smallHeight])) { + return ''; + } + + return media.small` + width: ${props.smallWidth || props.width || 'auto'} + height: ${props.smallHeight || props.height || 'auto'} + `; +}; + export const Flex = styled.div < FlexProps > @@ -26,6 +43,7 @@ export const Flex = ${props => cssRuleIfExists(props, 'width')} ${props => cssRuleIfExists(props, 'height')} background-color: ${props => (props.backgroundColor ? props.theme[props.backgroundColor] : 'none')}; + ${props => mediaStyles(props)} `; Flex.defaultProps = { diff --git a/packages/instant/src/components/ui/overlay.tsx b/packages/instant/src/components/ui/overlay.tsx index 11496e895..12bde1f2b 100644 --- a/packages/instant/src/components/ui/overlay.tsx +++ b/packages/instant/src/components/ui/overlay.tsx @@ -18,7 +18,7 @@ const PlainOverlay: React.StatelessComponent = ({ children, classN - + {children} -- cgit v1.2.3 From 006a13448fc5d79aa8f6d04ac3f471e430dcfa89 Mon Sep 17 00:00:00 2001 From: Steve Klebanoff Date: Tue, 6 Nov 2018 14:05:49 -0800 Subject: new MediaChoice approach for setting conditional css properties --- packages/instant/src/components/ui/container.tsx | 23 +++++------------------ packages/instant/src/components/ui/flex.tsx | 23 +++++------------------ packages/instant/src/components/ui/overlay.tsx | 2 +- 3 files changed, 11 insertions(+), 37 deletions(-) (limited to 'packages/instant/src/components/ui') diff --git a/packages/instant/src/components/ui/container.tsx b/packages/instant/src/components/ui/container.tsx index 36d7cf2ec..0e518be88 100644 --- a/packages/instant/src/components/ui/container.tsx +++ b/packages/instant/src/components/ui/container.tsx @@ -1,7 +1,7 @@ import * as _ from 'lodash'; import { darken } from 'polished'; -import { media } from '../../style/media'; +import { MediaChoice, stylesForMedia } from '../../style/media'; import { ColorOption, styled } from '../../style/theme'; import { cssRuleIfExists } from '../../style/util'; @@ -12,8 +12,8 @@ export interface ContainerProps { right?: string; bottom?: string; left?: string; - width?: string; - height?: string; + width?: MediaChoice; + height?: MediaChoice; maxWidth?: string; margin?: string; marginTop?: string; @@ -36,22 +36,8 @@ export interface ContainerProps { overflow?: string; darkenOnHover?: boolean; flexGrow?: string | number; - - smallWidth?: string; - smallHeight?: string; } -const mediaStyles = (props: ContainerProps) => { - if (!_.some([props.smallWidth, props.smallHeight])) { - return ''; - } - - return media.small` - width: ${props.smallWidth || props.width || 'auto'} - height: ${props.smallHeight || props.height || 'auto'} - `; -}; - // TODO Dont commit flex grow export const Container = styled.div < @@ -84,7 +70,8 @@ export const Container = ${props => cssRuleIfExists(props, 'cursor')} ${props => cssRuleIfExists(props, 'overflow')} ${props => (props.hasBoxShadow ? `box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1)` : '')}; - ${props => mediaStyles(props)} + ${props => stylesForMedia('width', props.width || 'auto')} + ${props => stylesForMedia('height', props.height || 'auto')} background-color: ${props => (props.backgroundColor ? props.theme[props.backgroundColor] : 'none')}; border-color: ${props => (props.borderColor ? props.theme[props.borderColor] : 'none')}; &:hover { diff --git a/packages/instant/src/components/ui/flex.tsx b/packages/instant/src/components/ui/flex.tsx index f85d45e36..c3d643a79 100644 --- a/packages/instant/src/components/ui/flex.tsx +++ b/packages/instant/src/components/ui/flex.tsx @@ -1,6 +1,6 @@ import * as _ from 'lodash'; -import { media } from '../../style/media'; +import { MediaChoice, stylesForMedia } from '../../style/media'; import { ColorOption, styled } from '../../style/theme'; import { cssRuleIfExists } from '../../style/util'; @@ -9,27 +9,13 @@ export interface FlexProps { flexWrap?: 'wrap' | 'nowrap'; justify?: 'flex-start' | 'center' | 'space-around' | 'space-between' | 'space-evenly' | 'flex-end'; align?: 'flex-start' | 'center' | 'space-around' | 'space-between' | 'space-evenly' | 'flex-end'; - width?: string; - height?: string; + width?: MediaChoice; + height?: MediaChoice; backgroundColor?: ColorOption; inline?: boolean; flexGrow?: number | string; - - smallWidth?: string; - smallHeight?: string; } -const mediaStyles = (props: FlexProps) => { - if (!_.some([props.smallWidth, props.smallHeight])) { - return ''; - } - - return media.small` - width: ${props.smallWidth || props.width || 'auto'} - height: ${props.smallHeight || props.height || 'auto'} - `; -}; - export const Flex = styled.div < FlexProps > @@ -43,7 +29,8 @@ export const Flex = ${props => cssRuleIfExists(props, 'width')} ${props => cssRuleIfExists(props, 'height')} background-color: ${props => (props.backgroundColor ? props.theme[props.backgroundColor] : 'none')}; - ${props => mediaStyles(props)} + ${props => stylesForMedia('width', props.width || 'auto')} + ${props => stylesForMedia('height', props.height || 'auto')} `; Flex.defaultProps = { diff --git a/packages/instant/src/components/ui/overlay.tsx b/packages/instant/src/components/ui/overlay.tsx index 12bde1f2b..0fde995e0 100644 --- a/packages/instant/src/components/ui/overlay.tsx +++ b/packages/instant/src/components/ui/overlay.tsx @@ -18,7 +18,7 @@ const PlainOverlay: React.StatelessComponent = ({ children, classN - + {children} -- cgit v1.2.3 From 897c15fd2850d987e7fae8e578cf86e85b697e1f Mon Sep 17 00:00:00 2001 From: Steve Klebanoff Date: Tue, 6 Nov 2018 14:07:55 -0800 Subject: Get rid of unused properties --- packages/instant/src/components/ui/container.tsx | 2 -- packages/instant/src/components/ui/flex.tsx | 2 -- 2 files changed, 4 deletions(-) (limited to 'packages/instant/src/components/ui') diff --git a/packages/instant/src/components/ui/container.tsx b/packages/instant/src/components/ui/container.tsx index 0e518be88..d276e0603 100644 --- a/packages/instant/src/components/ui/container.tsx +++ b/packages/instant/src/components/ui/container.tsx @@ -51,8 +51,6 @@ export const Container = ${props => cssRuleIfExists(props, 'right')} ${props => cssRuleIfExists(props, 'bottom')} ${props => cssRuleIfExists(props, 'left')} - ${props => cssRuleIfExists(props, 'width')} - ${props => cssRuleIfExists(props, 'height')} ${props => cssRuleIfExists(props, 'max-width')} ${props => cssRuleIfExists(props, 'margin')} ${props => cssRuleIfExists(props, 'margin-top')} diff --git a/packages/instant/src/components/ui/flex.tsx b/packages/instant/src/components/ui/flex.tsx index c3d643a79..ef005db40 100644 --- a/packages/instant/src/components/ui/flex.tsx +++ b/packages/instant/src/components/ui/flex.tsx @@ -26,8 +26,6 @@ export const Flex = ${props => cssRuleIfExists(props, 'flexGrow')} justify-content: ${props => props.justify}; align-items: ${props => props.align}; - ${props => cssRuleIfExists(props, 'width')} - ${props => cssRuleIfExists(props, 'height')} background-color: ${props => (props.backgroundColor ? props.theme[props.backgroundColor] : 'none')}; ${props => stylesForMedia('width', props.width || 'auto')} ${props => stylesForMedia('height', props.height || 'auto')} -- cgit v1.2.3 From d941901e3281fdb2fd0f9a9b3b23947f05b1c56e Mon Sep 17 00:00:00 2001 From: Steve Klebanoff Date: Tue, 6 Nov 2018 14:26:15 -0800 Subject: Hide X when small --- packages/instant/src/components/ui/container.tsx | 4 ++-- packages/instant/src/components/ui/overlay.tsx | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) (limited to 'packages/instant/src/components/ui') diff --git a/packages/instant/src/components/ui/container.tsx b/packages/instant/src/components/ui/container.tsx index d276e0603..9ec875cf3 100644 --- a/packages/instant/src/components/ui/container.tsx +++ b/packages/instant/src/components/ui/container.tsx @@ -6,7 +6,7 @@ import { ColorOption, styled } from '../../style/theme'; import { cssRuleIfExists } from '../../style/util'; export interface ContainerProps { - display?: string; + display?: MediaChoice; position?: string; top?: string; right?: string; @@ -45,7 +45,6 @@ export const Container = ` box-sizing: border-box; ${props => cssRuleIfExists(props, 'flex-grow')} - ${props => cssRuleIfExists(props, 'display')} ${props => cssRuleIfExists(props, 'position')} ${props => cssRuleIfExists(props, 'top')} ${props => cssRuleIfExists(props, 'right')} @@ -68,6 +67,7 @@ export const Container = ${props => cssRuleIfExists(props, 'cursor')} ${props => cssRuleIfExists(props, 'overflow')} ${props => (props.hasBoxShadow ? `box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1)` : '')}; + ${props => stylesForMedia('display', props.display || 'initial')} ${props => stylesForMedia('width', props.width || 'auto')} ${props => stylesForMedia('height', props.height || 'auto')} background-color: ${props => (props.backgroundColor ? props.theme[props.backgroundColor] : 'none')}; diff --git a/packages/instant/src/components/ui/overlay.tsx b/packages/instant/src/components/ui/overlay.tsx index 0fde995e0..7110ee70f 100644 --- a/packages/instant/src/components/ui/overlay.tsx +++ b/packages/instant/src/components/ui/overlay.tsx @@ -15,7 +15,7 @@ export interface OverlayProps { const PlainOverlay: React.StatelessComponent = ({ children, className, onClose }) => ( - + -- cgit v1.2.3 From 9cc7090e28e3b26886f11d8e894073f69f30b854 Mon Sep 17 00:00:00 2001 From: Steve Klebanoff Date: Tue, 6 Nov 2018 14:56:42 -0800 Subject: remove old comment --- packages/instant/src/components/ui/container.tsx | 1 - 1 file changed, 1 deletion(-) (limited to 'packages/instant/src/components/ui') diff --git a/packages/instant/src/components/ui/container.tsx b/packages/instant/src/components/ui/container.tsx index 9ec875cf3..ce35971f1 100644 --- a/packages/instant/src/components/ui/container.tsx +++ b/packages/instant/src/components/ui/container.tsx @@ -38,7 +38,6 @@ export interface ContainerProps { flexGrow?: string | number; } -// TODO Dont commit flex grow export const Container = styled.div < ContainerProps > -- cgit v1.2.3 From d1444f228d20807382d7ae2eb87db998f5b878fc Mon Sep 17 00:00:00 2001 From: Steve Klebanoff Date: Tue, 6 Nov 2018 14:57:15 -0800 Subject: remove unused import --- packages/instant/src/components/ui/flex.tsx | 2 -- 1 file changed, 2 deletions(-) (limited to 'packages/instant/src/components/ui') diff --git a/packages/instant/src/components/ui/flex.tsx b/packages/instant/src/components/ui/flex.tsx index ef005db40..fd218b0cd 100644 --- a/packages/instant/src/components/ui/flex.tsx +++ b/packages/instant/src/components/ui/flex.tsx @@ -1,5 +1,3 @@ -import * as _ from 'lodash'; - import { MediaChoice, stylesForMedia } from '../../style/media'; import { ColorOption, styled } from '../../style/theme'; import { cssRuleIfExists } from '../../style/util'; -- cgit v1.2.3 From d59027f0bc3a906ba2ba542eaa6aa98042993216 Mon Sep 17 00:00:00 2001 From: Steve Klebanoff Date: Tue, 6 Nov 2018 15:02:44 -0800 Subject: remove unused dependecny --- packages/instant/src/components/ui/container.tsx | 1 - 1 file changed, 1 deletion(-) (limited to 'packages/instant/src/components/ui') diff --git a/packages/instant/src/components/ui/container.tsx b/packages/instant/src/components/ui/container.tsx index ce35971f1..cbb6a3a15 100644 --- a/packages/instant/src/components/ui/container.tsx +++ b/packages/instant/src/components/ui/container.tsx @@ -1,4 +1,3 @@ -import * as _ from 'lodash'; import { darken } from 'polished'; import { MediaChoice, stylesForMedia } from '../../style/media'; -- cgit v1.2.3 From c6e7ad5a53a267dfe1ca6ecf2b9d2252fbad18ea Mon Sep 17 00:00:00 2001 From: Steve Klebanoff Date: Wed, 7 Nov 2018 16:06:41 -0800 Subject: Small code review tweaks --- packages/instant/src/components/ui/container.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'packages/instant/src/components/ui') diff --git a/packages/instant/src/components/ui/container.tsx b/packages/instant/src/components/ui/container.tsx index cbb6a3a15..403751210 100644 --- a/packages/instant/src/components/ui/container.tsx +++ b/packages/instant/src/components/ui/container.tsx @@ -65,7 +65,7 @@ export const Container = ${props => cssRuleIfExists(props, 'cursor')} ${props => cssRuleIfExists(props, 'overflow')} ${props => (props.hasBoxShadow ? `box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1)` : '')}; - ${props => stylesForMedia('display', props.display || 'initial')} + ${props => props.display && stylesForMedia('display', props.display)} ${props => stylesForMedia('width', props.width || 'auto')} ${props => stylesForMedia('height', props.height || 'auto')} background-color: ${props => (props.backgroundColor ? props.theme[props.backgroundColor] : 'none')}; -- cgit v1.2.3