Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Migrate 'LegendWidgetUI' component from makeStyles to styled-component + cleanup #637

Merged

Conversation

jantolg
Copy link
Contributor

@jantolg jantolg commented Apr 12, 2023

Description

This PR includes a refactorization of LegendWidgetUI component, all classes from makestyles are been converted to styled components

Shortcut: 297037

Type of change

  • Refactor

Acceptance

The code resultant must returns same styles component visualization as the same before changes

  1. Overview a general visualization from v1.x to v2.x

Basic checklist

  • Good PR name
  • Shortcut link
  • Changelog entry
  • Just one issue per PR
  • GitHub labels
  • Proper status & reviewers
  • Tests
  • Documentation

@jantolg jantolg requested review from VictorVelarde and vmilan April 12, 2023 06:44
Copy link
Contributor

@vmilan vmilan left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Minor details and visual differences between your branch and master:

Screenshot 2023-04-12 at 15 10 56

Screenshot 2023-04-12 at 15 10 40

minWidth: '240px',
backgroundColor: theme.palette.background.paper,
boxShadow: theme.shadows[1],
borderRadius: 4
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

theme.spacing(0.5)

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

done!

flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between',
height: '36px'
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

theme.spacing(4.5)

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

done!

@coveralls
Copy link
Collaborator

coveralls commented Apr 12, 2023

Pull Request Test Coverage Report for Build 4698253318

  • 6 of 6 (100.0%) changed or added relevant lines in 1 file are covered.
  • No unchanged relevant lines lost coverage.
  • Overall coverage increased (+0.007%) to 71.351%

Totals Coverage Status
Change from base Build 4698236894: 0.007%
Covered Lines: 1950
Relevant Lines: 2514

💛 - Coveralls

@aaranadev
Copy link
Contributor

I've fixed the visual difference

Screenshot 2023-04-13 at 10 18 07 AM

@jantolg jantolg requested a review from vmilan April 13, 2023 12:02
CHANGELOG.md Outdated
@@ -6,6 +6,8 @@
- Note component cleaned styles from makeStyles [#630](https://github.com/CartoDB/carto-react/pull/630)
- OpacityControl component migrated from makeStyles to styled-components + cleanup [#631](https://github.com/CartoDB/carto-react/pull/631)

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Empty line

borderRadius: 4
}
const LegendBox = styled(Box)(({ theme }) => ({
minWidth: '240px',
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

theme.spacing(30) ?

@vmilan
Copy link
Contributor

vmilan commented Apr 13, 2023

@jantolg @aaranadev the text is still cut, can you take a look please?
Screenshot 2023-04-13 at 17 33 50

@jantolg
Copy link
Contributor Author

jantolg commented Apr 14, 2023

@vmilan This bug is fixed in #641

image

Copy link
Contributor

@vmilan vmilan left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Great, thank you so much!!

@@ -1,6 +1,5 @@
import React, { useState } from 'react';
import LegendWidgetUI from '../../../src/widgets/legend/LegendWidgetUI';
import CartoIcon from '../../assets/carto-symbol.svg';
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

unused

Copy link
Contributor

@VictorVelarde VictorVelarde left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍🏻

@VictorVelarde VictorVelarde merged commit 738ee11 into master Apr 28, 2023
@VictorVelarde VictorVelarde deleted the feat/migrate--styled-component-legend-widget-ui-component branch April 28, 2023 17:13
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants