Skip to content

Commit ff9d941

Browse files
committed
refactor(icon): gripper icon fallback size
The gripper icon classes used previously were wrong in several ways. For one, they were using '100' size naming in the classes which are not currently used or displayed. These icons are without the number size. The alias values being applied to them also appear to be incorrect when looking at the widths, and the CSS was swapping width for height. That there is no size applied to these icons was obfuscated by the fact that the attribute width="10" is being applied to icons in Storybook. Added a fallback to the default 100 workflow sizing; SWC is also currently showing these icons with workflow sizing. Currently these gripper icons do not have size tokens defined yet, but they may be added in the future "as they are needed"; when these icons start being used.
1 parent a062165 commit ff9d941

File tree

1 file changed

+9
-9
lines changed

1 file changed

+9
-9
lines changed

components/icon/ui-icons.css

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -396,22 +396,22 @@ governing permissions and limitations under the License.
396396
--spectrum-icon-size: var(--spectrum-cross-icon-size-600);
397397
}
398398

399+
/* Note: Gripper icons currently do not having number sizing or size
400+
tokens, so are using the workflow icon size as a fallback. */
401+
399402
/* Triple Gripper */
400-
.spectrum-UIIcon-TripleGripper100 {
401-
inline-size: var(--spectrum-alias-ui-icon-triplegripper-size-100-height);
402-
block-size: var(--spectrum-alias-ui-icon-triplegripper-size-100-width);
403+
.spectrum-UIIcon-TripleGripper {
404+
--spectrum-icon-size: var(--spectrum-workflow-icon-size-100);
403405
}
404406

405407
/* Double Gripper */
406-
.spectrum-UIIcon-DoubleGripper100 {
407-
inline-size: var(--spectrum-alias-ui-icon-doublegripper-size-100-height);
408-
block-size: var(--spectrum-alias-ui-icon-doublegripper-size-100-width);
408+
.spectrum-UIIcon-DoubleGripper {
409+
--spectrum-icon-size: var(--spectrum-workflow-icon-size-100);
409410
}
410411

411412
/* Single Gripper */
412-
.spectrum-UIIcon-SingleGripper100 {
413-
inline-size: var(--spectrum-alias-ui-icon-singlegripper-size-100-height);
414-
block-size: var(--spectrum-alias-ui-icon-singlegripper-size-100-width);
413+
.spectrum-UIIcon-SingleGripper {
414+
--spectrum-icon-size: var(--spectrum-workflow-icon-size-100);
415415
}
416416

417417
/* Corner Triangle */

0 commit comments

Comments
 (0)