[UIK-5879][d3-chart] area redesign by ilyabrower · Pull Request #3181 · semrush/intergalactic

ilyabrower · 2026-09-09T12:39:35Z

Motivation and Context

How has this been tested?

Screenshots (if appropriate):

Types of changes

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).
Nice improve.

Checklist:

I have updated the documentation accordingly.
I have added new tests on added of fixed functionality.

…elements (#3045) ## Changelog ### @semcore/dropdown-menu #### Fixed - `preventFocusByClick` handler - skip draggable elements.  ## Motivation and Context   ## How has this been tested?      ## Screenshots (if appropriate): ## Types of changes  - [X] 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). - [ ] Nice improve. ## Checklist:   - [ ] I have updated the documentation accordingly. - [ ] I have added new tests on added of fixed functionality.

…o-theme

…some theme initial fixes (#3057) ## Changelog ### @semcore/button #### Changed - Styles #### Break - Remove legacy `secondary` `info` theme. ### @semcore/theme #### Changed - Values for color variables - Default height for controls: for M — from 28 to 32. for L — from 40 to 44 ### @semcore/link #### Changed - Styles ### @semcore/modal #### Fixed - Hardcoded margins in Close button. ### @semcore/fullscreen-modal #### Fixed - Hardcoded margins in Close button. ## Motivation and Context **Along with button styles and values for its variables, I had to:** - update comments in some components according to the new variables names we were discussing with girls - remove hardcoded margins in Close button component inside the Modal and FullscreModal - remove hardcoded values for w and h in: BaseTrigger, ColorPicker, InputTags, Input, Notice.Label, Pills, TabLine, TimePicker - updated variables' values and styles of the Link ## How has this been tested? Manually. ## Screenshots (if appropriate): Current: <img width="831" height="477" alt="image" src="https://github.com/user-attachments/assets/d59b0010-13e1-404b-88bc-8de25be28d94" /> Updated: <img width="1024" height="524" alt="image" src="https://github.com/user-attachments/assets/ffcdb9ab-5d09-4821-9d69-87601376f362" /> ## Types of changes - [ ] Bug fix (non-breaking change which fixes an issue). - [ ] New feature (non-breaking change which adds functionality). - [x] Breaking change (fix or feature that would cause existing functionality to not work as expected). - [x] Nice improve. ## Checklist: - [ ] I have updated the documentation accordingly. - [ ] I have added new tests on added of fixed functionality. --------- Co-authored-by: Valeryia Zimnitskaya <valeryia.zimnitskaya@semrush.com> Co-authored-by: ilia.brauer <ilia.brauer@semrush.com>

## Motivation and Context   ## How has this been tested?      ## Screenshots (if appropriate): ## Types of changes  - [ ] 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). - [ ] Nice improve. ## Checklist:   - [ ] I have updated the documentation accordingly. - [ ] I have added new tests on added of fixed functionality.

## Motivation and Context Updated styles for: - Input - InputNumber - InlineInput - TimePicker Updated: - Button's width and max-width - Link's border-radius to round it's focus outline - A bunch of stories to align them with design requirements ## How has this been tested? Manually. ## Screenshots (if appropriate): ### InlineInput before: <img width="354" height="123" alt="image" src="https://github.com/user-attachments/assets/826125fc-82df-4038-b475-ae304f0d559f" /> <img width="464" height="131" alt="image" src="https://github.com/user-attachments/assets/f8fc06f0-329e-48d4-91fa-f64b63b6709a" /> ### InlineInput after: <img width="318" height="132" alt="image" src="https://github.com/user-attachments/assets/0fad9b3c-03ec-4d9c-974a-aec6bd1a392a" /> <img width="315" height="127" alt="image" src="https://github.com/user-attachments/assets/2114eb5e-ee93-42d1-938d-522acaf7035d" /> ## Types of changes - [ ] 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). - [x] Nice improve. ## Checklist: - [ ] I have updated the documentation accordingly. - [ ] I have added new tests on added of fixed functionality. --------- Co-authored-by: Cursor <cursoragent@cursor.com> Co-authored-by: Slizhevsky Vladislav <uladzislau.slizheuski@semrush.com> Co-authored-by: ilia.brauer <ilia.brauer@semrush.com> Co-authored-by: Valeryia Zimnitskaya <valeryia.zimnitskaya@semrush.com>

…chart-area-redesign

Valeria-Zimnitskaya · 2026-09-21T09:09:30Z

+
+SLinearGradient {
+  SStopFrom {
+    stop-color: var(--violet-300, oklch(0.74 0.17 303));


@sheila-semrush maybe we should use tokens here?

Valeria-Zimnitskaya · 2026-09-21T09:09:35Z

+  }
+
+  SStopTo {
+    stop-color: var(--green-100, oklch(0.9 0.11 175));


@sheila-semrush maybe we should use tokens here?

Valeria-Zimnitskaya · 2026-09-21T09:10:08Z

@@ -1,6 +1,9 @@
+import { sstyled } from '@semcore/core';
 import propsForElement from '@semcore/core/lib/utils/propsForElement';
+import { line } from 'd3-shape';


is that necessary import?

Valeria-Zimnitskaya · 2026-09-21T09:11:05Z

+                  transparent={transparent}
+                  cx={d3.x()(d)}
+                  cy={d3.y()(d)}
+                  r={11.5}


@sheila-semrush is that expected that radius is hardcoded here?

Valeria-Zimnitskaya · 2026-09-21T09:11:10Z

+                  transparent={transparent}
+                  cx={d3.x()(d)}
+                  cy={d3.y()(d)}
+                  r={8.5}


@sheila-semrush is that expected that radius is hardcoded here?

Valeria-Zimnitskaya · 2026-09-21T09:35:45Z


 export type ObjectDataKey = string;
-export type ObjectData = Record<ObjectDataKey, unknown>;
+export type ObjectData = Record<ObjectDataKey, number | typeof interpolateValue | Date | string | string[] | number[]> & {


…chart-area-redesign

…ies/add mock data pipeline/effects to modify data/small utils to compose it

…es triple rendering for forecast/potential dots

sheila-semrush · 2026-09-25T17:13:24Z

  return patterns[patternIndex];
 };
+
+export const DefaultStrokePattern = (props: { id: string }) => {


I think DefaultStrokePattern isn't used anywhere anymore (it was added when experimenting with patterns at the very beginning). I guess it can be removed

sheila-semrush · 2026-09-25T17:39:34Z

+      <LightStrokePattern id={`${props.id}-stroke`} />
+
+      <mask id={props.id}>
+        <rect width='100%' height='100%' fill={props.color} />


what does this do? (just a question)

j-mnizhek and others added 30 commits June 30, 2026 17:45

[theme] add new variables

0bb77b0

[theme] update theme and add comments to a bunch of components styles

86f37f0

[theme] update groups for some variables

940a74e

[theme] added renamed vars to derprecated

7d7e876

[theme] added TODO instead of changing styles

c880f63

[theme] added more context for neighborlocation styles

a902bfa

Merge branch 'release/v17' into UIK-5351/add-more-variables-to-theme

7c54fee

[theme] a bunch of updates after discussing

5bfa958

[theme] update comment for Hint styles

0cfa5b4

[theme] name updates

20fb9cc

[theme] add bg to additional Tag

208e04a

[feature-highlight] fix missing top prop

f23e679

[chore] Merge branch 'release/v17' into UIK-5351/add-more-variables-t…

65bdb8f

…o-theme

[theme] update some variables names

19e6690

[chore] Merge branch 'release/v17' into UIK-5351/add-more-variables-t…

5ea3ceb

…o-theme

[theme] removed duplicates in depricates

f83edb5

[theme] fix values for Wizard variables

e4ed6be

[theme] fix switch control bg

e111f7a

[switch] update css file

f4516f6

[chore] Merge branch 'release/v17' into UIK-5351/add-more-variables-t…

59fa951

…o-theme

[chore] update snapshot

25cb217

[theme] change form-control-s to 20px

cbcf31a

[theme] add timing variables

2f5d341

[theme] add Badge tokens and update DatePicker token values

af06715

[theme] update secondary controls lightness

7a73135

[theme] update date-picker variables

e00d1e7

Valeria-Zimnitskaya added 3 commits September 18, 2026 14:46

[d3-chart] update tests

0601e4b

[d3-chart] update stories

7b0cbc9

[chore] update snapshots

ba67509

Valeria-Zimnitskaya self-requested a review September 18, 2026 14:43

slizhevskyv-semrush and others added 4 commits September 18, 2026 19:33

Merge UIK-5830

2ea6b19

[UIK-5830][d3-chart] PR fixes

5d42e2a

[d3-chart] add story

3718c3d

Merge branch 'UIK-5830/d3-chart-tooltip-rebranding' into UIK-5879/d3-…

6527f5a

…chart-area-redesign

Valeria-Zimnitskaya reviewed Sep 21, 2026

View reviewed changes

Comment thread semcore/d3-chart/src/component/Chart/AreaChart.type.ts

Valeria-Zimnitskaya reviewed Sep 21, 2026

View reviewed changes

[chore] merge parent

b9c23b5

Valeria-Zimnitskaya reviewed Sep 21, 2026

View reviewed changes

Valeria-Zimnitskaya added 3 commits September 21, 2026 12:07

[d3-chart] add story

0721660

[d3-chart] update tests

277f062

[d3-chart] update tests

88e4f5f

Valeria-Zimnitskaya requested a review from sheila-semrush September 21, 2026 11:56

Valeria-Zimnitskaya added 2 commits September 21, 2026 13:56

Merge branch 'UIK-5830/d3-chart-tooltip-rebranding' into UIK-5879/d3-…

71cb221

…chart-area-redesign

[d3-chart] update test stories

cdc89d1

Base automatically changed from UIK-5830/d3-chart-tooltip-rebranding to release/v18 September 22, 2026 12:06

slizhevskyv-semrush added 5 commits September 23, 2026 12:32

[UIK-5879][d3-chart] connect forecast/potential areas to the main ser…

267c835

…ies/add mock data pipeline/effects to modify data/small utils to compose it

[UIK-5879][d3-chart] fixed gradient angle/color/fade

50613a6

[UIK-5879][d3-chart] fix missing uid values for highlighted dots

33c7182

[UIK-5879][d3-chart] fix transparency for highlighted dots

011b061

[UIK-5879][d3-chart] replace this.Element to SvgElement since it caus…

02992b1

…es triple rendering for forecast/potential dots

sheila-semrush reviewed Sep 25, 2026

View reviewed changes

Navigation Menu

[UIK-5879][d3-chart] area redesign - #3181

[UIK-5879][d3-chart] area redesign#3181
ilyabrower wants to merge 164 commits into
release/v18from
UIK-5879/d3-chart-area-redesign

ilyabrower commented Sep 9, 2026

Uh oh!

Uh oh!

Valeria-Zimnitskaya Sep 21, 2026

Uh oh!

Valeria-Zimnitskaya Sep 21, 2026

Uh oh!

Valeria-Zimnitskaya Sep 21, 2026

Uh oh!

Valeria-Zimnitskaya Sep 21, 2026

Uh oh!

Valeria-Zimnitskaya Sep 21, 2026

Uh oh!

Valeria-Zimnitskaya Sep 21, 2026

Uh oh!

sheila-semrush Sep 25, 2026

Uh oh!

sheila-semrush Sep 25, 2026

Uh oh!

This branch has not been deployed

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

Conversation

ilyabrower commented Sep 9, 2026

Motivation and Context

How has this been tested?

Screenshots (if appropriate):

Types of changes

Checklist:

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

This branch has not been deployed

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants