@startlibs/form 1.1.3 → 1.2.0-rc.1

package/src/TextInput.jsx

@@ -1,5 +1,5 @@
 import React, {useState, forwardRef, useEffect} from 'react'
-import {Field} from './Field'
+import {Field, FieldLabel} from './Field'
 import {useInput} from './enhanceInput'
 import styled, {css} from 'styled-components'
 import {Loading} from '@startlibs/components'
@@ -84,28 +84,20 @@ const Input = styled.input`
   height: 3rem;
   padding: 0 0.7rem;
   overflow: auto;
-  ${media.mobile`
-    height: 42px;
-    padding: 0 1rem;
-    @supports (-webkit-touch-callout: none) {
-      font-size: 16px;
-    }
-  `}
 
-  ::-webkit-input-placeholder {
+  &::-webkit-input-placeholder {
     color: rgba(0,0,0,0.3);
   }
-  ::-moz-placeholder {
-    color: rgba(0,0,0,0.3);
-  }
-  :-moz-placeholder {
-    color: rgba(0,0,0,0.3);
-  }
-  :-ms-input-placeholder {
+  &::-moz-placeholder {
     color: rgba(0,0,0,0.3);
   }
+  /* :-moz-placeholder (Firefox <19) e :-ms-input-placeholder (Edge antigo) saíram: o browserslist
+     do pacote já não cobre esses motores (firefox >= 60, edge >= 79, Chromium), e a versão
+     single-colon confundia o lightningcss do yak, que compilava pra uma pseudo-classe diferente
+     (placeholder-shown, do próprio input, em vez do texto do placeholder) — o color vazava pro
+     input inteiro. Sem efeito em nenhum browser hoje suportado; nada muda no golden. */
   ${props => !props.hasTextBox && !props.noFocus && css`
-    :focus {
+    &:focus {
       border-color: ${getColor('gray180')};
       box-shadow: 0px 0px 0px 2px rgba(0,0,0,0.1);
     }
@@ -113,7 +105,7 @@ const Input = styled.input`
       border-color: ${getColor('alert')} !important;
     `}
   `}
-  ::-ms-clear { //Clear IE pseudo-buttons
+  &::-ms-clear { /* Clear IE pseudo-buttons */
     display: none;
   }
   ${props => props.locked && css`
@@ -127,10 +119,6 @@ const Input = styled.input`
     padding: .7rem;
     display: block;
     ${props => props.autoResize ? 'overflow:hidden;' : 'overflow:auto;'}
-    ${media.mobile`
-      padding: 1rem;
-      ${props => props.regularInputHeight && 'min-height: 42px;'}
-    `}
   `}
   ${props => props.rounded && css`
     border-radius: 100px;
@@ -139,6 +127,29 @@ const Input = styled.input`
   `}
   ${props => props.hasIcon && css`
     padding-left: ${props.rounded ? '3rem' : '2.5rem'};
+  `}
+  /* stylis (sc) emite @media depois das declarações planas, não na ordem do fonte; o yak
+     preserva a ordem do fonte. Os blocos de media abaixo (fallback/isTextArea/hasIcon, nessa
+     ordem) ficam DEPOIS de todas as declarações planas acima (locked/isTextArea/rounded/hasIcon,
+     na mesma ordem do fonte original) pros dois modos baterem — lição do grupo 12: fallback
+     antes do bloco de media. As partes de media de isTextArea e hasIcon saíram de dentro dos
+     blocos acima (que continuam só com a parte plana, na posição original) e viraram
+     interpolações próprias aqui, na mesma ordem relativa de antes (media geral, depois
+     isTextArea, depois hasIcon), pra não mudar o resultado em nenhum dos dois modos. */
+  ${media.mobile`
+    height: 42px;
+    padding: 0 1rem;
+    @supports (-webkit-touch-callout: none) {
+      font-size: 16px;
+    }
+  `}
+  ${props => props.isTextArea && css`
+    ${media.mobile`
+      padding: 1rem;
+      ${props => props.regularInputHeight && 'min-height: 42px;'}
+    `}
+  `}
+  ${props => props.hasIcon && css`
     ${media.mobile`
       padding-left: ${props.rounded ? '3.25rem' : '2.75rem'};
     `}
@@ -150,7 +161,7 @@ const InputWithTextBox = styled.div`
   display: flex;
   border-radius: ${props => props.rounded ? '100px' : '8px'};
   position: relative;
-  :before {
+  &:before {
     position: absolute;
     border-radius: ${props => props.rounded ? '100px' : '8px'};
     top: 0;
@@ -162,13 +173,13 @@ const InputWithTextBox = styled.div`
   }
   ${props => props.focused && css`
     box-shadow: 0px 0px 0px 2px rgba(0,0,0,0.1);
-    :before {
+    &:before {
       content: '';
       border: 1px solid ${getColor('gray180')};
     }
   `}
   ${props => props.hasErrors && css`
-    :before {
+    &:before {
       content: '';
       border: 1px solid ${getColor('alert')};
     }
@@ -499,7 +510,7 @@ const FloatingFieldType = styled(Field)`
       font-weight: 400;
       padding: 16px 1rem 0;
     }
