🚀 feat(stepper): add custom color for stepper #672

Falkaniere · 2023-07-20T12:56:45Z

Description 📄

We add a prop for Stepper receive a custom color.

Platforms 📲

Web
Mobile

Type of change 🔍

Bug fix (non-breaking change which fixes an issue)
New feature (non-breaking change which adds functionality)
Breaking change (fix or feature that would cause existing functionality to not work as expected)
This change requires a documentation update

How Has This Been Tested? 🧪

use a stepper component with color prop.
Unit Test
Snapshot Test

Checklist: 🔍

Screenshots 📸

Co-authored-by: codacy-production[bot] <61871480+codacy-production[bot]@users.noreply.github.com>

MicaelRodrigues · 2023-07-26T13:11:23Z

packages/yoga/src/Stepper/native/Dots.jsx

+  return (
+    <Wrapper>
+      {labels.map((label, index) => (
+        <DotWrapper key={label}>


I know it's rare, but assuming labels are always unique may be a problem, so i would review the component key here.

Suggested change

<DotWrapper key={label}>

<DotWrapper key={`${index}_$({label}`}>

MicaelRodrigues · 2023-07-26T13:16:36Z

packages/yoga/src/Stepper/web/Stepper.jsx

+  /** Must be a color from yoga colors. */
+  secondary: bool,


Exactly as described in the prop comment, i think this should be a yoga color string, so the component is more flexible :)

I was talking with @matheushdsbr about this option, the initial approach was to receive a string that could be any yoga color, but after we talk about we decided to keep the component more unflexible. What do you think about it @matheushdsbr ?

Co-authored-by: codacy-production[bot] <61871480+codacy-production[bot]@users.noreply.github.com>

codacy-production · 2023-07-28T13:19:03Z

packages/yoga/src/Stepper/native/Dots.jsx

-  `,
+    return css`
+      width: 95px;
+      margin-top: 10px;


Codacy has a fix for the issue: Delete ··

Suggested change

margin-top: 10px;

margin-top: 10px;

codacy-production · 2023-07-28T13:19:04Z

packages/yoga/src/Stepper/native/Dots.jsx

-    font-size: ${stepper.label.font.size}px;
-    text-align: center;
-  `,
+    return css`


Codacy has a fix for the issue: Delete ··

Suggested change

return css`

return css`

codacy-production · 2023-07-28T13:19:06Z

packages/yoga/src/Stepper/native/Dots.jsx

+    return css`
+      width: 95px;
+      margin-top: 10px;
+      margin-left: -40px;


Codacy has a fix for the issue: Delete ··

Suggested change

margin-left: -40px;

margin-left: -40px;

codacy-production · 2023-07-28T13:19:07Z

packages/yoga/src/Stepper/native/Dots.jsx

+      color: ${active
+          ? stepper.label.color[state]
+          : stepper.label.color.inactive};
+      font-size: ${stepper.label.font.size}px;


Codacy has a fix for the issue: Delete ··

Suggested change

font-size: ${stepper.label.font.size}px;

font-size: ${stepper.label.font.size}px;

codacy-production · 2023-07-28T13:19:09Z

packages/yoga/src/Stepper/native/Dots.jsx

+      width: 95px;
+      margin-top: 10px;
+      margin-left: -40px;
+      color: ${active


Codacy has a fix for the issue: Delete ··

Suggested change

color: ${active

color: ${active

codacy-production · 2023-07-28T13:19:10Z

packages/yoga/src/Stepper/native/Dots.jsx

+      margin-left: -40px;
+      color: ${active
+          ? stepper.label.color[state]
+          : stepper.label.color.inactive};


Codacy has a fix for the issue: Replace ········ with ······

Suggested change

: stepper.label.color.inactive};

: stepper.label.color.inactive};

codacy-production · 2023-07-28T13:19:12Z

packages/yoga/src/Stepper/native/Dots.jsx

 );

 const Label = styled(Text.Bold)(
  ({
    active,
+  secondary,


Codacy has a fix for the issue: Insert ··

Suggested change

secondary,

secondary,

codacy-production · 2023-07-28T13:19:13Z

packages/yoga/src/Stepper/native/Dots.jsx

-    width: 95px;
-    margin-top: 10px;
-    margin-left: -40px;
+  }) => {


Codacy has a fix for the issue: Insert ··

Suggested change

}) => {

}) => {

codacy-production · 2023-07-28T13:19:14Z

packages/yoga/src/Stepper/native/Dots.jsx

+      margin-top: 10px;
+      margin-left: -40px;
+      color: ${active
+          ? stepper.label.color[state]


Codacy has a fix for the issue: Replace ······ with ········

Suggested change

? stepper.label.color[state]

? stepper.label.color[state]

codacy-production · 2023-07-28T13:19:16Z

packages/yoga/src/Stepper/native/Dots.jsx

+      margin-top: 10px;
+      margin-left: -40px;
+      color: ${active
+          ? stepper.label.color[state]


Codacy has a fix for the issue: Delete ··

Suggested change

? stepper.label.color[state]

? stepper.label.color[state]

codacy-production · 2023-07-28T13:19:17Z

packages/yoga/src/Stepper/native/Dots.jsx

+      margin-left: -40px;
+      color: ${active
+          ? stepper.label.color[state]
+          : stepper.label.color.inactive};


Codacy has a fix for the issue: Insert ··

Suggested change

: stepper.label.color.inactive};

: stepper.label.color.inactive};

codacy-production · 2023-07-28T13:19:18Z

packages/yoga/src/Stepper/native/Dots.jsx

+          ? stepper.label.color[state]
+          : stepper.label.color.inactive};
+      font-size: ${stepper.label.font.size}px;
+      text-align: center;


Codacy has a fix for the issue: Delete ··

Suggested change

text-align: center;

text-align: center;

codacy-production · 2023-07-28T13:19:20Z

packages/yoga/src/Stepper/native/Dots.jsx

-    width: 95px;
-    margin-top: 10px;
-    margin-left: -40px;
+  }) => {


Codacy has a fix for the issue: Delete ··

Suggested change

}) => {

}) => {

codacy-production · 2023-07-28T13:19:21Z

packages/yoga/src/Stepper/native/Dots.jsx

-    text-align: center;
-  `,
+    return css`
+      width: 95px;


Codacy has a fix for the issue: Delete ··

Suggested change

width: 95px;

width: 95px;

codacy-production · 2023-07-28T13:19:22Z

packages/yoga/src/Stepper/native/Dots.jsx

+          : stepper.label.color.inactive};
+      font-size: ${stepper.label.font.size}px;
+      text-align: center;
+    `;


Codacy has a fix for the issue: Replace ···· with ··

Suggested change

`;

`;

feat(stepper): add custom color for stepper

f2c5f41

Falkaniere self-assigned this Jul 20, 2023

github-actions bot added the @gympass/yoga label Jul 20, 2023

feat: fixing lint

51353b0

Falkaniere marked this pull request as ready for review July 20, 2023 21:22

Falkaniere and others added 9 commits July 25, 2023 15:20

feat(stepper): change stepper to have secondary color

0ad5597

feat(stepper): change arrow func to normal func

b0f7433

feat: stepper test

bb37bd6

chore: stepper test

e8711a1

Update packages/yoga/src/Stepper/native/Dots.jsx

17cdae6

Co-authored-by: codacy-production[bot] <61871480+codacy-production[bot]@users.noreply.github.com>

Update packages/yoga/src/Stepper/native/Dots.jsx

d84d984

Co-authored-by: codacy-production[bot] <61871480+codacy-production[bot]@users.noreply.github.com>

Update packages/yoga/src/Stepper/native/Dots.jsx

38510a8

Co-authored-by: codacy-production[bot] <61871480+codacy-production[bot]@users.noreply.github.com>

Update packages/yoga/src/Stepper/native/Dots.jsx

370471a

Co-authored-by: codacy-production[bot] <61871480+codacy-production[bot]@users.noreply.github.com>

lint all

04bfda1

MicaelRodrigues reviewed Jul 26, 2023

View reviewed changes

Falkaniere and others added 15 commits July 26, 2023 11:00

Update packages/yoga/src/Stepper/native/Dots.jsx

40f718e

Co-authored-by: codacy-production[bot] <61871480+codacy-production[bot]@users.noreply.github.com>

Update packages/yoga/src/Stepper/native/Dots.jsx

68aebaa

Co-authored-by: codacy-production[bot] <61871480+codacy-production[bot]@users.noreply.github.com>

Update packages/yoga/src/Stepper/native/Dots.jsx

63afcdf

Co-authored-by: codacy-production[bot] <61871480+codacy-production[bot]@users.noreply.github.com>

Update packages/yoga/src/Stepper/native/Dots.jsx

afce7dc

Co-authored-by: codacy-production[bot] <61871480+codacy-production[bot]@users.noreply.github.com>

Update packages/yoga/src/Stepper/native/Dots.jsx

05013b7

Co-authored-by: codacy-production[bot] <61871480+codacy-production[bot]@users.noreply.github.com>

Update packages/yoga/src/Stepper/native/Dots.jsx

f75f563

Co-authored-by: codacy-production[bot] <61871480+codacy-production[bot]@users.noreply.github.com>

Update packages/yoga/src/Stepper/native/Dots.jsx

f775e71

Co-authored-by: codacy-production[bot] <61871480+codacy-production[bot]@users.noreply.github.com>

Update packages/yoga/src/Stepper/native/Dots.jsx

cfc6123

Co-authored-by: codacy-production[bot] <61871480+codacy-production[bot]@users.noreply.github.com>

Update packages/yoga/src/Stepper/native/Dots.jsx

4675407

Co-authored-by: codacy-production[bot] <61871480+codacy-production[bot]@users.noreply.github.com>

Update packages/yoga/src/Stepper/native/Dots.jsx

7f52c72

Co-authored-by: codacy-production[bot] <61871480+codacy-production[bot]@users.noreply.github.com>

Update packages/yoga/src/Stepper/native/Dots.jsx

a822935

Co-authored-by: codacy-production[bot] <61871480+codacy-production[bot]@users.noreply.github.com>

Update packages/yoga/src/Stepper/native/Dots.jsx

389e445

Co-authored-by: codacy-production[bot] <61871480+codacy-production[bot]@users.noreply.github.com>

Update packages/yoga/src/Stepper/native/Dots.jsx

132fbff

Co-authored-by: codacy-production[bot] <61871480+codacy-production[bot]@users.noreply.github.com>

Update packages/yoga/src/Stepper/native/Dots.jsx

53f1f76

Co-authored-by: codacy-production[bot] <61871480+codacy-production[bot]@users.noreply.github.com>

lint

f6bfa9a

Falkaniere force-pushed the feat/customColor-stpper-component branch from b0a37a3 to 389e445 Compare July 26, 2023 21:26

Falkaniere and others added 3 commits July 28, 2023 09:45

fix: lint

0f68578

fix: lint

d97e405

Update packages/yoga/src/Stepper/native/Dots.jsx

bc396ea

Co-authored-by: codacy-production[bot] <61871480+codacy-production[bot]@users.noreply.github.com>

codacy-production bot reviewed Jul 28, 2023

View reviewed changes

Falkaniere closed this Jul 28, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

🚀 feat(stepper): add custom color for stepper #672

🚀 feat(stepper): add custom color for stepper #672

Falkaniere commented Jul 20, 2023

MicaelRodrigues Jul 26, 2023 •

edited

Loading

MicaelRodrigues Jul 26, 2023 •

edited

Loading

Falkaniere Jul 26, 2023

codacy-production bot Jul 28, 2023

codacy-production bot Jul 28, 2023

codacy-production bot Jul 28, 2023

codacy-production bot Jul 28, 2023

codacy-production bot Jul 28, 2023

codacy-production bot Jul 28, 2023

codacy-production bot Jul 28, 2023

codacy-production bot Jul 28, 2023

codacy-production bot Jul 28, 2023

codacy-production bot Jul 28, 2023

codacy-production bot Jul 28, 2023

codacy-production bot Jul 28, 2023

codacy-production bot Jul 28, 2023

codacy-production bot Jul 28, 2023

codacy-production bot Jul 28, 2023

	<DotWrapper key={label}>
	<DotWrapper key={`${index}_$({label}`}>

	font-size: ${stepper.label.font.size}px;
	font-size: ${stepper.label.font.size}px;

	: stepper.label.color.inactive};
	: stepper.label.color.inactive};

🚀 feat(stepper): add custom color for stepper #672

🚀 feat(stepper): add custom color for stepper #672

Conversation

Falkaniere commented Jul 20, 2023

Description 📄

Platforms 📲

Type of change 🔍

How Has This Been Tested? 🧪

Checklist: 🔍

Screenshots 📸

MicaelRodrigues Jul 26, 2023 • edited Loading

Choose a reason for hiding this comment

MicaelRodrigues Jul 26, 2023 • edited Loading

Choose a reason for hiding this comment

Falkaniere Jul 26, 2023

Choose a reason for hiding this comment

codacy-production bot Jul 28, 2023

Choose a reason for hiding this comment

codacy-production bot Jul 28, 2023

Choose a reason for hiding this comment

codacy-production bot Jul 28, 2023

Choose a reason for hiding this comment

codacy-production bot Jul 28, 2023

Choose a reason for hiding this comment

codacy-production bot Jul 28, 2023

Choose a reason for hiding this comment

codacy-production bot Jul 28, 2023

Choose a reason for hiding this comment

codacy-production bot Jul 28, 2023

Choose a reason for hiding this comment

codacy-production bot Jul 28, 2023

Choose a reason for hiding this comment

codacy-production bot Jul 28, 2023

Choose a reason for hiding this comment

codacy-production bot Jul 28, 2023

Choose a reason for hiding this comment

codacy-production bot Jul 28, 2023

Choose a reason for hiding this comment

codacy-production bot Jul 28, 2023

Choose a reason for hiding this comment

codacy-production bot Jul 28, 2023

Choose a reason for hiding this comment

codacy-production bot Jul 28, 2023

Choose a reason for hiding this comment

codacy-production bot Jul 28, 2023

Choose a reason for hiding this comment

MicaelRodrigues Jul 26, 2023 •

edited

Loading

MicaelRodrigues Jul 26, 2023 •

edited

Loading