You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
I have searched the Issues to see if this bug has already been reported
I have tested the latest version
Steps to reproduce
Use the Timeline.Content component and configuring the theme to change the styling
The style is applied only when horizontal prop is "true"
Current behavior
Currently, the Timeline.Content component, when passing the styles from the theme, is not taking properly the styles because they are only applied in horizontal.
Example:
This is an example of the same theme used on horizontal and in vertical
This is my theme object
Horizontal:
Vertical:
As you can see, the border from the box is only applied when horizontal prop is true
Expected behavior
Both horizontal and vertical options apply the root base from content
Context
Right now, when using the Timeline component, you can add a child which is Timeline.Content which is basically the content inside each item, but this is only letting change the style when using it in horizontal.
The text was updated successfully, but these errors were encountered:
trocoli96
changed the title
TimelineContent is not taking properly styles
TimelineContent is not taking theme styles when being in vertical mode
Dec 21, 2023
If anyone has time, we need to always include base theme in <Timeline> and add new props to the theme outside base called horizontal->on/off, or maybe just horizontal/vertical. Pull out the CSS from base that changes the orientation between the two.
Steps to reproduce
Current behavior
Currently, the Timeline.Content component, when passing the styles from the theme, is not taking properly the styles because they are only applied in horizontal.
![image](https://private-user-images.githubusercontent.com/28953515/292256730-d3cd59f3-ead8-499f-b4ba-c576aa365c40.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjU1MjY0NTIsIm5iZiI6MTcyNTUyNjE1MiwicGF0aCI6Ii8yODk1MzUxNS8yOTIyNTY3MzAtZDNjZDU5ZjMtZWFkOC00OTlmLWI0YmEtYzU3NmFhMzY1YzQwLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA5MDUlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwOTA1VDA4NDkxMlomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTIxMWE2ZjkwYTNhMzA4NWE5ZmUwOGExMjEyYWE5ZDY5ZGQ0ZTlmNTM5YmNmOGNiMGFhNzg5ZDg1YjllNzE1ODAmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.lzrTb7dbHs-_63a0hrKsPOimRPR9AIbe6HlXQRLGJGA)
Example:
This is an example of the same theme used on horizontal and in vertical
This is my theme object
![image](https://private-user-images.githubusercontent.com/28953515/292257542-fda7f5fe-44df-4c88-901f-4a74361c5466.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjU1MjY0NTIsIm5iZiI6MTcyNTUyNjE1MiwicGF0aCI6Ii8yODk1MzUxNS8yOTIyNTc1NDItZmRhN2Y1ZmUtNDRkZi00Yzg4LTkwMWYtNGE3NDM2MWM1NDY2LnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA5MDUlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwOTA1VDA4NDkxMlomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWZlMDU3NzhmYjA3NzdhZDE4MjA3YjZmMTY5OTk4NmVhZWEzYjhlM2U2YzY2NjEzYWVlZjA0OTMwMDlkMGIxYmImWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.e1MVNz7vhHXF0BhQnAjSKL5Fv_Hc9x35AOX77WxM14Q)
Horizontal:
![image](https://private-user-images.githubusercontent.com/28953515/292257101-8369ab69-a9c3-4cc1-bd93-e73cbff8d03e.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjU1MjY0NTIsIm5iZiI6MTcyNTUyNjE1MiwicGF0aCI6Ii8yODk1MzUxNS8yOTIyNTcxMDEtODM2OWFiNjktYTljMy00Y2MxLWJkOTMtZTczY2JmZjhkMDNlLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA5MDUlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwOTA1VDA4NDkxMlomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWExYjgyYWI0Mjg5MDgxMGJkOWQ2N2M3Zjg1NzQzN2M5M2NlY2M1ZWUyZmI3NjZmOWVjY2ZkNjAxZDYyNTlmZDkmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.oUGIEx0YSKStWkryqtwkkWVjIm4f71fDSKwSGqCydfw)
Vertical:
![Captura de pantalla 2023-12-21 a las 17 09 45](https://private-user-images.githubusercontent.com/28953515/292257327-000e7e76-84a9-43b6-8896-f286ce12a9b1.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjU1MjY0NTIsIm5iZiI6MTcyNTUyNjE1MiwicGF0aCI6Ii8yODk1MzUxNS8yOTIyNTczMjctMDAwZTdlNzYtODRhOS00M2I2LTg4OTYtZjI4NmNlMTJhOWIxLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA5MDUlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwOTA1VDA4NDkxMlomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTMxMGRmY2RjMzZiZTI2MzY0MDkzNTMxY2Y0NDRlYTZlMTA5NDdmOWEyNDc0Y2RhMjk2YjAxZGUyNjdmMDg5YWImWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.WfoEpdfy0w17hT8qJKGL0rN583_5Sn78MdSo0l9G1wQ)
As you can see, the border from the box is only applied when horizontal prop is true
Expected behavior
Both horizontal and vertical options apply the root base from content
Context
Right now, when using the Timeline component, you can add a child which is Timeline.Content which is basically the content inside each item, but this is only letting change the style when using it in horizontal.
The text was updated successfully, but these errors were encountered: