`${space(2.75, props.styledFontSize)(props)}px`};
${getVariantStyles}
- ${getDisabledStyles}
${getSizeStyles}
${getIconPaddingStyles}
@@ -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
? `
@@ -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
? `
@@ -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) {
@@ -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 '';
}
diff --git a/packages/bumbag-native/src/Input/Input.tsx b/packages/bumbag-native/src/Input/Input.tsx
index 8e7facd08..7b9b49c7a 100644
--- a/packages/bumbag-native/src/Input/Input.tsx
+++ b/packages/bumbag-native/src/Input/Input.tsx
@@ -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
(
(props) => {
@@ -65,7 +65,17 @@ const useProps = createHook(
export const Input = createComponent(
(_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];
/////////////////////////////////////////////////////////////////////
diff --git a/packages/bumbag-native/src/Input/__tests__/__snapshots__/Input.test.tsx.snap b/packages/bumbag-native/src/Input/__tests__/__snapshots__/Input.test.tsx.snap
index f5d8571ba..5893385fe 100644
--- a/packages/bumbag-native/src/Input/__tests__/__snapshots__/Input.test.tsx.snap
+++ b/packages/bumbag-native/src/Input/__tests__/__snapshots__/Input.test.tsx.snap
@@ -426,6 +426,7 @@ exports[`theming Input.IconWrapper.styles.base should render correctly 1`] = `
Username
@@ -463,6 +464,7 @@ exports[`theming Input.Label.styles.base should render correctly 1`] = `
Username
@@ -500,6 +502,7 @@ exports[`theming Input.LabelWrapper.styles.base should render correctly 1`] = `
Username
diff --git a/packages/bumbag-native/src/Level/__tests__/__snapshots__/Level.test.tsx.snap b/packages/bumbag-native/src/Level/__tests__/__snapshots__/Level.test.tsx.snap
index 7c26f632b..f81d64042 100644
--- a/packages/bumbag-native/src/Level/__tests__/__snapshots__/Level.test.tsx.snap
+++ b/packages/bumbag-native/src/Level/__tests__/__snapshots__/Level.test.tsx.snap
@@ -3,19 +3,19 @@
exports[`applyTheme renders correctly 1`] = `
`;
exports[`defaultProps should render correctly for color 1`] = `
hello world
@@ -32,19 +32,19 @@ exports[`defaultProps should render correctly for color 1`] = `
exports[`modes renders correctly for applyTheme 1`] = `
`;
exports[`modes renders correctly for overrides 1`] = `
Hello world
@@ -61,12 +61,12 @@ exports[`modes renders correctly for overrides 1`] = `
exports[`modes should render correctly when colorMode is set globally 1`] = `
Hello world
@@ -83,12 +83,12 @@ exports[`modes should render correctly when colorMode is set globally 1`] = `
exports[`modes should render correctly when colorMode set as prop 1`] = `
Hello world
@@ -105,12 +105,12 @@ exports[`modes should render correctly when colorMode set as prop 1`] = `
exports[`overrides should render correctly 1`] = `
Hello world
@@ -127,12 +127,12 @@ exports[`overrides should render correctly 1`] = `
exports[`props should render correctly 1`] = `
Hello world
@@ -171,12 +171,12 @@ exports[`props should render correctly for orientation 1`] = `
exports[`props should render correctly for spacing 1`] = `
Hello world
@@ -193,12 +193,12 @@ exports[`props should render correctly for spacing 1`] = `
exports[`props should render correctly with CSS props 1`] = `
Hello world
@@ -215,12 +215,12 @@ exports[`props should render correctly with CSS props 1`] = `
exports[`theming Level.styles.base should render correctly 1`] = `
hello world
@@ -237,12 +237,12 @@ exports[`theming Level.styles.base should render correctly 1`] = `
exports[`theming Level.styles.base should render correctly 2`] = `
Hello world
@@ -259,19 +259,19 @@ exports[`theming Level.styles.base should render correctly 2`] = `
exports[`variants renders correctly for applyTheme 1`] = `
`;
exports[`variants renders correctly for overrides 1`] = `
Hello world
@@ -288,12 +288,12 @@ exports[`variants renders correctly for overrides 1`] = `
exports[`variants styles.base should render correctly 1`] = `
Hello world
diff --git a/packages/bumbag-native/src/Menu/__tests__/__snapshots__/Menu.test.tsx.snap b/packages/bumbag-native/src/Menu/__tests__/__snapshots__/Menu.test.tsx.snap
index bb8e66804..f0200d372 100644
--- a/packages/bumbag-native/src/Menu/__tests__/__snapshots__/Menu.test.tsx.snap
+++ b/packages/bumbag-native/src/Menu/__tests__/__snapshots__/Menu.test.tsx.snap
@@ -904,6 +904,7 @@ exports[`props should render correctly with disabled items 1`] = `
aria-disabled="true"
class="css-view-1dbjc4n"
style="flex-direction: row; padding-left: 16px; transition-duration: 0s; transition-property: opacity; user-select: none; width: 100%;"
+ tabindex="-1"
>
###
+###tab=Filled,type=jsx-live
+
###
+
###tab=Borderless,type=jsx-live
###
diff --git a/yarn.lock b/yarn.lock
index c3e55959f..b49a0fb16 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3821,7 +3821,7 @@ array-filter@~0.0.0:
resolved "https://registry.yarnpkg.com/array-filter/-/array-filter-0.0.1.tgz#7da8cf2e26628ed732803581fd21f67cacd2eeec"
integrity sha1-fajPLiZijtcygDWB/SH2fKzS7uw=
-array-find-index@^1.0.1:
+array-find-index@^1.0.1, array-find-index@^1.0.2:
version "1.0.2"
resolved "https://registry.yarnpkg.com/array-find-index/-/array-find-index-1.0.2.tgz#df010aa1287e164bbda6f9723b0a96a1ec4187a1"
integrity sha1-3wEKoSh+Fku9pvlyOwqWoexBh6E=
@@ -5008,6 +5008,14 @@ cosmiconfig@^6.0.0:
path-type "^4.0.0"
yaml "^1.7.2"
+create-react-class@^15.7.0:
+ version "15.7.0"
+ resolved "https://registry.yarnpkg.com/create-react-class/-/create-react-class-15.7.0.tgz#7499d7ca2e69bb51d13faf59bd04f0c65a1d6c1e"
+ integrity sha512-QZv4sFWG9S5RUvkTYWbflxeZX+JG7Cz0Tn33rQBJ+WFQTqTfUTjMjiv9tnfXazjsO5r0KhPs+AqCjyrQX6h2ng==
+ dependencies:
+ loose-envify "^1.3.1"
+ object-assign "^4.1.1"
+
cross-fetch@^3.0.4:
version "3.1.0"
resolved "https://registry.yarnpkg.com/cross-fetch/-/cross-fetch-3.1.0.tgz#6447c13cc8887fa2a66caef92888d7fdaab6e0d1"
@@ -5040,6 +5048,14 @@ css-color-keywords@^1.0.0:
resolved "https://registry.yarnpkg.com/css-color-keywords/-/css-color-keywords-1.0.0.tgz#fea2616dc676b2962686b3af8dbdbe180b244e05"
integrity sha1-/qJhbcZ2spYmhrOvjb2+GAskTgU=
+css-in-js-utils@^2.0.0:
+ version "2.0.1"
+ resolved "https://registry.yarnpkg.com/css-in-js-utils/-/css-in-js-utils-2.0.1.tgz#3b472b398787291b47cfe3e44fecfdd9e914ba99"
+ integrity sha512-PJF0SpJT+WdbVVt0AOYp9C8GnuruRlL/UFW7932nLWmFLQTaWEzTBQEx7/hn4BuV+WON75iAViSUJLiU3PKbpA==
+ dependencies:
+ hyphenate-style-name "^1.0.2"
+ isobject "^3.0.1"
+
css-select@^2.1.0:
version "2.1.0"
resolved "https://registry.yarnpkg.com/css-select/-/css-select-2.1.0.tgz#6a34653356635934a81baca68d0255432105dbef"
@@ -6712,6 +6728,11 @@ humanize-ms@^1.2.1:
dependencies:
ms "^2.0.0"
+hyphenate-style-name@^1.0.2, hyphenate-style-name@^1.0.4:
+ version "1.0.4"
+ resolved "https://registry.yarnpkg.com/hyphenate-style-name/-/hyphenate-style-name-1.0.4.tgz#691879af8e220aea5750e8827db4ef62a54e361d"
+ integrity sha512-ygGZLjmXfPHj+ZWh6LwbC37l43MhfztxetbFCoYTM2VjkIUpeHgSNn7QIyVFj7YQ1Wl9Cbw5sholVJPzWvC2MQ==
+
iconv-lite@0.4.24, iconv-lite@^0.4.24:
version "0.4.24"
resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.24.tgz#2022b4b25fbddc21d2f524974a474aafe733908b"
@@ -6844,6 +6865,13 @@ init-package-json@^1.10.3:
validate-npm-package-license "^3.0.1"
validate-npm-package-name "^3.0.0"
+inline-style-prefixer@^6.0.0:
+ version "6.0.0"
+ resolved "https://registry.yarnpkg.com/inline-style-prefixer/-/inline-style-prefixer-6.0.0.tgz#f73d5dbf2855733d6b153a4d24b7b47a73e9770b"
+ integrity sha512-XTHvRUS4ZJNzC1GixJRmOlWSS45fSt+DJoyQC9ytj0WxQfcgofQtDtyKKYxHUqEsWCs+LIWftPF1ie7+i012Fg==
+ dependencies:
+ css-in-js-utils "^2.0.0"
+
inquirer@^6.2.0:
version "6.5.2"
resolved "https://registry.yarnpkg.com/inquirer/-/inquirer-6.5.2.tgz#ad50942375d036d327ff528c08bd5fab089928ca"
@@ -8106,7 +8134,7 @@ logkitty@^0.7.1:
dayjs "^1.8.15"
yargs "^15.1.0"
-loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.4.0:
+loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.3.1, loose-envify@^1.4.0:
version "1.4.0"
resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"
integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==
@@ -8944,6 +8972,11 @@ nopt@^4.0.1:
abbrev "1"
osenv "^0.1.4"
+normalize-css-color@^1.0.2:
+ version "1.0.2"
+ resolved "https://registry.yarnpkg.com/normalize-css-color/-/normalize-css-color-1.0.2.tgz#02991e97cccec6623fe573afbbf0de6a1f3e9f8d"
+ integrity sha1-Apkel8zOxmI/5XOvu/Deah8+n40=
+
normalize-package-data@^2.0.0, normalize-package-data@^2.3.0, normalize-package-data@^2.3.2, normalize-package-data@^2.3.4, normalize-package-data@^2.3.5, normalize-package-data@^2.4.0, normalize-package-data@^2.5.0:
version "2.5.0"
resolved "https://registry.yarnpkg.com/normalize-package-data/-/normalize-package-data-2.5.0.tgz#e66db1838b200c1dfc233225d12cb36520e234a8"
@@ -9930,6 +9963,19 @@ react-native-web-hooks@3.0.1:
resolved "https://registry.yarnpkg.com/react-native-web-hooks/-/react-native-web-hooks-3.0.1.tgz#d680c7638a51b573f1a3f756ba59589fcefde06f"
integrity sha512-k1GLtdFo7OA6DBVu0ydbLwq7Ds32oz1dJJkeeYRuxqcs5K8PQFIYxRyEpiW36Fcol+NffeziT2ITkbdIXI0etA==
+react-native-web@^0.17.1:
+ version "0.17.1"
+ resolved "https://registry.yarnpkg.com/react-native-web/-/react-native-web-0.17.1.tgz#90d473c89dd99b88bc9830b2a9fcdd2fc5f04902"
+ integrity sha512-lUnn+2O8ynQ6/gJKylSxm7DLi2vHw6AujdDV1+LSa8Epe1bYFJNUcJTEhJf0jNYUFGOujzMtuG8Mkz3HdWTkag==
+ dependencies:
+ array-find-index "^1.0.2"
+ create-react-class "^15.7.0"
+ fbjs "^3.0.0"
+ hyphenate-style-name "^1.0.4"
+ inline-style-prefixer "^6.0.0"
+ normalize-css-color "^1.0.2"
+ prop-types "^15.6.0"
+
react-native@0.65.1:
version "0.65.1"
resolved "https://registry.yarnpkg.com/react-native/-/react-native-0.65.1.tgz#bd8cd313e0eb8ddcf08e61e3f8b54b7fc31a418c"