a9cb20f317
Refactor and fixes dropdown bugs ( #8807 )
...
Fixes https://github.com/twentyhq/twenty/issues/8788
Fixes https://github.com/twentyhq/twenty/issues/8793
Fixes https://github.com/twentyhq/twenty/issues/8791
Fixes https://github.com/twentyhq/twenty/issues/8890
Fixes https://github.com/twentyhq/twenty/issues/8893
- [x] Also :
Icon buttons under dropdown are visible without blur :
- [x] Also :
<img width="237" alt="image"
src="https://github.com/user-attachments/assets/e4c70936-beff-4481-89cb-0a32a36e0ee2 ">
- [x] Also :
<img width="335" alt="image"
src="https://github.com/user-attachments/assets/5be60395-6baf-49eb-8d40-197add049e20 ">
- [x] Also :
<img width="287" alt="image"
src="https://github.com/user-attachments/assets/a317561f-7986-4d70-a1c0-deee4f4e268a ">
- Button create new without padding
- Container is expanding
- [x] Also :
<img width="303" alt="image"
src="https://github.com/user-attachments/assets/09f8a27f-91db-4191-acdc-aaaeedaf6da5 ">
- [x] Also :
<img width="133" alt="image"
src="https://github.com/user-attachments/assets/fe17b32e-f7a4-46c4-8040-239eaf8198e8 ">
Font is cut at bottom ?
- [x] Also :
<img width="385" alt="image"
src="https://github.com/user-attachments/assets/7bab2092-2936-4112-a2ee-d32d6737e304 ">
The component should flip and not resize in this situation
- [x] Also :
<img width="244" alt="image"
src="https://github.com/user-attachments/assets/5384f49a-71f9-4638-a60c-158cc8c83f81 ">
- [x] Also :
2024-12-06 14:27:48 +00:00
9073bdf21a
Background Blur added across multiple Input Fields in Edit Popups ( #8277 )
...
Fix #5644
**Apply background blur to input fields across UI for improved
consistency and appearance with Theme compatibility :**
1. Updated **TextAreaInput.tsx** to apply background blur to text input
fields (e.g., City name).
2. Enhanced **PhonesFieldInput.tsx** to apply background blur for
seamless styling in phone number input sections.
3. Modified **TextInputV2.tsx** to add background blur in address
inputs, workspace fields (e.g., Blocklist, Name fields), invitation
inputs, profile name/email fields, and other input areas.
4. Updated **DateTimeInput.tsx** and **DateInput.tsx** to improve the
appearance of date, time, and calendar popup fields with background
blur.
5. Refined **DropdownMenuInput.tsx** and **DropdownMenuSearchInput.tsx**
to add background blur to inputs for Emails, Domain name, and search
fields across the web (e.g., Time Zone dropdowns, phone number country
search).
Some images are attached for reference.
<img width="235" alt="1_b"
src="https://github.com/user-attachments/assets/bd72e69a-712e-4226-8fda-0cb737d4cbd1 ">
<img width="229" alt="1_w"
src="https://github.com/user-attachments/assets/bb8eb60b-31fb-44c6-ac2a-ca28638b5e07 ">
<img width="234" alt="2_b"
src="https://github.com/user-attachments/assets/a4f0a9de-dea1-4ef8-926b-99de984c081b ">
<img width="239" alt="2_w"
src="https://github.com/user-attachments/assets/4d2c7331-4bbf-4ea2-adad-76c7cde4072c ">
<img width="225" alt="3_b"
src="https://github.com/user-attachments/assets/458f4759-8428-43ae-a6b6-aa38ab6fb0f8 ">
<img width="219" alt="3_w"
src="https://github.com/user-attachments/assets/5ddb67c5-e59d-47cc-b2e7-44b3a7b794e6 ">
<img width="646" alt="4_b"
src="https://github.com/user-attachments/assets/01252bce-a34a-4dda-a801-654ccc5e7841 ">
<img width="637" alt="4_w"
src="https://github.com/user-attachments/assets/ea60deab-7594-4aef-ac63-0cedc9168951 ">
<img width="648" alt="5_b"
src="https://github.com/user-attachments/assets/465789ec-55b3-4750-a2bc-a9e156b1101e ">
<img width="642" alt="5_w"
src="https://github.com/user-attachments/assets/8b58977a-f543-4018-a4ee-b1ff5b9180a3 ">
<img width="647" alt="6_b"
src="https://github.com/user-attachments/assets/88030efe-bd16-43e4-9744-ee223aa04298 ">
<img width="642" alt="6_w"
src="https://github.com/user-attachments/assets/4ca2c365-ab1e-47e9-ba4a-bdb738500f56 ">
<img width="647" alt="7_b"
src="https://github.com/user-attachments/assets/224c3da5-cf57-4652-bd29-681c2098917e ">
<img width="655" alt="7_w"
src="https://github.com/user-attachments/assets/eecc2d51-ce1f-47c9-845c-c6fe15a40fa5 ">
<img width="317" alt="8_b"
src="https://github.com/user-attachments/assets/e899b4a2-4849-4d1c-805b-5a950a53d6cc ">
<img width="335" alt="8_w"
src="https://github.com/user-attachments/assets/73fef887-0a46-4557-aca4-d07c9dc298d1 ">
<img width="246" alt="9_b"
src="https://github.com/user-attachments/assets/99c5627a-e7ba-4453-9666-8d73b0d676ee ">
<img width="238" alt="9_w"
src="https://github.com/user-attachments/assets/bb36e4ea-3b78-48f5-822f-cc5012e5d434 ">
<img width="218" alt="10_b"
src="https://github.com/user-attachments/assets/450fa833-12ad-40b7-80f5-17de6af582bd ">
<img width="225" alt="10_w"
src="https://github.com/user-attachments/assets/3fe6d128-4146-4316-821e-2ebd65fd12d5 ">
<img width="647" alt="11_b"
src="https://github.com/user-attachments/assets/ec39f88f-0beb-4cf0-b35f-b4f78b4e75ff ">
<img width="663" alt="11_w"
src="https://github.com/user-attachments/assets/6eb19fe7-604c-4cb9-9623-208e541df751 ">
<img width="235" alt="12_b"
src="https://github.com/user-attachments/assets/98e68530-f5c5-43d1-839e-a8c14582b72a ">
<img width="245" alt="12_w"
src="https://github.com/user-attachments/assets/e3f0aec9-6a32-4784-a36c-d187303d3310 ">
---------
Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com >
2024-11-19 12:21:01 +01:00
d887a857ca
Revert "fix: Country Dropdown not closing with AddressInput " ( #8174 )
...
Reverts twentyhq/twenty#8147
2024-10-29 15:55:18 +01:00
ca54bc1813
Fix country selector text overflow issue ( #8125 )
...
Closes #7906
Modified the two children(`TextInputV2` and `CountrySelect`) in the
`StyledHalfRowContainer` component to always be equal in size and divide
the available space equally.
The `StyledIconChevronDown` component has a `flex-shrink: 0` to prevent
it from completely disappearing. The same applies for the
`selectedOption.Icon`.
A `p` tag had to be added to the label to correctly handle the text
overflow.
---------
Co-authored-by: Devessier <baptiste@devessier.fr >
2024-10-28 16:20:29 +01:00
1c4f418445
Fixed page inputs style layout bugs ( #6899 )
...
## Description
This PR resolves the issue #6870
- Adjusted width for all textInput - `240px`
- Added responsiveness to Address field
- [ ] To add Blur to background text component
## Before
<img width="421" alt="Screenshot 2024-09-05 at 11 57 40 AM"
src="https://github.com/user-attachments/assets/24f55e35-660e-4263-9bb0-ab363893e63b ">
<img width="443" alt="Screenshot 2024-09-05 at 11 57 54 AM"
src="https://github.com/user-attachments/assets/656e93f6-ec48-41b7-b92f-06f9bfc779f2 ">
## After
<img width="377" alt="Screenshot 2024-09-05 at 11 51 37 AM"
src="https://github.com/user-attachments/assets/f323930c-a8bf-4d38-9ed8-db43b86209b1 ">
<img width="427" alt="Screenshot 2024-09-05 at 11 52 26 AM"
src="https://github.com/user-attachments/assets/f34922fc-4687-4842-a85a-e28b603d47ae ">
<img width="429" alt="Screenshot 2024-09-05 at 11 52 50 AM"
src="https://github.com/user-attachments/assets/f3016e57-1214-408f-9f5b-ee34d9caaf5d ">
---------
Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com >
2024-09-07 00:12:51 +02:00
68662fa543
[refacto] Introduce stateless TextInputV2 ( #5013 )
...
## Context
As discussed with @lucasbordeau and @charlesBochet we are looking at
making low level UI components stateless when possible.
Therefore TextInput should not handle a hotkey state. Instead hotkeys
should be defined in the parent component (as done here in
CreateProfile).
Introducing here TextInputV2 that is stateless and that can already
replace TextInput without any behaviour change everywhere it is used
with `disableHotkey` prop.
## How was it tested?
Locally + Storybook
---------
Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com >
2024-04-22 11:19:41 +02:00
67db7d85c0
Proposal Date picker overflow ( #4996 )
...
Unfortunately, it is not possible in CSS to have an overflow:visible
over x-axis while having an overflow:hidden over y-axis, leading to the
following issue:
<img width="1512" alt="image"
src="https://github.com/twentyhq/twenty/assets/12035771/9b84cbbb-c6c4-4fd6-a630-a24f01eccf73 ">
I'm refactoring the RecordInlineCell and RecordTableCell to use
useFloating + createPortal to open the cell.
2024-04-17 11:35:45 +02:00
3171d0c87b
feat: address composite field ( #4492 )
...
Added new Address field input type.
---------
Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com >
2024-03-28 16:50:38 +01:00