-    ${Field.Label} {
+    ${FieldLabel} {
       position: absolute;
       top: 1.5rem;
       left: 1rem;

package/src/alt/checkbox/SimpleCheckbox.jsx

@@ -68,10 +68,10 @@ const CheckboxContent = styled.div `
     width: 100%;
     align-items: center;
     display: flex;
-    :hover {
+    &:hover {
       background: rgb(245,245,245);
     }
-    :active {
+    &:active {
       background: rgb(235,235,235);
       transition: none;
     }
@@ -85,7 +85,7 @@ const CheckboxContent = styled.div `
     ${props => props.checked && props.highlightSelected && css`
       border-color: ${getColor('main')};
       background: ${props => desaturate(0.3, lighten(0.52, getColor("main")(props)))};
-      :hover {
+      &:hover {
         background: ${props => desaturate(0.3, lighten(0.52, getColor("main")(props)))};
       }
       ${CheckboxPseudoInput} {
@@ -101,7 +101,7 @@ const CheckboxContent = styled.div `
       a, a.link {
         color: white;
       }
-      :hover {
+      &:hover {
         background: ${getColor('main')};
       }
       ${CheckboxPseudoInput} {
@@ -118,7 +118,7 @@ const CheckboxContent = styled.div `
     `}
     ${props => props.disabled && css`
       background-color: rgba(0,0,0,0.075) !important;
-      color: rgba(0,0,0,0.6); !important;
+      color: rgba(0,0,0,0.6);
       &[disabled] {
         opacity: 0.75 !important;
       }

package/src/alt/checkbox/ToggleCheckbox.jsx

@@ -21,7 +21,7 @@ const Toggle = styled.div `
   display: inline-block;
   position: relative;
   font-weight: 600;
-  :after {
+  &:after {
     content: '';
     transition: 0.25s ease;
     border-radius: 50%;
@@ -79,27 +79,27 @@ const ToggleCheckboxStyled = styled(Checkbox)`
   `}
   ${props => props.gray ? `
     background-color: rgba(0,0,0,0.06);
-    :hover {
+    &:hover {
       background-color: rgba(0,0,0,0.08);
     }
-    :active {
+    &:active {
       background-color: rgba(0,0,0,0.1);
       transition: none;
     }
   `:css`
     background-color: ${getColor('lightBluishGray')};
-    :hover {
+    &:hover {
       background: ${props => darken(0.035, getColor('lightBluishGray')(props))};
     }
-    :active {
+    &:active {
       background: ${props => darken(0.05, getColor('lightBluishGray')(props))};
       transition: none;
     }
   `}
   ${props => !props.noFocus && css`
-    :focus-within {
+    &:focus-within {
       background-color: rgba(0,0,0,0.09);
-      :after{
+      &:after{
         content: '';
         pointer-events: none;
         position: absolute;
@@ -135,7 +135,8 @@ export const ToggleCheckbox = styled(({path, disabled, rightInfo, label, descTex
         <TransitionDiv block>{descText && <DescText>{descText}</DescText>}</TransitionDiv>
       </ToggleLabel>
       {rightInfo}
-      <Toggle checked={checked}/>
+      {/* variante como classe: no yak, o override de theme.startlibs.ToggleCheckbox não lê props */}
+      <Toggle checked={checked} className={checked ? 'styled-toggle-checkbox-checked' : undefined}/>
     </>
   }
   </ToggleCheckboxStyled>

package/src/alt/radiobox/CleanTabRadiobox.jsx

@@ -16,7 +16,7 @@ export const Tab = styled.div`
   position: relative;
   ${props => props.checked ? css`
     color: ${getColor("main")};
-    :after {
+    &:after {
       content: '';
       position: absolute;
       bottom: -2px;
@@ -28,7 +28,7 @@ export const Tab = styled.div`
     }
   `: css`
     cursor: pointer;
-    :hover {
+    &:hover {
       color: ${getColor("gray90")};
     }
   `}

package/src/alt/radiobox/SimpleRadiobox.jsx

@@ -24,7 +24,7 @@ const CssCircle = styled.div`
   `)}
 
   ${ifProp('checked', css`
-    :before { 
+    &:before {
       content: '';
       width: 8px;
       height: 8px;
@@ -70,10 +70,10 @@ const RadioboxContent = styled.div `
     width: 100%;
     align-items: center;
     display: flex;
-    :hover {
+    &:hover {
       background: rgb(245,245,245);
     }
-    :active {
+    &:active {
       background: rgb(235,235,235);
       transition: none;
     }
@@ -87,11 +87,11 @@ const RadioboxContent = styled.div `
     ${props => props.checked && props.highlightSelected && css`
       border-color: ${getColor('main')};
       background: ${props => desaturate(0.3, lighten(0.52, getColor("main")(props)))};
-      :hover {
+      &:hover {
         background: ${props => desaturate(0.3, lighten(0.52, getColor("main")(props)))};
       }
       ${CssCircle} {
-        :before { 
+        &:before {
           background-color: ${getColor('main')};
         }
       }
@@ -100,11 +100,11 @@ const RadioboxContent = styled.div `
       border-color: ${getColor('main')};
       background: ${getColor('main')};
       color: white;
-      :hover {
+      &:hover {
         background: ${getColor('main')};
       }
       ${CssCircle} {
-        :before { 
+        &:before {
           background-color: ${getColor('main')};
         }
       }

package/src/alt/radiobox/TabRadiobox.jsx

@@ -16,7 +16,7 @@ export const TabButton = styled(Button)`
   border: 1px solid ${getColor('gray210')};
   border-left-width: 0;
   height: 100%;
-  :hover {
+  &:hover {
     background: ${props => desaturate(0.6, lighten(0.5, getColor("main")(props)))};
   }
   ${ifProp('checked', css`
@@ -35,7 +35,7 @@ export const TabButton = styled(Button)`
   ${props => props.isFirst!==undefined && !props.isFirst && `
     border-bottom-left-radius: 0;
     border-top-left-radius: 0;
-    :focus:after{
+    &:focus:after{
       border-bottom-left-radius: 2px;
       border-top-left-radius: 2px;
     }
@@ -43,12 +43,12 @@ export const TabButton = styled(Button)`
   ${props => props.isLast!==undefined && !props.isLast && `
     border-bottom-right-radius: 0;
     border-top-right-radius: 0;
-    :focus:after{
+    &:focus:after{
       border-bottom-right-radius: 2px;
       border-top-right-radius: 2px;
       z-index: 2;
     }
-  `} 
+  `}
   ${media.mobile`
     min-width: 0;
     ${props => props.icon ? `

package/src/withFormImageInput.jsx

@@ -17,10 +17,10 @@ export const FileInput = styled.input.attrs({type: 'file'})`
     width: 100%;
     height: 100%;
     overflow: hidden;
-    ::-webkit-file-upload-button {
+    &::-webkit-file-upload-button {
       visibility: hidden;
     }
-    ::file-upload-button {
+    &::file-upload-button {
       visibility: hidden;
     }
   `