A follow up from #11005
In the backstop run for the above PR, I spotted an issue we should look into.
That's from this right-to-left table demo and this file -
|
<Button |
|
variant="primary" |
|
icon={ |
|
<Icon shouldMirrorRTL> |
|
<AlignRightIcon /> |
|
</Icon> |
|
} |
|
iconPosition="end" |
|
onClick={switchTranslation} |
|
> |
|
{translation.switchBtn} |
|
</Button> |
We use <Icon shouldMirrorRTL /> as the preferred way of including an icon that should mirror/flip if the document is set to dir="rtl", so I'm thinking we need to keep that there, and add isInline to let the <Icon> inherit the color and font-size from its parent instead of using our default icon color/size.
And just looking at that demo, looks like we have that same issue in the labels, too. For example, this one
|
<Label |
|
color="green" |
|
icon={ |
|
<Icon shouldMirrorRTL> |
|
<WalkingIcon /> |
|
</Icon> |
|
} |
|
> |
|
{translation.table.rows.status.running} |
|
</Label> |
I updated the first label in the table and added .pf-m-inline to the .pf-v6-c-icon in dev tools and you can see it resized the icon since icons in labels are smaller than our default icon size
I'm not sure how big of a lift it would be, but I would probably suggest we just review each use of <Icon> in the examples/demos and if it's used in a component that wants to style the icon color/size, we consider 1) removing <Icon> if it isn't necessary, and 2) adding isInline if it is necessary.
A follow up from #11005
In the backstop run for the above PR, I spotted an issue we should look into.
That's from this right-to-left table demo and this file -
patternfly-react/packages/react-core/src/demos/RTL/examples/PaginatedTable.tsx
Lines 259 to 270 in 6b56f7f
We use
<Icon shouldMirrorRTL />as the preferred way of including an icon that should mirror/flip if the document is set todir="rtl", so I'm thinking we need to keep that there, and addisInlineto let the<Icon>inherit thecolorandfont-sizefrom its parent instead of using our default icon color/size.And just looking at that demo, looks like we have that same issue in the labels, too. For example, this one
patternfly-react/packages/react-core/src/demos/RTL/examples/PaginatedTable.tsx
Lines 212 to 221 in 6b56f7f
I updated the first label in the table and added
.pf-m-inlineto the.pf-v6-c-iconin dev tools and you can see it resized the icon since icons in labels are smaller than our default icon sizeI'm not sure how big of a lift it would be, but I would probably suggest we just review each use of
<Icon>in the examples/demos and if it's used in a component that wants to style the icon color/size, we consider 1) removing<Icon>if it isn't necessary, and 2) addingisInlineif it is necessary.