Skip to content

fix(search-input): mirror search icon in rtl, fix double border #9602

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Sep 18, 2023
Merged

fix(search-input): mirror search icon in rtl, fix double border #9602

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
c0d55a8
fix(search-input): mirror search icon in rtl, fix double border
mcoker Sep 12, 2023
7d97320
chore: use icon component with shouldMirrorRTL
mcoker Sep 13, 2023
3ed78e4
chore: snaps
mcoker Sep 14, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 5 additions & 2 deletions packages/react-core/src/components/SearchInput/SearchInput.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import * as React from 'react';
import { css } from '@patternfly/react-styles';
import { Button, ButtonVariant } from '../Button';
import { Badge } from '../Badge';
import { Icon } from '../Icon';
import AngleDownIcon from '@patternfly/react-icons/dist/esm/icons/angle-down-icon';
import AngleUpIcon from '@patternfly/react-icons/dist/esm/icons/angle-up-icon';
import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
Expand Down Expand Up @@ -375,15 +376,17 @@ const SearchInputBase: React.FunctionComponent<SearchInputProps> = ({
</InputGroupItem>
)}
{!!onSearch && (
<InputGroupItem isPlain>
<InputGroupItem>
<Button
type="submit"
variant={ButtonVariant.control}
aria-label={submitSearchButtonLabel}
onClick={onSearchHandler}
isDisabled={isDisabled}
>
<ArrowRightIcon />
Copy link
Contributor

@tlabaj tlabaj Sep 13, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should this be updated no what Eric's PR #9609 went in

Copy link
Contributor Author

@mcoker mcoker Sep 13, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I like that, what do you think @thatblindgeye and @wise-king-sullyman? Instead of adding the class directly to an icon, use the icon component. It's not hard-coding a class, and if we change the classname or how an icon mirrors/flips, it's an update to the icon component instead of potentially having to update all components that are referencing this class directly.

Copy link
Contributor

@thatblindgeye thatblindgeye Sep 13, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'd be in favor of that. I have a similar situation in my DataList PR. It'd also mean using our Icon component in more places as well so could be win-win.

<Icon shouldMirrorRTL>
<ArrowRightIcon />
</Icon>
</Button>
</InputGroupItem>
)}
Expand Down
170 changes: 105 additions & 65 deletions ...s/react-core/src/components/SearchInput/__tests__/__snapshots__/SearchInput.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -103,7 +103,7 @@ exports[`SearchInput advanced search 1`] = `
</button>
</div>
<div
class="pf-v5-c-input-group__item pf-m-plain"
class="pf-v5-c-input-group__item"
>
<button
aria-disabled="false"
Expand All @@ -114,19 +114,27 @@ exports[`SearchInput advanced search 1`] = `
data-ouia-safe="true"
type="submit"
>
<svg
aria-hidden="true"
class="pf-v5-svg"
fill="currentColor"
height="1em"
role="img"
viewBox="0 0 448 512"
width="1em"
<span
class="pf-v5-c-icon"
>
<path
d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"
/>
</svg>
<span
class="pf-v5-c-icon__content pf-v5-m-mirror-inline-rtl"
>
<svg
aria-hidden="true"
class="pf-v5-svg"
fill="currentColor"
height="1em"
role="img"
viewBox="0 0 448 512"
width="1em"
>
<path
d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"
/>
</svg>
</span>
</span>
</button>
</div>
</div>
Expand Down Expand Up @@ -245,7 +253,7 @@ exports[`SearchInput advanced search with custom attributes 1`] = `
</button>
</div>
<div
class="pf-v5-c-input-group__item pf-m-plain"
class="pf-v5-c-input-group__item"
>
<button
aria-disabled="false"
Expand All @@ -256,19 +264,27 @@ exports[`SearchInput advanced search with custom attributes 1`] = `
data-ouia-safe="true"
type="submit"
>
<svg
aria-hidden="true"
class="pf-v5-svg"
fill="currentColor"
height="1em"
role="img"
viewBox="0 0 448 512"
width="1em"
<span
class="pf-v5-c-icon"
>
<path
d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"
/>
</svg>
<span
class="pf-v5-c-icon__content pf-v5-m-mirror-inline-rtl"
>
<svg
aria-hidden="true"
class="pf-v5-svg"
fill="currentColor"
height="1em"
role="img"
viewBox="0 0 448 512"
width="1em"
>
<path
d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"
/>
</svg>
</span>
</span>
</button>
</div>
</div>
Expand Down Expand Up @@ -579,7 +595,7 @@ exports[`SearchInput renders search input in strict mode 1`] = `
</button>
</div>
<div
class="pf-v5-c-input-group__item pf-m-plain"
class="pf-v5-c-input-group__item"
>
<button
aria-disabled="false"
Expand All @@ -590,19 +606,27 @@ exports[`SearchInput renders search input in strict mode 1`] = `
data-ouia-safe="true"
type="submit"
>
<svg
aria-hidden="true"
class="pf-v5-svg"
fill="currentColor"
height="1em"
role="img"
viewBox="0 0 448 512"
width="1em"
<span
class="pf-v5-c-icon"
>
<path
d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"
/>
</svg>
<span
class="pf-v5-c-icon__content pf-v5-m-mirror-inline-rtl"
>
<svg
aria-hidden="true"
class="pf-v5-svg"
fill="currentColor"
height="1em"
role="img"
viewBox="0 0 448 512"
width="1em"
>
<path
d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"
/>
</svg>
</span>
</span>
</button>
</div>
</div>
Expand Down Expand Up @@ -746,7 +770,7 @@ exports[`SearchInput search input with hint 1`] = `
</div>
</div>
<div
class="pf-v5-c-input-group__item pf-m-plain"
class="pf-v5-c-input-group__item"
>
<button
aria-disabled="false"
Expand All @@ -757,19 +781,27 @@ exports[`SearchInput search input with hint 1`] = `
data-ouia-safe="true"
type="submit"
>
<svg
aria-hidden="true"
class="pf-v5-svg"
fill="currentColor"
height="1em"
role="img"
viewBox="0 0 448 512"
width="1em"
<span
class="pf-v5-c-icon"
>
<path
d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"
/>
</svg>
<span
class="pf-v5-c-icon__content pf-v5-m-mirror-inline-rtl"
>
<svg
aria-hidden="true"
class="pf-v5-svg"
fill="currentColor"
height="1em"
role="img"
viewBox="0 0 448 512"
width="1em"
>
<path
d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"
/>
</svg>
</span>
</span>
</button>
</div>
</div>
Expand Down Expand Up @@ -898,7 +930,7 @@ exports[`SearchInput simple search input 1`] = `
</div>
</div>
<div
class="pf-v5-c-input-group__item pf-m-plain"
class="pf-v5-c-input-group__item"
>
<button
aria-disabled="false"
Expand All @@ -909,19 +941,27 @@ exports[`SearchInput simple search input 1`] = `
data-ouia-safe="true"
type="submit"
>
<svg
aria-hidden="true"
class="pf-v5-svg"
fill="currentColor"
height="1em"
role="img"
viewBox="0 0 448 512"
width="1em"
<span
class="pf-v5-c-icon"
>
<path
d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"
/>
</svg>
<span
class="pf-v5-c-icon__content pf-v5-m-mirror-inline-rtl"
>
<svg
aria-hidden="true"
class="pf-v5-svg"
fill="currentColor"
height="1em"
role="img"
viewBox="0 0 448 512"
width="1em"
>
<path
d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"
/>
</svg>
</span>
</span>
</button>
</div>
</div>
Expand Down
68 changes: 42 additions & 26 deletions ...precated/components/ContextSelector/__tests__/__snapshots__/ContextSelector.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -128,7 +128,7 @@ exports[`ContextSelector Renders ContextSelector open 1`] = `
</div>
</div>
<div
class="pf-v5-c-input-group__item pf-m-plain"
class="pf-v5-c-input-group__item"
>
<button
aria-disabled="false"
Expand All @@ -139,19 +139,27 @@ exports[`ContextSelector Renders ContextSelector open 1`] = `
data-ouia-safe="true"
type="submit"
>
<svg
aria-hidden="true"
class="pf-v5-svg"
fill="currentColor"
height="1em"
role="img"
viewBox="0 0 448 512"
width="1em"
<span
class="pf-v5-c-icon"
>
<path
d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"
/>
</svg>
<span
class="pf-v5-c-icon__content pf-v5-m-mirror-inline-rtl"
>
<svg
aria-hidden="true"
class="pf-v5-svg"
fill="currentColor"
height="1em"
role="img"
viewBox="0 0 448 512"
width="1em"
>
<path
d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"
/>
</svg>
</span>
</span>
</button>
</div>
</div>
Expand Down Expand Up @@ -305,7 +313,7 @@ exports[`ContextSelector Renders in strict mode 1`] = `
</div>
</div>
<div
class="pf-v5-c-input-group__item pf-m-plain"
class="pf-v5-c-input-group__item"
>
<button
aria-disabled="false"
Expand All @@ -316,19 +324,27 @@ exports[`ContextSelector Renders in strict mode 1`] = `
data-ouia-safe="true"
type="submit"
>
<svg
aria-hidden="true"
class="pf-v5-svg"
fill="currentColor"
height="1em"
role="img"
viewBox="0 0 448 512"
width="1em"
<span
class="pf-v5-c-icon"
>
<path
d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"
/>
</svg>
<span
class="pf-v5-c-icon__content pf-v5-m-mirror-inline-rtl"
>
<svg
aria-hidden="true"
class="pf-v5-svg"
fill="currentColor"
height="1em"
role="img"
viewBox="0 0 448 512"
width="1em"
>
<path
d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"
/>
</svg>
</span>
</span>
</button>
</div>
</div>
Expand Down