Merge pull request #589 from catho/QTM-713

feat(QTM-713): Input component migrated to CSS modules
catho · Oct 4, 2024 · 81e7ae0 · 81e7ae0
2 parents 17640f5 + 57141e2
commit 81e7ae0
Show file tree

Hide file tree

Showing 68 changed files with 4,113 additions and 7,236 deletions.
diff --git a/.loki/reference/chrome_iphone7_Input_With_Description_Label.png b/.loki/reference/chrome_iphone7_Input_With_Description_Label.png
diff --git a/.loki/reference/chrome_laptop_Input_With_Description_Label.png b/.loki/reference/chrome_laptop_Input_With_Description_Label.png
diff --git a/components/AutoComplete/AutoComplete.jsx b/components/AutoComplete/AutoComplete.jsx
@@ -35,7 +35,11 @@ const InputWrapper = styled.div`
   position: relative;
 `;
 
-const InputText = styled(TextInput)`
+const propsNotContainedInTextInput = ['theme'];
+
+const InputText = styled(TextInput).withConfig({
+  shouldForwardProp: (prop) => !propsNotContainedInTextInput.includes(prop),
+})`
   ${({
     theme: {
       spacing: { xsmall },
@@ -344,7 +348,7 @@ const AutoComplete = ({
   return (
     <ComponentWrapper theme={theme} skin={skin}>
       <InputWrapper ref={wrapperRef}>
-        <InputLabel htmlFor={id} error={error}>
+        <InputLabel htmlFor={id}>
           {label}
           {required && <RequiredMark skin={skin}>*</RequiredMark>}
         </InputLabel>
@@ -366,6 +370,7 @@ const AutoComplete = ({
           onChange={(e) => handleChange(e.target.value)}
           skin={skin}
           required={required}
+          theme={theme}
         />
         {userTypedValue && !error && !disabled && (
           <InputIcon

diff --git a/components/AutoComplete/__snapshots__/AutoComplete.unit.test.jsx.snap b/components/AutoComplete/__snapshots__/AutoComplete.unit.test.jsx.snap
@@ -1,68 +1,27 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`AutoComplete Should render Autocomplete 1`] = `
-.c3 {
+.InputLabel-module__input-label___u-ovg {
+  color: inherit;
+  display: block;
+  font-weight: 700;
+  margin: var(--qtm-spacing-xsmall) 0 0;
+}
+
+.TextInput-module__text-input___VCylJ {
   -webkit-appearance: none;
+  background-color: var(--qtm-colors-neutral-0);
+  border: 2px solid var(--qtm-colors-neutral-500);
   border-radius: 4px;
   box-sizing: border-box;
-  box-sizing: border-box;
-  font-size: initial;
-  -webkit-letter-spacing: 0.2px;
-  -moz-letter-spacing: 0.2px;
-  -ms-letter-spacing: 0.2px;
-  letter-spacing: 0.2px;
+  color: var(--qtm-colors-neutral-700);
+  font-size: medium;
+  letter-spacing: .2px;
+  margin-top: 0;
   outline: none;
-  -webkit-transition: all 0.2s ease-in-out;
-  transition: all 0.2s ease-in-out;
+  padding: var(--qtm-spacing-xsmall) var(--qtm-spacing-medium);
+  transition: all .2s ease-in-out;
   width: 100%;
-  margin-top: 0px;
-  padding: 8px 16px;
-  background-color: #ffffff;
-  border: 2px solid #999999;
-  color: #424242;
-}
-
-.c3::-webkit-inner-spin-button,
-.c3::-webkit-outer-spin-button {
-  -webkit-appearance: none;
-  margin: 0;
-}
-
-.c3::-webkit-calendar-picker-indicator,
-.c3::-webkit-search-cancel-button {
-  display: none;
-}
-
-.c3::-ms-clear {
-  display: none;
-}
-
-.c3:hover,
-.c3:focus {
-  border-color: #1250C4;
-  box-shadow: 0px 3px 1px -2px rgba(18,80,196,0.2),0px 2px 2px 0px rgba(18,80,196,0.14),0px 1px 5px 0px rgba(18,80,196,0.12);
-}
-
-.c3[disabled] {
-  background-color: #f2f2f2;
-  border-color: #999999;
-  color: #999999;
-}
-
-.c3:-webkit-autofill {
-  box-shadow: 0 0 0 1000px #fff5f5 inset;
-}
-
-.c3[disabled] {
-  box-shadow: none;
-  cursor: not-allowed;
-}
-
-.c2 {
-  display: block;
-  font-weight: bold;
-  margin: 8px 0 0;
-  color: inherit;
 }
 
 .c0 {
@@ -74,11 +33,11 @@ exports[`AutoComplete Should render Autocomplete 1`] = `
   position: relative;
 }
 
-.c4 {
+.c2 {
   margin-top: 8px;
 }
 
-.c5 {
+.c3 {
   border: 0;
   -webkit-clip: rect(0 0 0 0);
   clip: rect(0 0 0 0);
@@ -97,27 +56,28 @@ exports[`AutoComplete Should render Autocomplete 1`] = `
     class="c1"
   >
     <label
-      class="c2"
+      class="InputLabel-module__input-label___u-ovg"
       for=""
     />
     <input
       aria-autocomplete="both"
       aria-expanded="false"
       aria-owns="autocompleteOptions"
       autocomplete="off"
-      class="c3 c4"
+      class="TextInput-module__text-input___VCylJ c2"
       id=""
       name=""
       placeholder="Select an option"
       role="combobox"
+      style="--icon-size: var(--qtm-spacing-large); --icon-area: calc(var(--qtm-spacing-medium) + var(--icon-size) + var(--qtm-spacing-xsmall));"
       type="text"
       value=""
     />
   </div>
   <div
     aria-atomic="true"
     aria-live="polite"
-    class="c5"
+    class="c3"
     role="status"
   >
     Digite uma ou mais letras para expandir os resultados. 5 estão disponiveis.
@@ -126,78 +86,33 @@ exports[`AutoComplete Should render Autocomplete 1`] = `
 `;
 
 exports[`AutoComplete Should render Autocomplete with dark skin 1`] = `
-.c3 {
+.InputLabel-module__input-label___u-ovg {
+  color: inherit;
+  display: block;
+  font-weight: 700;
+  margin: var(--qtm-spacing-xsmall) 0 0;
+}
+
+.TextInput-module__text-input___VCylJ {
   -webkit-appearance: none;
+  background-color: var(--qtm-colors-neutral-0);
+  border: 2px solid var(--qtm-colors-neutral-500);
   border-radius: 4px;
   box-sizing: border-box;
-  box-sizing: border-box;
-  font-size: initial;
-  -webkit-letter-spacing: 0.2px;
-  -moz-letter-spacing: 0.2px;
-  -ms-letter-spacing: 0.2px;
-  letter-spacing: 0.2px;
+  color: var(--qtm-colors-neutral-700);
+  font-size: medium;
+  letter-spacing: .2px;
+  margin-top: 0;
   outline: none;
-  -webkit-transition: all 0.2s ease-in-out;
-  transition: all 0.2s ease-in-out;
+  padding: var(--qtm-spacing-xsmall) var(--qtm-spacing-medium);
+  transition: all .2s ease-in-out;
   width: 100%;
-  margin-top: 0px;
-  padding: 8px 16px;
-  background-color: rgba(0,0,0,0.7);
-  border: 2px solid transparent;
-  color: #ffffff;
-}
-
-.c3::-webkit-inner-spin-button,
-.c3::-webkit-outer-spin-button {
-  -webkit-appearance: none;
-  margin: 0;
-}
-
-.c3::-webkit-calendar-picker-indicator,
-.c3::-webkit-search-cancel-button {
-  display: none;
-}
-
-.c3::-ms-clear {
-  display: none;
-}
-
-.c3::-webkit-input-placeholder {
-  color: #ffffff;
-}
-
-.c3::-moz-placeholder {
-  color: #ffffff;
-}
-
-.c3:-ms-input-placeholder {
-  color: #ffffff;
-}
-
-.c3::placeholder {
-  color: #ffffff;
-}
-
-.c3:hover,
-.c3:focus {
-  border-color: #0CC0EA;
-}
-
-.c3[disabled] {
-  color: rgba(255,255,255,0.5);
-  border-color: transparent;
 }
 
-.c3[disabled] {
-  box-shadow: none;
-  cursor: not-allowed;
-}
-
-.c2 {
-  display: block;
-  font-weight: bold;
-  margin: 8px 0 0;
-  color: inherit;
+.TextInput-module__text-input-dark___TrWzt {
+  background-color: rgba(0,0,0,.7)!important;
+  border: 2px solid transparent;
+  color: var(--qtm-colors-neutral-0);
 }
 
 .c0 {
@@ -209,11 +124,11 @@ exports[`AutoComplete Should render Autocomplete with dark skin 1`] = `
   position: relative;
 }
 
-.c4 {
+.c2 {
   margin-top: 8px;
 }
 
-.c5 {
+.c3 {
   border: 0;
   -webkit-clip: rect(0 0 0 0);
   clip: rect(0 0 0 0);
@@ -232,27 +147,28 @@ exports[`AutoComplete Should render Autocomplete with dark skin 1`] = `
     class="c1"
   >
     <label
-      class="c2"
+      class="InputLabel-module__input-label___u-ovg"
       for=""
     />
     <input
       aria-autocomplete="both"
       aria-expanded="false"
       aria-owns="autocompleteOptions"
       autocomplete="off"
-      class="c3 c4"
+      class="TextInput-module__text-input___VCylJ TextInput-module__text-input-dark___TrWzt c2"
       id=""
       name=""
       placeholder="Select an option"
       role="combobox"
+      style="--icon-size: var(--qtm-spacing-large); --icon-area: calc(var(--qtm-spacing-medium) + var(--icon-size) + var(--qtm-spacing-xsmall));"
       type="text"
       value=""
     />
   </div>
   <div
     aria-atomic="true"
     aria-live="polite"
-    class="c5"
+    class="c3"
     role="status"
   >
     Digite uma ou mais letras para expandir os resultados. 5 estão disponiveis.

diff --git a/components/Checkbox/Checkbox.jsx b/components/Checkbox/Checkbox.jsx
@@ -36,7 +36,11 @@ const CheckboxWrapper = styled.div`
 `}
 `;
 
-const CheckboxLabel = styled(Label)`
+const PropNotContainedInLabel = ['theme', 'error'];
+
+const CheckboxLabel = styled(Label).withConfig({
+  shouldForwardProp: (prop) => !PropNotContainedInLabel.includes(prop),
+})`
   ${({
     theme: {
       colors: {
@@ -61,9 +65,15 @@ const CheckIcon = styled(Icon).attrs({
   name: 'check',
 })``;
 
-const HiddenCheckbox = styled(HiddenInput).attrs({
-  type: 'checkbox',
-})`
+const PropNotContainedInHiddenInput = ['theme', 'error'];
+
+const HiddenCheckbox = styled(HiddenInput)
+  .attrs({
+    type: 'checkbox',
+  })
+  .withConfig({
+    shouldForwardProp: (prop) => !PropNotContainedInHiddenInput.includes(prop),
+  })`
   cursor: pointer;
   height: 100%;
   width: 100%;

diff --git a/components/Checkbox/CheckboxButton.jsx b/components/Checkbox/CheckboxButton.jsx
@@ -92,11 +92,9 @@ const CheckboxButton = ({
           {...props}
           checked={checked}
           disabled={disabled}
-          error={error}
           id={_id}
           name={name}
           onChange={onChange}
-          skin={checkSkin}
           value={value}
         />
         {children || label || value}

diff --git a/components/Checkbox/CheckboxGroup.jsx b/components/Checkbox/CheckboxGroup.jsx
@@ -5,7 +5,6 @@ import { FieldGroup, ErrorMessage } from '../shared';
 import Checkbox from './Checkbox';
 import CheckboxButton from './CheckboxButton';
 import CheckboxGroupContext from './CheckboxGroupContext';
-import { colors, spacing } from '../shared/theme';
 
 const Group = styled(FieldGroup)`
   position: relative;
@@ -18,10 +17,6 @@ const CheckboxGroup = ({
   options = [],
   type = 'checkbox',
   inline = false,
-  theme = {
-    colors,
-    spacing,
-  },
   size = 'medium',
 }) => {
   const _onChange = (event) => {
@@ -56,11 +51,11 @@ const CheckboxGroup = ({
   );
 
   return (
-    <Group theme={theme}>
+    <Group>
       <CheckboxGroupContext.Provider value={valueProvider}>
         {checkboxes()}
       </CheckboxGroupContext.Provider>
-      {error && <ErrorMessage theme={theme}>{error}</ErrorMessage>}
+      {error && <ErrorMessage>{error}</ErrorMessage>}
     </Group>
   );
 };
@@ -88,10 +83,6 @@ CheckboxGroup.propTypes = {
   ),
   size: PropTypes.oneOf(['xsmall', 'small', 'medium', 'large', 'xlarge']),
   type: PropTypes.oneOf(['checkbox', 'button']),
-  theme: PropTypes.shape({
-    colors: PropTypes.object,
-    spacing: PropTypes.object,
-  }),
 };
 
 export default CheckboxGroup;