From f1cde8a3fc7277a28ea9d74107075545f6fe5b8a Mon Sep 17 00:00:00 2001 From: Satyajit Sahoo Date: Sat, 1 Sep 2018 00:31:40 +0200 Subject: [PATCH] BREAKING: TextInput redesign (#522) --- .../screenshots/textinput-flat.disabled.png | Bin 0 -> 3249 bytes .../screenshots/textinput-flat.focused.png | Bin 0 -> 8922 bytes .../textinput-outlined.disabled.png | Bin 0 -> 3666 bytes .../textinput-outlined.focused.png | Bin 0 -> 9812 bytes docs/assets/screenshots/textinput.focused.png | Bin 3096 -> 0 bytes .../screenshots/textinput.unfocused.png | Bin 1771 -> 0 bytes example/src/TextInputExample.js | 22 +- src/components/HelperText.js | 5 +- src/components/TextInput.js | 451 ++++++++++++------ .../BottomNavigation.test.js.snap | 40 +- .../__snapshots__/Button.test.js.snap | 16 +- .../__tests__/__snapshots__/Chip.test.js.snap | 10 +- .../__snapshots__/DrawerItem.test.js.snap | 6 +- .../__tests__/__snapshots__/FAB.test.js.snap | 2 +- .../__snapshots__/ListAccordion.test.js.snap | 8 +- .../__snapshots__/ListItem.test.js.snap | 12 +- .../__snapshots__/ListSection.test.js.snap | 10 +- .../__snapshots__/Snackbar.test.js.snap | 8 +- src/styles/DarkTheme.js | 2 +- src/styles/DefaultTheme.js | 2 +- 20 files changed, 394 insertions(+), 200 deletions(-) create mode 100644 docs/assets/screenshots/textinput-flat.disabled.png create mode 100644 docs/assets/screenshots/textinput-flat.focused.png create mode 100644 docs/assets/screenshots/textinput-outlined.disabled.png create mode 100644 docs/assets/screenshots/textinput-outlined.focused.png delete mode 100644 docs/assets/screenshots/textinput.focused.png delete mode 100644 docs/assets/screenshots/textinput.unfocused.png diff --git a/docs/assets/screenshots/textinput-flat.disabled.png b/docs/assets/screenshots/textinput-flat.disabled.png new file mode 100644 index 0000000000000000000000000000000000000000..15524b2d661abc93c084285337f1f8166ef41c73 GIT binary patch literal 3249 zcmc&#cTiL57XNMn3B4&xhak9sNO6&7SwdUNDu&`x1dM>P3({6f1d$t1QSbo@Ru(}N z7AYb07BDDHnsfr8M7k6~ghZsh!1`w1UpqUqJMW$OW`5tDd(Qd&&iU?l?k${^89$FC z4*-DQ!ra6L08aK6VsIhZ&~`}Ejtz9&2|Lp-ySBEr#$+;=mzU?~=VxbUr>CbE78X8z z`ZPB;x45{tw6ruaG4b~8TN;hl+uO@vFxuPOsZ?r3MMX(TNo8f_t5>g@o1443y6ANJ z`1ts{ckf0U2Sa&qeH>uYLiCMPFzb92ke%BriYU%!6c)YR10);2UWL?V&; z`}<$MeA&^_(bLmYTU*=E&`?lNFgQ5a-QC^N($d%0S6Em`p-_s7iW(amhlhtpM@I(+ z23lKNJ3Bk`^YhEg%d4uYii?Ziym^zCmq#X(>+0%COG~Xhn2*_IA_Hx#Y`1*}u&F~{ z0Psdym>Aj-p!ps{fom8cV7S+VV{L4p zqM(K+q0D3J;GYN~Ke$n?3H=I((!@qgz2FuJj5r3xg}MnvLi^(7js{_NDJHfDxrDu7 zWG+gN`i}#oLzToMb9aCNav%Zn-vYPAxW~MXgCOoKQxtI*e)N(L65)mnx#ZWjQfD$+ zRy-Q?!dk;@MCaDd>Q|?H@GPC($PQLnF9YJSjpN*+UA;`P^i(&?%&tfCt8G5&XK@Di z6uDspzQE%}ViB>B=e+=VYt;5PI#1^8>6PibiVzO8x-3@Z_vT-mROJk5*Fch6S&|1V zrz#XJ0OcaEy`nK}=W4}kzM&52KrsGRu+r*YQ7ZY5&}*J%6^<@xtSWE?*jV;&Xu%qr zR}Bd6#nUmr#MUkWom2rt1z6+GW?7TPQ^ySU(fD%^W2;8^_>}PAXV~RIzJAq_G z8k@xcmF9&!wccOlbw^4k;kWuEjhvoatnrjCd6zb4g?q`;=#EGAqhl$*Fv>?L z!i#&6;Bf#78(!IV2*^q)RtyKBPptT!ovO%Ph<)Wd(H@*M;`_icPUXDzG+jwqC9%k* zta`c!jsBoNz0)!~34EyX{mn{jSr)z7qnh%}eSnFikMlIc z5_diYTB2cC1kNPwC>qvzKMS4jN>NICMk<`SKgFF%jb02PiBYC=6FIQZl5msE&0cAD zr<1qcexbPL`GFC)P(Gx;O?_a_&}_NduS$@(_{3fywP5NmvM{EVxpo~W?;P(QWpurz z0CCK?UHR@FfDE!z|X>SxFYBaW4T3sc-W9hUv6tCtnykmBWksO)ew{#Ln< z9~W|1fQ21Es`})(r0^8S+z>QBwK{hSBgHFg{~0l|a=BXmU`(iXykp9F{mGLF9fpy9 zR@aa}Z{7A@{HeS73~3Ij^dmzxSQ@+dr0A3g;KXX*I42atb5JcqH5c!Kqq|9EH6(fB z+Q-K)ED~2iT@<(qR2E&tW~clXMwmIlOb%d-(ub()ueO@`i={&bT0JA6c=i_oTv4zD zb=mk%<0Uigq3w@K$!!g}_hEY^gSJ)kguAkP`B*QDKV`FB<8{+K2M|QFllWRMs3P}= zT=tlf0zX1H5ukyj3gecH53P}`58W}R9dO_)=U(R+J+8Sbr^_1FA2k+1%PL$I(9~<< z2KS@VIUnR{q$vYS1S10>eg^BExut?OkM0yjqqfFi~XZ7#fjf;ng>nlufE zW8``yP(GBwBlbsHlwxK!>QiTg;@p zW-kVAZqDl{@S@4`OE3h%w?zBV08W8yl}R9I4IPf!;DBw@)ORbmB2+mQZ8XjIebr2* z#(KsEs)@oMn)v4VWl4DMU-_ppa%TVvy#@gT4lH{}aDcYt0u)c8_M?8Mhi5~wJDMFM z2zxvbE7jwayjmUdZ4|p|xz7sz#vqA<`XgA9dB_2+9Jm71=&UKK0fMGe)f!-&l^r#5 z&fOHz!MCghT)&RA@v{c; zcck)n_1#h)OmL)a`_voxDb4 z*VGDhaM~T}MAs!*3lZ@48)~f>PE8uyNxfti4t!W<-XwcbWD5V1tKA5zh7ZyB!k*Dy zLL!`WnX^VcVZ|2paf2HIV^17zqcCzG2*#U~N_4fcXD<|58^#{J$8>>IqEB_Lk7(MF zVkvE!J8UAOUI%EnuSI$1?ECa*W+m|LN_cnqg)u7 z#bLb;mk{vNsQGt&Cw2E3&tmmLlReG=wa_=%`2}Q3wF8? zqA{U&&)F^8s;5TmlkLDS>>K?W)tS+03dloLpZQIKO6-|Xfv;)e0Li{3`Ewmll#!=y z;ml9rXC4hIfSR$mP~?=loW0kV3P3wXf7+;$qh<8qq-fHMz#^15i`Od<0iTPSaSIA} z)j+@pwu@0T%3yQLmILq~E*QjW5O)4ko&cY8x2P6>-)<|W$S~dGMS|N}@KHJ2#-gx= z+KXPCVrcI1B^4QoIxFY>cZIjlj~n@|bHpuAPn6lx8yD{=LQ5B+BtBSvGe6}>CIqfQ zp!B2v#}nwS)px|`gpz$c+Z;Cm=k5|t1Hu@@UJSwnW-l%r%q0ZzB%D4S76~}H*pKkv z0CqwQmV;{-AOxEPgZ*bAlC7PscNcb~Lg1^xQvccg1*CGpnW7mGk+psPFzPS(|Ib~d X)ow_lPdB6<+F`aZwK5?Y;UoVI;uQeG literal 0 HcmV?d00001 diff --git a/docs/assets/screenshots/textinput-flat.focused.png b/docs/assets/screenshots/textinput-flat.focused.png new file mode 100644 index 0000000000000000000000000000000000000000..e91b760c5acef06010ddeea01022c52ea117697f GIT binary patch literal 8922 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 literal 0 HcmV?d00001 diff --git a/docs/assets/screenshots/textinput-outlined.focused.png b/docs/assets/screenshots/textinput-outlined.focused.png new file mode 100644 index 0000000000000000000000000000000000000000..1f9feddddda0e5aacd9962fe2109430952e6d6b8 GIT binary patch literal 9812 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 Zzz{6Yi__AXC3+wVXsMl4%~7@t_#ewrF1i2! literal 0 HcmV?d00001 diff --git a/docs/assets/screenshots/textinput.focused.png b/docs/assets/screenshots/textinput.focused.png deleted file mode 100644 index 76d7f4d1336933d2da7eb086c91d1a609067567f..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 3096 zcmcImX*|^H7ytdn$c&v_L{SOZ6;Yw4tdS*Rrih_rDH@@L($8|yrjVtqjV)_)Ll|ks zGRQJy#xO!-7h`9V^{;zh-539t_q;jJ_nhx}o^w9m=lOh|$2L}`0=!bZ000P_Gc&RU z02l-SAPd2@6M+e-GIoHk&H0PQYinx{qFYa2D1V#JM0ZCQc zdU0uWZl2@pLvHVynwVUov`o}BjSsNqm;lcpcnmcl^h;J@UrG63YzqC)*p8=(Uk8Wg?cHkPkvVT3cHQ1VV3bZ)0QQJ)Gno|HCj))+XwD_^Kf77 zLLPe^os*Vr>&3lF>pJ@Kn9BwA3^df&!G(eFFuGV~F7QVtryQ_wpQf_|uBRn^7GqJy z5&~=Z=IP3FF?uyhE-EN)Pv4m$CG_5R;@&3a%)k)_m=|{>&f}Ya+yIl4wsD7CF@u#Q zx8`<`M*6pbkDsPUBYg_gm22@au#IVukxvwiqdjQ|2#yF`|8NvSu!JKQ^@_@Qu$l)8 z_HgM(HyJl9Ex@jFzXSYIzXa%XoYj$dTI-0gWfNYvpF>HYS)_JH(fyJ-iF|7bZ zZg-9ZuG~V}(6m@EhkeW-c_2Q$Nt5}R9wf1&PzqsFAIeeRdL0`F1kbDT%bp%{B;*2U ztZ_$a27(~uwIqYGP7mWUdx+R!Ync=n&w+MW%Eg0_^&F5|TO3O@(E#*Jl+j}b*m{Ym zEjU7}mjK2`&2hUbaX-k!4sV)BmRm1GWAIaeM#*}u9@!@y{@liwe_g`?bEP(#S=JTgOJa+8amn!H1*Bd$ zUZqm|y~>KC1C>1;LL;`M478N$R(piK4%~dineIdY!n?w-k$7j;BuQzPwp9Fp6xFHb z07`g23=SSdt-334mjC^7B~3#Ck^Kl^FbojE^8Mp~!;*IDo>_&KV%Oywqz0m4E#G2n zuiiVcPH|<1cQ+$zW*`HflIU|_)Z!7{3PVzGOrJQ$R0#$YufDl{<#Uw#8v&&}Y;X6v zo84BBGPwOKFUM0?FRlwtTr>#kOuEe**$q1Womp}@wZ~~YAHH!y8La)W@JyuF&U{ERO?(y9?-TepP59G0~ zff;V#lAQ(Oea!bqyS50T^P=3^Lpsw9tKu6om{IFF|124(S9p)(mY?ExFL1ojY~o0S zaU(Qnb5f3naHtlxi*x3hJFG?v%!8^!Y&qew+|3`e2Y==kZ_xJKHo3td)5}WG5eBp>9exM?G)+ zWP_3&G`c46%*b!@PIbpoQ1!wm0PT^uOh!j}TG+BnNAAG%(~-%JSJbi2%0p70%)CNE zVGgj9=1>t7)qVX04u5#~5R3QS(?&kw?<&4f&jZj$t?$G-GY6?12rd=2a<^H^s{$J< z@<$aKWf?t0A?CCj!xoBPBBkj2G@HK7^ElH zbK)JL-YudRh`p=DUgYM79zOu|uSXUGh7y`2q7%9QVx0g)`=z!shI*}jv;tPbGo)t2 zUi&updAvqkplUO}7KHkniZaM?5eZv&gcre=T~&zCF`<%`JXQ>kfszD4ye>Rj9~R$6 zFhs0tf&K*++;m&1YJ?jfW>XMU0dG9utz2TM8T?`F3h0UKPQ70Rbu~MCgxwG6KN(eq zL1G-zuVTF)GmJY*4!&5>76Fejq{#TZLbdX5P~RraGa zPqh5oSuX1Mn$Hy1nYU0qLXw@qQDF6~xGqkCxz#TWMcIqq&+j9g*}lBCwB;|OOfWA? zUj3Chs!BoLukn?fO2#WM%NY7T+l`N6yob>h*+z{$6@xNQZV2rZrWqhhH(m+!x5nzQ zydPWSh}ztYhttF*dcVXD(N7oeid*dWH=7?OiXoFVL;TI6Ice|fv#V{k_g`MaCZVV4 zPC}LKmVpN+=SGeAi^>|tY&R#2&~hr3aa!Z;KfB+0(zyy(x?*jgk$IohdCkd|7%#jp zjOwfCvKvEEI+nKY{K!NAz%HLbL*PjhSnjQf~ nY)~M#5$a!w{|M~#_J528;+OZQGnHa3e-q9bTN#y{#fJS4<`0Oj diff --git a/docs/assets/screenshots/textinput.unfocused.png b/docs/assets/screenshots/textinput.unfocused.png deleted file mode 100644 index 58dd65ce5572cbb78ffc23b62bc11eacbdf57f94..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 1771 zcmc&w`8$*g82!F6GA1;(F+7qi zs1S?AEiEn8)zuRd6K!p6Y&M(8WPbkqnMR}Wc)X^jCOVzo(9i(G@TX6o_+9=>hK3p&8>gqIySuwtEY`@#NM&VZXJ_ZPZ{OP6+xz?b zM@L76LgD1(q)a9o92}HLB)z@891ce+m5z;#)z#Gr1OhIX+uGXN)zvjVK0Y@$*VEHu zzhsvR0Lrkt3(+t7u=sPfCKC@ZnHt!v?>@Jgp~dnom*zDTdH+|C{Y0%Nr=7(`L64iI}P*1XygJS9GD83Nv& zd2^j1T2#xDnn-#{F=Pl;j5x5dtWXpC{>rjdcj?b>Rr{6$s*WsblMgC*phA1;z%XH8%@$xQU+|b5&hb;kl z3UbaJ?ZmNuQ&oG4@w((Za%+TR1g&!Y<=JDqyvXI`jI^MVuHtU>aL_mI@;s}f8-B~q zRLgKExR3h=vlJ-@1zk@`g^@T+S(PR3ag`LyJQ7SgQ!u5qPVaHBQ0!3QB1$6FWem=~ zb5A|{Ya!ySWbp=Q#+P8=S{QCa*%`#(cFJw1tNPy->JmtK`w+TUn&MP z$+957v7`KpSt0pg^iw0xu%oKwPCIj5m6DS0MdzOY@Q5?TQLuhZLQ|{>6YDu0tHh1F zSheF|ifr=*j+&ASq-}xU!4&kOsc#OzSVE?}q1iky(8Kmt$#V*XidgYB1KS^+9cJF7 z4*BsCj8`9Adjf|?q!UH2kRMlMEg||Hd%e?!tUUZdGlF!35%c8AdghCQ7eWaGF}Ez# zi(VUMp}3r*XQIghaGzjCZ*PK%#Le)dTfCwg3~#p;q)k7}S3X7T$-V8F5C>ewWG$E6 zz#3Tc<>=%-%HnE*K~N@kzojE;d^0NIj8+a!2EUW5WFe{(eMEXd>d*xp!l6ME)Lpn zkKSnqLnUVuYczDtQV_GjiVtjSE0_v=99C#g3PnNe;4=f9j{Kz&SZ$UAoP*;y^ONNi?-%7;{;2JN*fWM!bzDBLbL!I(YQ$+6z0dk$K5*N&6iJv|g9 zwqNNLvbJqG5Bwupyx#O$Rpf|=?W01v7O*O#n2!v=VT||W!0IYo)Zar6uYqD4H!Tip zwfUVx5%iiH-JVf4T>a%&XkIU5!GOPdACRyxzj@kpzk

>_4mbUjoV@{Ad!GXf|?k|x}q-NCunSs@I)#!Ohh}Q z#JEX&OHZznzJenuGd|%+bUF>RG5P7`zosqVynEuNvy8ci|2n(7db<>n$T$B1dL-mg diff --git a/example/src/TextInputExample.js b/example/src/TextInputExample.js index ceb5b6d..0222bad 100644 --- a/example/src/TextInputExample.js +++ b/example/src/TextInputExample.js @@ -1,7 +1,7 @@ /* @flow */ import * as React from 'react'; -import { ScrollView, StyleSheet, View } from 'react-native'; +import { StyleSheet, View, ScrollView } from 'react-native'; import { TextInput, HelperText, withTheme } from 'react-native-paper'; import type { Theme } from 'react-native-paper/types'; @@ -12,6 +12,7 @@ type Props = { type State = { text: string, name: string, + outlinedText: string, }; class TextInputExample extends React.Component { @@ -20,6 +21,7 @@ class TextInputExample extends React.Component { state = { text: '', name: '', + outlinedText: '', }; _isUsernameValid = () => /^[a-z]*$/.test(this.state.name); @@ -35,7 +37,7 @@ class TextInputExample extends React.Component { this.setState({ text })} @@ -43,7 +45,21 @@ class TextInputExample extends React.Component { + this.setState({ outlinedText })} + /> + { Animated.timing(this.state.shown, { toValue: 1, duration: 150, + useNativeDriver: true, }).start(); }; @@ -103,6 +104,7 @@ class HelperText extends React.PureComponent { Animated.timing(this.state.shown, { toValue: 0, duration: 180, + useNativeDriver: true, }).start(); }; @@ -137,7 +139,7 @@ class HelperText extends React.PureComponent { { translateY: this.state.shown.interpolate({ inputRange: [0, 1], - outputRange: [-this.state.textHeight, 0], + outputRange: [-this.state.textHeight / 2, 0], }), }, ] @@ -156,6 +158,7 @@ const styles = StyleSheet.create({ text: { fontSize: 12, paddingVertical: 4, + paddingHorizontal: 12, }, }); diff --git a/src/components/TextInput.js b/src/components/TextInput.js index 8f60cdb..c8ba810 100644 --- a/src/components/TextInput.js +++ b/src/components/TextInput.js @@ -8,13 +8,15 @@ import { StyleSheet, } from 'react-native'; import { polyfill } from 'react-lifecycles-compat'; +import color from 'color'; import Text from './Typography/Text'; import { withTheme } from '../core/theming'; import type { Theme } from '../types'; const AnimatedText = Animated.createAnimatedComponent(Text); -const MINIMIZED_LABEL_Y_OFFSET = -22; +const MINIMIZED_LABEL_Y_OFFSET = -12; +const OUTLINE_MINIMIZED_LABEL_Y_OFFSET = -29; const MAXIMIZED_LABEL_FONT_SIZE = 16; const MINIMIZED_LABEL_FONT_SIZE = 12; const LABEL_WIGGLE_X_OFFSET = 4; @@ -22,6 +24,12 @@ const FOCUS_ANIMATION_DURATION = 150; const BLUR_ANIMATION_DURATION = 180; type Props = { + /** + * Mode of the TextInput. + * - `flat` - flat input with an underline. + * - `outlined` - input with an outline. + */ + mode?: 'flat' | 'outlined', /** * If true, user won't be able to interact with the component. */ @@ -79,6 +87,10 @@ type State = { focused: boolean, placeholder: ?string, value: ?string, + labelLayout: { + measured: boolean, + width: number, + }, }; /** @@ -86,12 +98,20 @@ type State = { * *

