Skip to content

Commit ad74c67

Browse files
ciampomirkajameskosterfcoveram
authored
Icons: Experiment with proportional stroke scaling (#84081)
* Icons: Experiment with proportional stroke scaling * Icons: Link scaling experiment in changelog --- Co-authored-by: ciampo <mciampini@git.wordpress.org> Co-authored-by: mirka <0mirka00@git.wordpress.org> Co-authored-by: jameskoster <jameskoster@git.wordpress.org> Co-authored-by: fcoveram <fcoveram@git.wordpress.org>
1 parent 447d695 commit ad74c67

354 files changed

Lines changed: 636 additions & 552 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎packages/block-editor/src/components/alignment-control/test/__snapshots__/index.jsdom.test.jsx.snap‎

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,6 @@ exports[`AlignmentUI > should allow custom alignment controls to be specified 1`
2929
>
3030
<path
3131
d="M4 5H13M4 12H20M4 19H13"
32-
vector-effect="non-scaling-stroke"
3332
/>
3433
</svg>
3534
</button>
@@ -56,7 +55,6 @@ exports[`AlignmentUI > should allow custom alignment controls to be specified 1`
5655
>
5756
<path
5857
d="M7.5 5H16.5M4 12H20M7.5 19H16.5"
59-
vector-effect="non-scaling-stroke"
6058
/>
6159
</svg>
6260
</button>
@@ -92,7 +90,6 @@ exports[`AlignmentUI > should match snapshot when controls are hidden 1`] = `
9290
>
9391
<path
9492
d="M4 5H13M4 12H20M4 19H13"
95-
vector-effect="non-scaling-stroke"
9693
/>
9794
</svg>
9895
</button>
@@ -129,7 +126,6 @@ exports[`AlignmentUI > should match snapshot when controls are visible 1`] = `
129126
>
130127
<path
131128
d="M4 5H13M4 12H20M4 19H13"
132-
vector-effect="non-scaling-stroke"
133129
/>
134130
</svg>
135131
</button>
@@ -156,7 +152,6 @@ exports[`AlignmentUI > should match snapshot when controls are visible 1`] = `
156152
>
157153
<path
158154
d="M7.5 5H16.5M4 12H20M7.5 19H16.5"
159-
vector-effect="non-scaling-stroke"
160155
/>
161156
</svg>
162157
</button>
@@ -183,7 +178,6 @@ exports[`AlignmentUI > should match snapshot when controls are visible 1`] = `
183178
>
184179
<path
185180
d="M11 5H20M4 12H20M11 19H20"
186-
vector-effect="non-scaling-stroke"
187181
/>
188182
</svg>
189183
</button>

‎packages/block-editor/src/components/block-alignment-control/test/__snapshots__/index.jsdom.test.jsx.snap‎

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,6 @@ exports[`BlockAlignmentUI > should match snapshot when controls are hidden 1`] =
2727
>
2828
<path
2929
d="M5 4.75H13M5 19.25H13"
30-
vector-effect="non-scaling-stroke"
3130
/>
3231
<rect
3332
fill="currentColor"
@@ -71,7 +70,6 @@ exports[`BlockAlignmentUI > should match snapshot when controls are visible 1`]
7170
>
7271
<path
7372
d="M5 5H19M5 19H19"
74-
vector-effect="non-scaling-stroke"
7573
/>
7674
<rect
7775
fill="currentColor"
@@ -105,7 +103,6 @@ exports[`BlockAlignmentUI > should match snapshot when controls are visible 1`]
105103
>
106104
<path
107105
d="M5 4.75H13M5 19.25H13"
108-
vector-effect="non-scaling-stroke"
109106
/>
110107
<rect
111108
fill="currentColor"
@@ -139,7 +136,6 @@ exports[`BlockAlignmentUI > should match snapshot when controls are visible 1`]
139136
>
140137
<path
141138
d="M5 4.75H19M5 19.25H19"
142-
vector-effect="non-scaling-stroke"
143139
/>
144140
<rect
145141
fill="currentColor"
@@ -173,7 +169,6 @@ exports[`BlockAlignmentUI > should match snapshot when controls are visible 1`]
173169
>
174170
<path
175171
d="M11 4.75H19M11 19.25H19"
176-
vector-effect="non-scaling-stroke"
177172
/>
178173
<rect
179174
fill="currentColor"

‎packages/block-editor/src/components/block-vertical-alignment-control/test/__snapshots__/index.jsdom.test.jsx.snap‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,6 @@ exports[`BlockVerticalAlignmentUI > should match snapshot when controls are hidd
3535
/>
3636
<path
3737
d="M4 4.75H20"
38-
vector-effect="non-scaling-stroke"
3938
/>
4039
</svg>
4140
</button>
@@ -79,7 +78,6 @@ exports[`BlockVerticalAlignmentUI > should match snapshot when controls are visi
7978
/>
8079
<path
8180
d="M4 4.75H20"
82-
vector-effect="non-scaling-stroke"
8381
/>
8482
</svg>
8583
</button>
@@ -105,7 +103,6 @@ exports[`BlockVerticalAlignmentUI > should match snapshot when controls are visi
105103
>
106104
<path
107105
d="M4 12H20"
108-
vector-effect="non-scaling-stroke"
109106
/>
110107
<rect
111108
fill="currentColor"
@@ -139,7 +136,6 @@ exports[`BlockVerticalAlignmentUI > should match snapshot when controls are visi
139136
>
140137
<path
141138
d="M4 19.25H20"
142-
vector-effect="non-scaling-stroke"
143139
/>
144140
<rect
145141
fill="currentColor"

‎packages/block-library/src/navigation-link/test/__snapshots__/hooks.jsdom.test.js.snap‎

Lines changed: 0 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,6 @@ exports[`hooks > enhanceNavigationLinkVariations > enhances variations with icon
2121
>
2222
<Path
2323
d="M8 12V8M8 4V8M8 8H12M8 8H4M8 8L10.8284 10.8284M8 8L5.17157 5.17157M8 8L10.8284 5.17157M8 8L5.17157 10.8284M4 15H20M4 19H13"
24-
vectorEffect="non-scaling-stroke"
2524
/>
2625
</SVG>,
2726
"isActive": [Function],
@@ -46,7 +45,6 @@ exports[`hooks > enhanceNavigationLinkVariations > enhances variations with icon
4645
>
4746
<Path
4847
d="M7 10H8.5M10 10H17M7 14H8.5M10 14H17M6 19.25H18C18.6904 19.25 19.25 18.6904 19.25 18V6C19.25 5.30964 18.6904 4.75 18 4.75H6C5.30964 4.75 4.75 5.30964 4.75 6V18C4.75 18.6904 5.30964 19.25 6 19.25Z"
49-
vectorEffect="non-scaling-stroke"
5048
/>
5149
</SVG>,
5250
"isActive": [Function],
@@ -71,7 +69,6 @@ exports[`hooks > enhanceNavigationLinkVariations > enhances variations with icon
7169
>
7270
<Path
7371
d="M8.5 8.25H15.5M8.5 11.75H15.5M8.5 15.25H15.5M18.25 18V6C18.25 5.30964 17.6904 4.75 17 4.75H7C6.30964 4.75 5.75 5.30964 5.75 6L5.75 18C5.75 18.6904 6.30964 19.25 7 19.25H17C17.6904 19.25 18.25 18.6904 18.25 18Z"
74-
vectorEffect="non-scaling-stroke"
7572
/>
7673
</SVG>,
7774
"isActive": [Function],
@@ -96,19 +93,15 @@ exports[`hooks > enhanceNavigationLinkVariations > enhances variations with icon
9693
>
9794
<Path
9895
d="M4.75 6C4.75 5.30964 5.30964 4.75 6 4.75H9C9.69036 4.75 10.25 5.30964 10.25 6V9C10.25 9.69036 9.69036 10.25 9 10.25H6C5.30964 10.25 4.75 9.69036 4.75 9V6Z"
99-
vectorEffect="non-scaling-stroke"
10096
/>
10197
<Path
10298
d="M4.75 15C4.75 14.3096 5.30964 13.75 6 13.75H9C9.69036 13.75 10.25 14.3096 10.25 15V18C10.25 18.6904 9.69036 19.25 9 19.25H6C5.30964 19.25 4.75 18.6904 4.75 18V15Z"
103-
vectorEffect="non-scaling-stroke"
10499
/>
105100
<Path
106101
d="M13.75 6C13.75 5.30964 14.3096 4.75 15 4.75H18C18.6904 4.75 19.25 5.30964 19.25 6V9C19.25 9.69036 18.6904 10.25 18 10.25H15C14.3096 10.25 13.75 9.69036 13.75 9V6Z"
107-
vectorEffect="non-scaling-stroke"
108102
/>
109103
<Path
110104
d="M13.75 15C13.75 14.3096 14.3096 13.75 15 13.75H18C18.6904 13.75 19.25 14.3096 19.25 15V18C19.25 18.6904 18.6904 19.25 18 19.25H15C14.3096 19.25 13.75 18.6904 13.75 18V15Z"
111-
vectorEffect="non-scaling-stroke"
112105
/>
113106
</SVG>,
114107
"isActive": [Function],
@@ -133,7 +126,6 @@ exports[`hooks > enhanceNavigationLinkVariations > enhances variations with icon
133126
>
134127
<Path
135128
d="M4.75 12.5429V4.85C4.75 4.79477 4.79477 4.75 4.85 4.75H12.5429C12.6755 4.75 12.8027 4.80268 12.8964 4.89645L20.1464 12.1464C20.3417 12.3417 20.3417 12.6583 20.1464 12.8536L12.8536 20.1464C12.6583 20.3417 12.3417 20.3417 12.1464 20.1464L4.89645 12.8964C4.80268 12.8027 4.75 12.6755 4.75 12.5429Z"
136-
vectorEffect="non-scaling-stroke"
137129
/>
138130
<Path
139131
d="M9.75 8.75a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"

‎packages/components/src/checkbox-control/test/__snapshots__/index.jsdom.test.tsx.snap‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ Snapshot Diff:
55
- First value
66
+ Second value
77
8-
@@ -18,10 +18,28 @@
8+
@@ -18,10 +18,27 @@
99
class="components-checkbox-control__input"
1010
id="checkbox-control"
1111
type="checkbox"
@@ -26,7 +26,6 @@ Snapshot Diff:
2626
+ >
2727
+ <path
2828
+ d="M7 12H17"
29-
+ vector-effect="non-scaling-stroke"
3029
+ />
3130
+ </svg>
3231
</span>

‎packages/components/src/menu-item/test/__snapshots__/index.jsdom.test.tsx.snap‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,6 @@ exports[`MenuItem > should match snapshot when all props provided 1`] = `
3131
>
3232
<path
3333
d="M4 10H20M4 14H8M10 14H14M16 14H20"
34-
vector-effect="non-scaling-stroke"
3534
/>
3635
</svg>
3736
</button>
@@ -94,7 +93,6 @@ exports[`MenuItem > should match snapshot when isSelected and role are optionall
9493
>
9594
<path
9695
d="M4 10H20M4 14H8M10 14H14M16 14H20"
97-
vector-effect="non-scaling-stroke"
9896
/>
9997
</svg>
10098
</button>

‎packages/components/src/notice/test/__snapshots__/index.jsdom.test.tsx.snap‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,6 @@ exports[`Notice > should match snapshot 1`] = `
5959
>
6060
<path
6161
d="M7.75 16.25L16.25 7.75M16.25 16.25L7.75 7.75"
62-
vector-effect="non-scaling-stroke"
6362
/>
6463
</svg>
6564
</button>

‎packages/editor/src/components/plugin-post-publish-panel/test/__snapshots__/index.jsdom.test.jsx.snap‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,6 @@ exports[`PluginPostPublishPanel > renders fill properly 1`] = `
3030
>
3131
<path
3232
d="M7 13L12 9L17 13"
33-
vector-effect="non-scaling-stroke"
3433
/>
3534
</svg>
3635
</span>

‎packages/editor/src/components/post-saved-state/test/__snapshots__/index.jsdom.test.jsx.snap‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,6 @@ exports[`PostSavedState > returns a disabled button if the post is not saveable
2020
>
2121
<path
2222
d="M14.5 16.25H16.5C18.0188 16.25 19.25 15.0188 19.25 13.5C19.25 11.9812 18.0188 10.75 16.5 10.75C16.4897 10.75 16.4793 10.7501 16.469 10.7502C16.4895 10.5863 16.5 10.4194 16.5 10.25C16.5 8.04086 14.7091 6.25 12.5 6.25C10.4456 6.25 8.75298 7.79872 8.5259 9.79233C8.35472 9.76448 8.17905 9.75 8 9.75C6.20507 9.75 4.75 11.2051 4.75 13C4.75 14.7949 6.20507 16.25 8 16.25H9.5M12 18L12 11.5M14.5 14L12 11.5L9.5 14"
23-
vector-effect="non-scaling-stroke"
2423
/>
2524
</svg>
2625
</button>

‎packages/icons/CHANGELOG.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44

55
### Breaking Changes
66

7+
- Stroke-based icons now scale their stroke width with their size. A 1.5-unit stroke renders at 1px for a 16px icon, 1.25px for a 20px icon, and 1.5px for a 24px icon ([#84081](https://github.com/WordPress/gutenberg/pull/84081)).
78
- Upgrade React to v19 ([#83941](https://github.com/WordPress/gutenberg/pull/83941)).
89

910
### New Features

0 commit comments

Comments
 (0)