Skip to content
This repository has been archived by the owner on May 10, 2023. It is now read-only.

Commit

Permalink
native: Add filled variant to Input
Browse files Browse the repository at this point in the history
  • Loading branch information
@jxom
jxom committed Sep 16, 2021
1 parent 5188481 commit 2b6d582
Show file tree
Hide file tree
Showing 10 changed files with 185 additions and 75 deletions.
1 change: 1 addition & 0 deletions packages/bumbag-native/package.json
View file
Expand Up @@ -39,6 +39,7 @@
"bumbag": "^2.6.0",
"react-native": "0.65.1",
"react-native-svg": "12.1.0",
"react-native-web": "^0.17.1",
"react-test-renderer": "16.8.6"
},
"author": "Jake Moxey",
Expand Down
4 changes: 4 additions & 0 deletions packages/bumbag-native/src/Button/__tests__/__snapshots__/Button.test.tsx.snap
View file
Expand Up @@ -37,6 +37,7 @@ exports[`overrides Button.disabled should render correctly 1`] = `
aria-disabled="true"
class="css-view-1dbjc4n r-pointerEvents-1qm0v8d"
style="align-items: center; background-color: rgb(239, 68, 68); border-bottom-color: rgba(217,217,225,1.00); border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; border-bottom-width: 1px; border-left-color: rgba(217,217,225,1.00); border-left-width: 1px; border-right-color: rgba(217,217,225,1.00); border-right-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: rgba(217,217,225,1.00); border-top-left-radius: 6px; border-top-right-radius: 6px; border-top-width: 1px; cursor: not-allowed; flex-direction: row; justify-content: center; min-height: 44px; opacity: 0.7; padding: 0px 16px 0px 16px; text-decoration-color: rgba(0,0,0,1.00); text-decoration: none; text-decoration-style: solid; transition-duration: 0s; transition-property: opacity; user-select: none;"
tabindex="-1"
>
<div
class="css-text-901oao"
Expand Down Expand Up @@ -269,6 +270,7 @@ exports[`props disabled should render a disabled button correctly 1`] = `
aria-disabled="true"
class="css-view-1dbjc4n r-pointerEvents-1qm0v8d"
style="align-items: center; background-color: rgb(252, 252, 253); border-bottom-color: rgba(217,217,225,1.00); border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; border-bottom-width: 1px; border-left-color: rgba(217,217,225,1.00); border-left-width: 1px; border-right-color: rgba(217,217,225,1.00); border-right-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: rgba(217,217,225,1.00); border-top-left-radius: 6px; border-top-right-radius: 6px; border-top-width: 1px; cursor: not-allowed; flex-direction: row; justify-content: center; min-height: 44px; opacity: 0.7; padding: 0px 16px 0px 16px; text-decoration-color: rgba(0,0,0,1.00); text-decoration: none; text-decoration-style: solid; transition-duration: 0s; transition-property: opacity; user-select: none;"
tabindex="-1"
>
<div
class="css-text-901oao"
Expand All @@ -285,6 +287,7 @@ exports[`props disabled should render correctly with overrides 1`] = `
aria-disabled="true"
class="css-view-1dbjc4n r-pointerEvents-1qm0v8d"
style="align-items: center; background-color: rgb(239, 68, 68); border-bottom-color: rgba(217,217,225,1.00); border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; border-bottom-width: 1px; border-left-color: rgba(217,217,225,1.00); border-left-width: 1px; border-right-color: rgba(217,217,225,1.00); border-right-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: rgba(217,217,225,1.00); border-top-left-radius: 6px; border-top-right-radius: 6px; border-top-width: 1px; cursor: not-allowed; flex-direction: row; justify-content: center; min-height: 44px; opacity: 0.7; padding: 0px 16px 0px 16px; text-decoration-color: rgba(0,0,0,1.00); text-decoration: none; text-decoration-style: solid; transition-duration: 0s; transition-property: opacity; user-select: none;"
tabindex="-1"
>
<div
class="css-text-901oao"
Expand Down Expand Up @@ -961,6 +964,7 @@ exports[`theming Button.disabled should render correctly 1`] = `
aria-disabled="true"
class="css-view-1dbjc4n r-pointerEvents-1qm0v8d"
style="align-items: center; background-color: rgb(239, 68, 68); border-bottom-color: rgba(217,217,225,1.00); border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; border-bottom-width: 1px; border-left-color: rgba(217,217,225,1.00); border-left-width: 1px; border-right-color: rgba(217,217,225,1.00); border-right-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: rgba(217,217,225,1.00); border-top-left-radius: 6px; border-top-right-radius: 6px; border-top-width: 1px; cursor: not-allowed; flex-direction: row; justify-content: center; min-height: 44px; opacity: 0.7; padding: 0px 16px 0px 16px; text-decoration-color: rgba(0,0,0,1.00); text-decoration: none; text-decoration-style: solid; transition-duration: 0s; transition-property: opacity; user-select: none;"
tabindex="-1"
>
<div
class="css-text-901oao"
Expand Down
65 changes: 53 additions & 12 deletions packages/bumbag-native/src/Input/Input.styles.ts
View file
Expand Up @@ -18,7 +18,6 @@ export const StyledInput = styled.TextInput`
height: ${(props: any) => `${space(2.75, props.styledFontSize)(props)}px`};
${getVariantStyles}
${getDisabledStyles}
${getSizeStyles}
${getIconPaddingStyles}
Expand All @@ -33,6 +32,16 @@ function getVariantStyles(props) {
border-radius: ${borderRadius('default')(props)};
padding: ${space(0.4, props.styledFontSize)(props)}px ${space(0.8, props.styledFontSize)(props)}px;
${
props.disabled
? `
background-color: ${palette('white700', { dark: 'black200' })(props)};
color: ${palette('text100')(props)};
padding: ${space(0.4, props.styledFontSize)(props)}px ${space(0.8, props.styledFontSize)(props)}px;
`
: ''
}
${
props.focus
? `
Expand All @@ -52,6 +61,16 @@ function getVariantStyles(props) {
border-radius: 0px;
padding: ${space(0.4, props.styledFontSize)(props)}px 0px;
${
props.disabled
? `
background-color: ${palette('white700', { dark: 'black200' })(props)};
color: ${palette('text100')(props)};
padding: ${space(0.4, props.styledFontSize)(props)}px ${space(0.8, props.styledFontSize)(props)}px;
`
: ''
}
${
props.focus
? `
Expand All @@ -68,22 +87,39 @@ function getVariantStyles(props) {
return `
padding: ${space(0.4, props.styledFontSize)(props)}px 0px;
${
props.disabled
? `
background-color: ${palette('white700', { dark: 'black200' })(props)};
color: ${palette('text100')(props)};
padding: ${space(0.4, props.styledFontSize)(props)}px ${space(0.8, props.styledFontSize)(props)}px;
`
: ''
}
${theme('native.Input.variants.borderless', `styles.base`)(props)};
`;
}
return '';
}

function getDisabledStyles(props) {
return props.disabled
? `
background-color: ${palette('white700', { dark: 'black200' })(props)};
color: ${palette('text100')(props)};
if (props.variant === 'filled') {
return `
background-color: ${palette('white700', { dark: 'black300' })(props)};
border: 2px solid transparent;
border-radius: ${borderRadius('default')(props)};
padding: ${space(0.4, props.styledFontSize)(props)}px ${space(0.8, props.styledFontSize)(props)}px;
${theme('native.Input', `styles.disabled`)(props)};
`
: '';
${
props.focus
? `
background-color: ${palette('white', { dark: 'black100' })(props)};
border: 2px solid ${palette(props.palette || 'primary')(props)};
`
: ''
}
${theme('native.Input.variants.filled', `styles.base`)(props)};
`;
}
return '';
}

function getSizeStyles(props) {
Expand Down Expand Up @@ -234,6 +270,11 @@ function getAnimatedLabelVariantStyles(props) {
${theme('native.Input.variants.borderless', 'Label.styles.base')(props)};
`;
}
if (props.variant === 'filled') {
return `
${theme('native.Input.variants.filled', 'Label.styles.base')(props)};
`;
}
return '';
}

Expand Down
14 changes: 12 additions & 2 deletions packages/bumbag-native/src/Input/Input.tsx
View file
Expand Up @@ -44,7 +44,7 @@ export type LocalInputProps = {
};
export type InputProps = BoxProps & RNTextInputProps & LocalInputProps;

const defaultProps = { placeholderTextColor: 'gray300', size: 'default', variant: 'bordered' };
const defaultProps = { placeholderTextColor: 'gray300', size: 'default', variant: 'bordered', _focus: true };

const useProps = createHook<InputProps>(
(props) => {
Expand All @@ -65,7 +65,17 @@ const useProps = createHook<InputProps>(
export const Input = createComponent<InputProps>(
(_props) => {
const props = { ..._props, ..._props.inputProps };
const { colorMode, iconAfter, iconAfterProps, iconBefore, iconBeforeProps, label, labelProps, size } = props;
const {
colorMode,
disabled,
iconAfter,
iconAfterProps,
iconBefore,
iconBeforeProps,
label,
labelProps,
size,
} = props;
const defaultFontSize = props.fontSize || styles.SIZES[size];

/////////////////////////////////////////////////////////////////////
Expand Down
3 changes: 3 additions & 0 deletions packages/bumbag-native/src/Input/__tests__/__snapshots__/Input.test.tsx.snap
View file
Expand Up @@ -426,6 +426,7 @@ exports[`theming Input.IconWrapper.styles.base should render correctly 1`] = `
<div
class="css-text-901oao"
dir="auto"
id="animatedComponent"
style="background-color: rgb(252, 252, 253); border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; border-top-left-radius: 4px; border-top-right-radius: 4px; color: rgb(145, 154, 169); cursor: text; font-size: 16px; font-weight: 400; padding: 0px 4px 0px 4px; position: absolute;"
>
Username
Expand Down Expand Up @@ -463,6 +464,7 @@ exports[`theming Input.Label.styles.base should render correctly 1`] = `
<div
class="css-text-901oao"
dir="auto"
id="animatedComponent"
style="background-color: rgb(239, 68, 68); border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; border-top-left-radius: 4px; border-top-right-radius: 4px; color: rgb(145, 154, 169); cursor: text; font-size: 16px; font-weight: 400; padding: 0px 4px 0px 4px; position: absolute;"
>
Username
Expand Down Expand Up @@ -500,6 +502,7 @@ exports[`theming Input.LabelWrapper.styles.base should render correctly 1`] = `
<div
class="css-text-901oao"
dir="auto"
id="animatedComponent"
style="background-color: rgb(252, 252, 253); border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; border-top-left-radius: 4px; border-top-right-radius: 4px; color: rgb(145, 154, 169); cursor: text; font-size: 16px; font-weight: 400; padding: 0px 4px 0px 4px; position: absolute;"
>
Username
Expand Down

1 comment on commit 2b6d582

@vercel
Copy link

@vercel vercel bot commented on 2b6d582 Sep 16, 2021

Choose a reason for hiding this comment

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

Successfully deployed to the following URLs:

bumbag-ui – ./website

bumbag-ui-iota.vercel.app
bumbag-ui-git-main-jxom.vercel.app
bumbag-ui-jxom.vercel.app

Please sign in to comment.