*
- * - *
Unfocused + * + *
Flat (focused)
*
*
- * - *
Focused
+ * + *
Flat (disabled)
+ *
+ *
+ * + *
Outlined (focused)
+ *
+ *
+ * + *
Outlined (disabled)
*
*
* @@ -118,11 +138,11 @@ type State = { * ``` * * @extends TextInput props https://facebook.github.io/react-native/docs/textinput.html#props - * */ class TextInput extends React.Component { static defaultProps = { + mode: 'flat', disabled: false, error: false, multiline: false, @@ -143,28 +163,42 @@ class TextInput extends React.Component { focused: false, placeholder: '', value: this.props.value, + labelLayout: { + measured: false, + width: 0, + }, }; componentDidUpdate(prevProps, prevState) { if ( - prevState.value !== this.state.value || prevState.focused !== this.state.focused || - prevProps.placeholder !== this.props.placeholder + prevState.value !== this.state.value ) { + // The label should be minimized if the text input is focused, or has text + // In minimized mode, the label moves up and becomes small if (this.state.value || this.state.focused) { this._minmizeLabel(); } else { this._restoreLabel(); } + } - if (this.state.value || !this.state.focused) { - this._hidePlaceholder(); + if ( + prevState.focused !== this.state.focused || + prevProps.label !== this.props.label + ) { + // Show placeholder text only if the input is focused or there's no label + // We don't show placeholder if there's a label because the label acts as placeholder + // When focused, the label moves up, so we can show a placeholder + if (this.state.focused || !this.props.label) { + this._showPlaceholder(); } else { - this._handleShowPlaceholder(); + this._hidePlaceholder(); } } if (prevProps.error !== this.props.error) { + // When the input has an error, we wiggle the label and apply error styles if (this.props.error) { this._showError(); } else { @@ -177,9 +211,11 @@ class TextInput extends React.Component { clearTimeout(this._timer); } - _handleShowPlaceholder = () => { + _showPlaceholder = () => { clearTimeout(this._timer); + // Set the placeholder in a delay to offset the label animation + // If we show it immediately, they'll overlap and look ugly this._timer = setTimeout( () => this.setState({ @@ -195,20 +231,21 @@ class TextInput extends React.Component { }); _timer: TimeoutID; - _root: NativeTextInput; _showError = () => { Animated.timing(this.state.error, { toValue: 1, duration: FOCUS_ANIMATION_DURATION, - }).start(this._handleShowPlaceholder); + useNativeDriver: true, + }).start(this._showPlaceholder); }; _hideError = () => { Animated.timing(this.state.error, { toValue: 0, duration: BLUR_ANIMATION_DURATION, + useNativeDriver: true, }).start(); }; @@ -216,12 +253,14 @@ class TextInput extends React.Component { Animated.timing(this.state.labeled, { toValue: 1, duration: FOCUS_ANIMATION_DURATION, + useNativeDriver: true, }).start(); _minmizeLabel = () => Animated.timing(this.state.labeled, { toValue: 0, duration: BLUR_ANIMATION_DURATION, + useNativeDriver: true, }).start(); _handleFocus = (...args) => { @@ -253,15 +292,6 @@ class TextInput extends React.Component { this.props.onChangeText && this.props.onChangeText(value); }; - _getBottomLineStyle = (color: string, animatedValue: *) => ({ - backgroundColor: color, - transform: [{ scaleX: animatedValue }], - opacity: animatedValue.interpolate({ - inputRange: [0, 0.1, 1], - outputRange: [0, 1, 1], - }), - }); - /** * @internal */ @@ -299,6 +329,7 @@ class TextInput extends React.Component { render() { const { + mode, disabled, label, error, @@ -310,65 +341,232 @@ class TextInput extends React.Component { const { colors, fonts } = theme; const fontFamily = fonts.regular; - const { - primary: primaryColor, - disabled: inactiveColor, - error: errorColor, - } = colors; - let inputTextColor, labelColor, bottomLineColor; + let inputTextColor, + activeColor, + underlineColorCustom, + outlineColor, + placeholderColor, + containerStyle; - if (!disabled) { - inputTextColor = colors.text; - labelColor = (error && errorColor) || primaryColor; - bottomLineColor = underlineColor || primaryColor; + if (disabled) { + inputTextColor = activeColor = color(colors.text) + .alpha(0.54) + .rgb() + .string(); + placeholderColor = outlineColor = colors.disabled; + underlineColorCustom = 'transparent'; } else { - inputTextColor = labelColor = bottomLineColor = inactiveColor; + inputTextColor = colors.text; + activeColor = error ? colors.error : colors.primary; + placeholderColor = outlineColor = colors.placeholder; + underlineColorCustom = underlineColor || colors.disabled; } - const labelColorAnimation = this.state.labeled.interpolate({ - inputRange: [0, 1], - outputRange: [labelColor, inactiveColor], - }); - - // Wiggle when error appears and label is minimized - const labelTranslateX = - this.state.value && error - ? this.state.error.interpolate({ - inputRange: [0, 0.5, 1], - outputRange: [0, LABEL_WIGGLE_X_OFFSET, 0], - }) - : 0; - - // Move label to top if value is set - const labelTranslateY = this.state.labeled.interpolate({ - inputRange: [0, 1], - outputRange: [MINIMIZED_LABEL_Y_OFFSET, 0], - }); - - const labelFontSize = this.state.labeled.interpolate({ - inputRange: [0, 1], - outputRange: [MINIMIZED_LABEL_FONT_SIZE, MAXIMIZED_LABEL_FONT_SIZE], - }); + if (mode === 'flat') { + containerStyle = { + backgroundColor: theme.dark + ? color(colors.background) + .lighten(0.24) + .rgb() + .string() + : color(colors.background) + .darken(0.06) + .rgb() + .string(), + borderTopLeftRadius: theme.roundness, + borderTopRightRadius: theme.roundness, + }; + } const labelStyle = { - color: labelColorAnimation, fontFamily, - fontSize: labelFontSize, + fontSize: MAXIMIZED_LABEL_FONT_SIZE, transform: [ - { translateX: labelTranslateX }, - { translateY: labelTranslateY }, + { + // Wiggle the label when there's an error + translateX: this.state.error.interpolate({ + inputRange: [0, 0.5, 1], + outputRange: [ + 0, + this.state.value && error ? LABEL_WIGGLE_X_OFFSET : 0, + 0, + ], + }), + }, + { + // Move label to top + translateY: this.state.labeled.interpolate({ + inputRange: [0, 1], + outputRange: [ + mode === 'outlined' + ? OUTLINE_MINIMIZED_LABEL_Y_OFFSET + : MINIMIZED_LABEL_Y_OFFSET, + 0, + ], + }), + }, + { + // Make label smaller + scale: this.state.labeled.interpolate({ + inputRange: [0, 1], + outputRange: [ + MINIMIZED_LABEL_FONT_SIZE / MAXIMIZED_LABEL_FONT_SIZE, + 1, + ], + }), + }, + { + // Offset label scale since RN doesn't support transform origin + translateX: this.state.labeled.interpolate({ + inputRange: [0, 1], + outputRange: [ + -(1 - MINIMIZED_LABEL_FONT_SIZE / MAXIMIZED_LABEL_FONT_SIZE) * + (this.state.labelLayout.width / 2), + 0, + ], + }), + }, ], }; return ( - - - {label} - + + {mode === 'outlined' ? ( + // Render the outline separately from the container + // This is so that the label can overlap the outline + // Otherwise the border will cut off the label on Android + + ) : null} + + {mode === 'outlined' && label ? ( + // When mode == 'outlined', the input label stays on top of the outline + // The background of the label covers the outline so it looks cut off + // To achieve the effect, we position the actual label with a background on top of it + // We set the color of the text to transparent so only the background is visible + + {label} + + ) : null} + + {mode === 'flat' ? ( + // When mode === 'flat', render an underline + + ) : null} + + {label ? ( + // Position colored placeholder and gray placeholder on top of each other and crossfade them + // This gives the effect of animating the color, but allows us to use native driver + + + this.setState({ + labelLayout: { + width: e.nativeEvent.layout.width, + measured: true, + }, + }) + } + style={[ + styles.placeholder, + mode === 'outlined' + ? styles.placeholderOutlined + : styles.placeholderFlat, + labelStyle, + { + color: activeColor, + opacity: this.state.labeled.interpolate({ + inputRange: [0, 1], + outputRange: [this.state.focused ? 1 : 0, 0], + }), + }, + ]} + numberOfLines={1} + > + {label} + + + {label} + + + ) : null} + { @@ -376,58 +574,25 @@ class TextInput extends React.Component { }} onChangeText={this._handleChangeText} placeholder={label ? this.state.placeholder : this.props.placeholder} - placeholderTextColor={colors.placeholder} + placeholderTextColor={placeholderColor} editable={!disabled} - selectionColor={labelColor} + selectionColor={activeColor} onFocus={this._handleFocus} onBlur={this._handleBlur} underlineColorAndroid="transparent" style={[ styles.input, - label ? styles.inputWithLabel : styles.inputWithoutLabel, - rest.multiline - ? label - ? styles.multilineWithLabel - : styles.multilineWithoutLabel - : null, + mode === 'outlined' + ? styles.inputOutlined + : this.props.label + ? styles.inputFlatWithLabel + : styles.inputFlatWithoutLabel, { color: inputTextColor, fontFamily, }, ]} /> - - - - - ); } @@ -441,42 +606,52 @@ const styles = StyleSheet.create({ placeholder: { position: 'absolute', left: 0, - top: 40, fontSize: 16, + paddingHorizontal: 12, }, - input: { - paddingBottom: 0, - marginTop: 8, - marginBottom: -4, - fontSize: 16, + placeholderFlat: { + top: 19, }, - inputWithLabel: { - paddingTop: 20, - minHeight: 64, + placeholderOutlined: { + top: 25, }, - inputWithoutLabel: { - paddingTop: 0, - minHeight: 44, - }, - multilineWithLabel: { - paddingTop: 30, - paddingBottom: 10, - }, - multilineWithoutLabel: { - paddingVertical: 10, - }, - bottomLineContainer: { - marginBottom: 4, - height: StyleSheet.hairlineWidth * 4, - }, - bottomLine: { + underline: { position: 'absolute', left: 0, right: 0, - top: 0, - height: StyleSheet.hairlineWidth, + bottom: 0, + height: 2, }, - focusLine: { - height: StyleSheet.hairlineWidth * 4, + outline: { + position: 'absolute', + left: 0, + right: 0, + top: 6, + bottom: 0, + }, + outlinedLabelBackground: { + position: 'absolute', + top: -4, + left: 8, + paddingHorizontal: 4, + }, + input: { + flex: 1, + paddingHorizontal: 12, + fontSize: 16, + margin: 0, + minHeight: 58, + }, + inputOutlined: { + paddingTop: 20, + paddingBottom: 16, + minHeight: 64, + }, + inputFlatWithLabel: { + paddingTop: 24, + paddingBottom: 6, + }, + inputFlatWithoutLabel: { + paddingVertical: 15, }, }); diff --git a/src/components/__tests__/__snapshots__/BottomNavigation.test.js.snap b/src/components/__tests__/__snapshots__/BottomNavigation.test.js.snap index 615e247..5399441 100644 --- a/src/components/__tests__/__snapshots__/BottomNavigation.test.js.snap +++ b/src/components/__tests__/__snapshots__/BottomNavigation.test.js.snap @@ -2512,7 +2512,7 @@ exports[`renders custom icon and label with custom colors in non-shifting bottom "background": "#f6f6f6", "disabled": "rgba(0, 0, 0, 0.26)", "error": "#B00020", - "placeholder": "rgba(0, 0, 0, 0.38)", + "placeholder": "rgba(0, 0, 0, 0.54)", "primary": "#6200ee", "surface": "#ffffff", "text": "#000000", @@ -2571,7 +2571,7 @@ exports[`renders custom icon and label with custom colors in non-shifting bottom "background": "#f6f6f6", "disabled": "rgba(0, 0, 0, 0.26)", "error": "#B00020", - "placeholder": "rgba(0, 0, 0, 0.38)", + "placeholder": "rgba(0, 0, 0, 0.54)", "primary": "#6200ee", "surface": "#ffffff", "text": "#000000", @@ -2781,7 +2781,7 @@ exports[`renders custom icon and label with custom colors in non-shifting bottom "background": "#f6f6f6", "disabled": "rgba(0, 0, 0, 0.26)", "error": "#B00020", - "placeholder": "rgba(0, 0, 0, 0.38)", + "placeholder": "rgba(0, 0, 0, 0.54)", "primary": "#6200ee", "surface": "#ffffff", "text": "#000000", @@ -2840,7 +2840,7 @@ exports[`renders custom icon and label with custom colors in non-shifting bottom "background": "#f6f6f6", "disabled": "rgba(0, 0, 0, 0.26)", "error": "#B00020", - "placeholder": "rgba(0, 0, 0, 0.38)", + "placeholder": "rgba(0, 0, 0, 0.54)", "primary": "#6200ee", "surface": "#ffffff", "text": "#000000", @@ -3050,7 +3050,7 @@ exports[`renders custom icon and label with custom colors in non-shifting bottom "background": "#f6f6f6", "disabled": "rgba(0, 0, 0, 0.26)", "error": "#B00020", - "placeholder": "rgba(0, 0, 0, 0.38)", + "placeholder": "rgba(0, 0, 0, 0.54)", "primary": "#6200ee", "surface": "#ffffff", "text": "#000000", @@ -3109,7 +3109,7 @@ exports[`renders custom icon and label with custom colors in non-shifting bottom "background": "#f6f6f6", "disabled": "rgba(0, 0, 0, 0.26)", "error": "#B00020", - "placeholder": "rgba(0, 0, 0, 0.38)", + "placeholder": "rgba(0, 0, 0, 0.54)", "primary": "#6200ee", "surface": "#ffffff", "text": "#000000", @@ -3442,7 +3442,7 @@ exports[`renders custom icon and label with custom colors in shifting bottom nav "background": "#f6f6f6", "disabled": "rgba(0, 0, 0, 0.26)", "error": "#B00020", - "placeholder": "rgba(0, 0, 0, 0.38)", + "placeholder": "rgba(0, 0, 0, 0.54)", "primary": "#6200ee", "surface": "#ffffff", "text": "#000000", @@ -3652,7 +3652,7 @@ exports[`renders custom icon and label with custom colors in shifting bottom nav "background": "#f6f6f6", "disabled": "rgba(0, 0, 0, 0.26)", "error": "#B00020", - "placeholder": "rgba(0, 0, 0, 0.38)", + "placeholder": "rgba(0, 0, 0, 0.54)", "primary": "#6200ee", "surface": "#ffffff", "text": "#000000", @@ -3862,7 +3862,7 @@ exports[`renders custom icon and label with custom colors in shifting bottom nav "background": "#f6f6f6", "disabled": "rgba(0, 0, 0, 0.26)", "error": "#B00020", - "placeholder": "rgba(0, 0, 0, 0.38)", + "placeholder": "rgba(0, 0, 0, 0.54)", "primary": "#6200ee", "surface": "#ffffff", "text": "#000000", @@ -4175,7 +4175,7 @@ exports[`renders non-shifting bottom navigation 1`] = ` "background": "#f6f6f6", "disabled": "rgba(0, 0, 0, 0.26)", "error": "#B00020", - "placeholder": "rgba(0, 0, 0, 0.38)", + "placeholder": "rgba(0, 0, 0, 0.54)", "primary": "#6200ee", "surface": "#ffffff", "text": "#000000", @@ -4234,7 +4234,7 @@ exports[`renders non-shifting bottom navigation 1`] = ` "background": "#f6f6f6", "disabled": "rgba(0, 0, 0, 0.26)", "error": "#B00020", - "placeholder": "rgba(0, 0, 0, 0.38)", + "placeholder": "rgba(0, 0, 0, 0.54)", "primary": "#6200ee", "surface": "#ffffff", "text": "#000000", @@ -4444,7 +4444,7 @@ exports[`renders non-shifting bottom navigation 1`] = ` "background": "#f6f6f6", "disabled": "rgba(0, 0, 0, 0.26)", "error": "#B00020", - "placeholder": "rgba(0, 0, 0, 0.38)", + "placeholder": "rgba(0, 0, 0, 0.54)", "primary": "#6200ee", "surface": "#ffffff", "text": "#000000", @@ -4503,7 +4503,7 @@ exports[`renders non-shifting bottom navigation 1`] = ` "background": "#f6f6f6", "disabled": "rgba(0, 0, 0, 0.26)", "error": "#B00020", - "placeholder": "rgba(0, 0, 0, 0.38)", + "placeholder": "rgba(0, 0, 0, 0.54)", "primary": "#6200ee", "surface": "#ffffff", "text": "#000000", @@ -4713,7 +4713,7 @@ exports[`renders non-shifting bottom navigation 1`] = ` "background": "#f6f6f6", "disabled": "rgba(0, 0, 0, 0.26)", "error": "#B00020", - "placeholder": "rgba(0, 0, 0, 0.38)", + "placeholder": "rgba(0, 0, 0, 0.54)", "primary": "#6200ee", "surface": "#ffffff", "text": "#000000", @@ -4772,7 +4772,7 @@ exports[`renders non-shifting bottom navigation 1`] = ` "background": "#f6f6f6", "disabled": "rgba(0, 0, 0, 0.26)", "error": "#B00020", - "placeholder": "rgba(0, 0, 0, 0.38)", + "placeholder": "rgba(0, 0, 0, 0.54)", "primary": "#6200ee", "surface": "#ffffff", "text": "#000000", @@ -5105,7 +5105,7 @@ exports[`renders shifting bottom navigation 1`] = ` "background": "#f6f6f6", "disabled": "rgba(0, 0, 0, 0.26)", "error": "#B00020", - "placeholder": "rgba(0, 0, 0, 0.38)", + "placeholder": "rgba(0, 0, 0, 0.54)", "primary": "#6200ee", "surface": "#ffffff", "text": "#000000", @@ -5315,7 +5315,7 @@ exports[`renders shifting bottom navigation 1`] = ` "background": "#f6f6f6", "disabled": "rgba(0, 0, 0, 0.26)", "error": "#B00020", - "placeholder": "rgba(0, 0, 0, 0.38)", + "placeholder": "rgba(0, 0, 0, 0.54)", "primary": "#6200ee", "surface": "#ffffff", "text": "#000000", @@ -5525,7 +5525,7 @@ exports[`renders shifting bottom navigation 1`] = ` "background": "#f6f6f6", "disabled": "rgba(0, 0, 0, 0.26)", "error": "#B00020", - "placeholder": "rgba(0, 0, 0, 0.38)", + "placeholder": "rgba(0, 0, 0, 0.54)", "primary": "#6200ee", "surface": "#ffffff", "text": "#000000", @@ -5735,7 +5735,7 @@ exports[`renders shifting bottom navigation 1`] = ` "background": "#f6f6f6", "disabled": "rgba(0, 0, 0, 0.26)", "error": "#B00020", - "placeholder": "rgba(0, 0, 0, 0.38)", + "placeholder": "rgba(0, 0, 0, 0.54)", "primary": "#6200ee", "surface": "#ffffff", "text": "#000000", @@ -5945,7 +5945,7 @@ exports[`renders shifting bottom navigation 1`] = ` "background": "#f6f6f6", "disabled": "rgba(0, 0, 0, 0.26)", "error": "#B00020", - "placeholder": "rgba(0, 0, 0, 0.38)", + "placeholder": "rgba(0, 0, 0, 0.54)", "primary": "#6200ee", "surface": "#ffffff", "text": "#000000", diff --git a/src/components/__tests__/__snapshots__/Button.test.js.snap b/src/components/__tests__/__snapshots__/Button.test.js.snap index b58cf98..dde3c18 100644 --- a/src/components/__tests__/__snapshots__/Button.test.js.snap +++ b/src/components/__tests__/__snapshots__/Button.test.js.snap @@ -88,7 +88,7 @@ exports[`renders button with color 1`] = ` "background": "#f6f6f6", "disabled": "rgba(0, 0, 0, 0.26)", "error": "#B00020", - "placeholder": "rgba(0, 0, 0, 0.38)", + "placeholder": "rgba(0, 0, 0, 0.54)", "primary": "#6200ee", "surface": "#ffffff", "text": "#000000", @@ -244,7 +244,7 @@ exports[`renders button with icon 1`] = ` "background": "#f6f6f6", "disabled": "rgba(0, 0, 0, 0.26)", "error": "#B00020", - "placeholder": "rgba(0, 0, 0, 0.38)", + "placeholder": "rgba(0, 0, 0, 0.54)", "primary": "#6200ee", "surface": "#ffffff", "text": "#000000", @@ -363,7 +363,7 @@ exports[`renders contained contained with mode 1`] = ` "background": "#f6f6f6", "disabled": "rgba(0, 0, 0, 0.26)", "error": "#B00020", - "placeholder": "rgba(0, 0, 0, 0.38)", + "placeholder": "rgba(0, 0, 0, 0.54)", "primary": "#6200ee", "surface": "#ffffff", "text": "#000000", @@ -479,7 +479,7 @@ exports[`renders disabled button 1`] = ` "background": "#f6f6f6", "disabled": "rgba(0, 0, 0, 0.26)", "error": "#B00020", - "placeholder": "rgba(0, 0, 0, 0.38)", + "placeholder": "rgba(0, 0, 0, 0.54)", "primary": "#6200ee", "surface": "#ffffff", "text": "#000000", @@ -603,7 +603,7 @@ exports[`renders loading button 1`] = ` "background": "#f6f6f6", "disabled": "rgba(0, 0, 0, 0.26)", "error": "#B00020", - "placeholder": "rgba(0, 0, 0, 0.38)", + "placeholder": "rgba(0, 0, 0, 0.54)", "primary": "#6200ee", "surface": "#ffffff", "text": "#000000", @@ -714,7 +714,7 @@ exports[`renders outlined button with mode 1`] = ` "background": "#f6f6f6", "disabled": "rgba(0, 0, 0, 0.26)", "error": "#B00020", - "placeholder": "rgba(0, 0, 0, 0.38)", + "placeholder": "rgba(0, 0, 0, 0.54)", "primary": "#6200ee", "surface": "#ffffff", "text": "#000000", @@ -825,7 +825,7 @@ exports[`renders text button by default 1`] = ` "background": "#f6f6f6", "disabled": "rgba(0, 0, 0, 0.26)", "error": "#B00020", - "placeholder": "rgba(0, 0, 0, 0.38)", + "placeholder": "rgba(0, 0, 0, 0.54)", "primary": "#6200ee", "surface": "#ffffff", "text": "#000000", @@ -936,7 +936,7 @@ exports[`renders text button with mode 1`] = ` "background": "#f6f6f6", "disabled": "rgba(0, 0, 0, 0.26)", "error": "#B00020", - "placeholder": "rgba(0, 0, 0, 0.38)", + "placeholder": "rgba(0, 0, 0, 0.54)", "primary": "#6200ee", "surface": "#ffffff", "text": "#000000", diff --git a/src/components/__tests__/__snapshots__/Chip.test.js.snap b/src/components/__tests__/__snapshots__/Chip.test.js.snap index a85c44d..f69e3bb 100644 --- a/src/components/__tests__/__snapshots__/Chip.test.js.snap +++ b/src/components/__tests__/__snapshots__/Chip.test.js.snap @@ -134,7 +134,7 @@ exports[`renders chip with icon 1`] = ` "background": "#f6f6f6", "disabled": "rgba(0, 0, 0, 0.26)", "error": "#B00020", - "placeholder": "rgba(0, 0, 0, 0.38)", + "placeholder": "rgba(0, 0, 0, 0.54)", "primary": "#6200ee", "surface": "#ffffff", "text": "#000000", @@ -245,7 +245,7 @@ exports[`renders chip with onPress 1`] = ` "background": "#f6f6f6", "disabled": "rgba(0, 0, 0, 0.26)", "error": "#B00020", - "placeholder": "rgba(0, 0, 0, 0.38)", + "placeholder": "rgba(0, 0, 0, 0.54)", "primary": "#6200ee", "surface": "#ffffff", "text": "#000000", @@ -402,7 +402,7 @@ exports[`renders deletable chip 1`] = ` "background": "#f6f6f6", "disabled": "rgba(0, 0, 0, 0.26)", "error": "#B00020", - "placeholder": "rgba(0, 0, 0, 0.38)", + "placeholder": "rgba(0, 0, 0, 0.54)", "primary": "#6200ee", "surface": "#ffffff", "text": "#000000", @@ -514,7 +514,7 @@ exports[`renders outlined disabled chip 1`] = ` "background": "#f6f6f6", "disabled": "rgba(0, 0, 0, 0.26)", "error": "#B00020", - "placeholder": "rgba(0, 0, 0, 0.38)", + "placeholder": "rgba(0, 0, 0, 0.54)", "primary": "#6200ee", "surface": "#ffffff", "text": "#000000", @@ -672,7 +672,7 @@ exports[`renders selected chip 1`] = ` "background": "#f6f6f6", "disabled": "rgba(0, 0, 0, 0.26)", "error": "#B00020", - "placeholder": "rgba(0, 0, 0, 0.38)", + "placeholder": "rgba(0, 0, 0, 0.54)", "primary": "#6200ee", "surface": "#ffffff", "text": "#000000", diff --git a/src/components/__tests__/__snapshots__/DrawerItem.test.js.snap b/src/components/__tests__/__snapshots__/DrawerItem.test.js.snap index f7d12a6..58fc91d 100644 --- a/src/components/__tests__/__snapshots__/DrawerItem.test.js.snap +++ b/src/components/__tests__/__snapshots__/DrawerItem.test.js.snap @@ -108,7 +108,7 @@ exports[`renders DrawerItem with icon 1`] = ` "background": "#f6f6f6", "disabled": "rgba(0, 0, 0, 0.26)", "error": "#B00020", - "placeholder": "rgba(0, 0, 0, 0.38)", + "placeholder": "rgba(0, 0, 0, 0.54)", "primary": "#6200ee", "surface": "#ffffff", "text": "#000000", @@ -239,7 +239,7 @@ exports[`renders active DrawerItem 1`] = ` "background": "#f6f6f6", "disabled": "rgba(0, 0, 0, 0.26)", "error": "#B00020", - "placeholder": "rgba(0, 0, 0, 0.38)", + "placeholder": "rgba(0, 0, 0, 0.54)", "primary": "#6200ee", "surface": "#ffffff", "text": "#000000", @@ -335,7 +335,7 @@ exports[`renders basic DrawerItem 1`] = ` "background": "#f6f6f6", "disabled": "rgba(0, 0, 0, 0.26)", "error": "#B00020", - "placeholder": "rgba(0, 0, 0, 0.38)", + "placeholder": "rgba(0, 0, 0, 0.54)", "primary": "#6200ee", "surface": "#ffffff", "text": "#000000", diff --git a/src/components/__tests__/__snapshots__/FAB.test.js.snap b/src/components/__tests__/__snapshots__/FAB.test.js.snap index 3846c54..bfaf5d4 100644 --- a/src/components/__tests__/__snapshots__/FAB.test.js.snap +++ b/src/components/__tests__/__snapshots__/FAB.test.js.snap @@ -160,7 +160,7 @@ exports[`renders extended FAB 1`] = ` "background": "#f6f6f6", "disabled": "rgba(0, 0, 0, 0.26)", "error": "#B00020", - "placeholder": "rgba(0, 0, 0, 0.38)", + "placeholder": "rgba(0, 0, 0, 0.54)", "primary": "#6200ee", "surface": "#ffffff", "text": "#000000", diff --git a/src/components/__tests__/__snapshots__/ListAccordion.test.js.snap b/src/components/__tests__/__snapshots__/ListAccordion.test.js.snap index 27a9341..62889f9 100644 --- a/src/components/__tests__/__snapshots__/ListAccordion.test.js.snap +++ b/src/components/__tests__/__snapshots__/ListAccordion.test.js.snap @@ -123,7 +123,7 @@ exports[`renders list accordion with children 1`] = ` "background": "#f6f6f6", "disabled": "rgba(0, 0, 0, 0.26)", "error": "#B00020", - "placeholder": "rgba(0, 0, 0, 0.38)", + "placeholder": "rgba(0, 0, 0, 0.54)", "primary": "#6200ee", "surface": "#ffffff", "text": "#000000", @@ -316,7 +316,7 @@ exports[`renders list accordion with icons 1`] = ` "background": "#f6f6f6", "disabled": "rgba(0, 0, 0, 0.26)", "error": "#B00020", - "placeholder": "rgba(0, 0, 0, 0.38)", + "placeholder": "rgba(0, 0, 0, 0.54)", "primary": "#6200ee", "surface": "#ffffff", "text": "#000000", @@ -460,7 +460,7 @@ exports[`renders multiline list accordion 1`] = ` "background": "#f6f6f6", "disabled": "rgba(0, 0, 0, 0.26)", "error": "#B00020", - "placeholder": "rgba(0, 0, 0, 0.38)", + "placeholder": "rgba(0, 0, 0, 0.54)", "primary": "#6200ee", "surface": "#ffffff", "text": "#000000", @@ -509,7 +509,7 @@ exports[`renders multiline list accordion 1`] = ` "background": "#f6f6f6", "disabled": "rgba(0, 0, 0, 0.26)", "error": "#B00020", - "placeholder": "rgba(0, 0, 0, 0.38)", + "placeholder": "rgba(0, 0, 0, 0.54)", "primary": "#6200ee", "surface": "#ffffff", "text": "#000000", diff --git a/src/components/__tests__/__snapshots__/ListItem.test.js.snap b/src/components/__tests__/__snapshots__/ListItem.test.js.snap index 1a85c7c..2c5f27a 100644 --- a/src/components/__tests__/__snapshots__/ListItem.test.js.snap +++ b/src/components/__tests__/__snapshots__/ListItem.test.js.snap @@ -93,7 +93,7 @@ exports[`renders list item with avatar 1`] = ` "background": "#f6f6f6", "disabled": "rgba(0, 0, 0, 0.26)", "error": "#B00020", - "placeholder": "rgba(0, 0, 0, 0.38)", + "placeholder": "rgba(0, 0, 0, 0.54)", "primary": "#6200ee", "surface": "#ffffff", "text": "#000000", @@ -213,7 +213,7 @@ exports[`renders list item with avatar and icon 1`] = ` "background": "#f6f6f6", "disabled": "rgba(0, 0, 0, 0.26)", "error": "#B00020", - "placeholder": "rgba(0, 0, 0, 0.38)", + "placeholder": "rgba(0, 0, 0, 0.54)", "primary": "#6200ee", "surface": "#ffffff", "text": "#000000", @@ -262,7 +262,7 @@ exports[`renders list item with avatar and icon 1`] = ` "background": "#f6f6f6", "disabled": "rgba(0, 0, 0, 0.26)", "error": "#B00020", - "placeholder": "rgba(0, 0, 0, 0.38)", + "placeholder": "rgba(0, 0, 0, 0.54)", "primary": "#6200ee", "surface": "#ffffff", "text": "#000000", @@ -457,7 +457,7 @@ exports[`renders list item with icon 1`] = ` "background": "#f6f6f6", "disabled": "rgba(0, 0, 0, 0.26)", "error": "#B00020", - "placeholder": "rgba(0, 0, 0, 0.38)", + "placeholder": "rgba(0, 0, 0, 0.54)", "primary": "#6200ee", "surface": "#ffffff", "text": "#000000", @@ -551,7 +551,7 @@ exports[`renders list item with title and description 1`] = ` "background": "#f6f6f6", "disabled": "rgba(0, 0, 0, 0.26)", "error": "#B00020", - "placeholder": "rgba(0, 0, 0, 0.38)", + "placeholder": "rgba(0, 0, 0, 0.54)", "primary": "#6200ee", "surface": "#ffffff", "text": "#000000", @@ -600,7 +600,7 @@ exports[`renders list item with title and description 1`] = ` "background": "#f6f6f6", "disabled": "rgba(0, 0, 0, 0.26)", "error": "#B00020", - "placeholder": "rgba(0, 0, 0, 0.38)", + "placeholder": "rgba(0, 0, 0, 0.54)", "primary": "#6200ee", "surface": "#ffffff", "text": "#000000", diff --git a/src/components/__tests__/__snapshots__/ListSection.test.js.snap b/src/components/__tests__/__snapshots__/ListSection.test.js.snap index 6e976b8..46373db 100644 --- a/src/components/__tests__/__snapshots__/ListSection.test.js.snap +++ b/src/components/__tests__/__snapshots__/ListSection.test.js.snap @@ -44,7 +44,7 @@ exports[`renders list section with title 1`] = ` "background": "#f6f6f6", "disabled": "rgba(0, 0, 0, 0.26)", "error": "#B00020", - "placeholder": "rgba(0, 0, 0, 0.38)", + "placeholder": "rgba(0, 0, 0, 0.54)", "primary": "#6200ee", "surface": "#ffffff", "text": "#000000", @@ -182,7 +182,7 @@ exports[`renders list section with title 1`] = ` "background": "#f6f6f6", "disabled": "rgba(0, 0, 0, 0.26)", "error": "#B00020", - "placeholder": "rgba(0, 0, 0, 0.38)", + "placeholder": "rgba(0, 0, 0, 0.54)", "primary": "#6200ee", "surface": "#ffffff", "text": "#000000", @@ -323,7 +323,7 @@ exports[`renders list section with title 1`] = ` "background": "#f6f6f6", "disabled": "rgba(0, 0, 0, 0.26)", "error": "#B00020", - "placeholder": "rgba(0, 0, 0, 0.38)", + "placeholder": "rgba(0, 0, 0, 0.54)", "primary": "#6200ee", "surface": "#ffffff", "text": "#000000", @@ -478,7 +478,7 @@ exports[`renders list section without title 1`] = ` "background": "#f6f6f6", "disabled": "rgba(0, 0, 0, 0.26)", "error": "#B00020", - "placeholder": "rgba(0, 0, 0, 0.38)", + "placeholder": "rgba(0, 0, 0, 0.54)", "primary": "#6200ee", "surface": "#ffffff", "text": "#000000", @@ -619,7 +619,7 @@ exports[`renders list section without title 1`] = ` "background": "#f6f6f6", "disabled": "rgba(0, 0, 0, 0.26)", "error": "#B00020", - "placeholder": "rgba(0, 0, 0, 0.38)", + "placeholder": "rgba(0, 0, 0, 0.54)", "primary": "#6200ee", "surface": "#ffffff", "text": "#000000", diff --git a/src/components/__tests__/__snapshots__/Snackbar.test.js.snap b/src/components/__tests__/__snapshots__/Snackbar.test.js.snap index e3006bd..5ad9648 100644 --- a/src/components/__tests__/__snapshots__/Snackbar.test.js.snap +++ b/src/components/__tests__/__snapshots__/Snackbar.test.js.snap @@ -107,7 +107,7 @@ exports[`renders snackbar with Text as a child 1`] = ` "background": "#f6f6f6", "disabled": "rgba(0, 0, 0, 0.26)", "error": "#B00020", - "placeholder": "rgba(0, 0, 0, 0.38)", + "placeholder": "rgba(0, 0, 0, 0.54)", "primary": "#6200ee", "surface": "#ffffff", "text": "#000000", @@ -215,7 +215,7 @@ exports[`renders snackbar with action button 1`] = ` "background": "#f6f6f6", "disabled": "rgba(0, 0, 0, 0.26)", "error": "#B00020", - "placeholder": "rgba(0, 0, 0, 0.38)", + "placeholder": "rgba(0, 0, 0, 0.54)", "primary": "#6200ee", "surface": "#ffffff", "text": "#000000", @@ -324,7 +324,7 @@ exports[`renders snackbar with action button 1`] = ` "background": "#f6f6f6", "disabled": "rgba(0, 0, 0, 0.26)", "error": "#B00020", - "placeholder": "rgba(0, 0, 0, 0.38)", + "placeholder": "rgba(0, 0, 0, 0.54)", "primary": "#6200ee", "surface": "#ffffff", "text": "#000000", @@ -429,7 +429,7 @@ exports[`renders snackbar with content 1`] = ` "background": "#f6f6f6", "disabled": "rgba(0, 0, 0, 0.26)", "error": "#B00020", - "placeholder": "rgba(0, 0, 0, 0.38)", + "placeholder": "rgba(0, 0, 0, 0.54)", "primary": "#6200ee", "surface": "#ffffff", "text": "#000000", diff --git a/src/styles/DarkTheme.js b/src/styles/DarkTheme.js index 4d5d640..24a26ed 100644 --- a/src/styles/DarkTheme.js +++ b/src/styles/DarkTheme.js @@ -20,7 +20,7 @@ const DarkTheme: Theme = { .rgb() .string(), placeholder: color(white) - .alpha(0.38) + .alpha(0.54) .rgb() .string(), backdrop: color(black) diff --git a/src/styles/DefaultTheme.js b/src/styles/DefaultTheme.js index e1206a2..0d371d1 100644 --- a/src/styles/DefaultTheme.js +++ b/src/styles/DefaultTheme.js @@ -19,7 +19,7 @@ export default { .rgb() .string(), placeholder: color(black) - .alpha(0.38) + .alpha(0.54) .rgb() .string(), backdrop: color(black)