Skip to content
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

Jump to bottom

Magnifying glass icon is misplaced with .input-search in Ar and He #1061

Closed
MikeTschudi opened this issue Feb 7, 2019 · 3 comments
Closed

Magnifying glass icon is misplaced with .input-search in Ar and He #1061

MikeTschudi opened this issue Feb 7, 2019 · 3 comments
Assignees
@paulcpederson
Labels
bug in development right-to-left

Comments

@MikeTschudi
Copy link
Member

From our i18n reviewer: "In order to follow the RTL habit, the magnifying glass icon should be on the right side of search box."

En
image

Ar & He
image

Sample is from documentation; base HTML:

<html>
<head>
  <link rel="stylesheet" href="https://s3-us-west-1.amazonaws.com/patterns.esri.com/files/calcite-web/1.2.4/css/calcite-web.min.css">
</head>
<body>
  <div class="styleguide-modifiers leader-1 trailer-1 margin-left-1 margin-right-1">

    <div class="styleguide-modifier-example">
      <label>
      Label Text
      <input type="text" placeholder="descriptive or sample text" class="input-success" required="">
      </label>
      <code class="modifier-name">.input-success</code>
    </div>

    <div class="styleguide-modifier-example">
      <label>
      Label Text
      <input type="text" placeholder="descriptive or sample text" class="input-error" required="">
      </label>
      <code class="modifier-name">.input-error</code>
    </div>

    <div class="styleguide-modifier-example">
      <label>
      Label Text
      <input type="text" placeholder="descriptive or sample text" class="input-search" required="">
      </label>
      <code class="modifier-name">.input-search</code>
    </div>

    <div class="styleguide-modifier-example">
      <label>
      Label Text
      <input type="text" placeholder="descriptive or sample text" class="input-search input-minimal" required="">
      </label>
      <code class="modifier-name">.input-search input-minimal</code>
    </div>

  </div>
  <script src="https://s3-us-west-1.amazonaws.com/patterns.esri.com/files/calcite-web/1.2.4/js/calcite-web.min.js"></script>
</body>
</html>

Ar variant:

<html lang="ar" dir="rtl">

He variant:

<html lang="he" dir="rtl">
@MikeTschudi
Copy link
Member Author

Might this be an acceptable solution?

  html[dir="rtl"] .input-search {
    background-position: right center;
    padding-right: 1.5em;
  }

@paulcpederson
Copy link
Member

@MikeTschudi yeah, looks like we fixed the success/warning icons in #990 but missed the search icons. Can probably add the rtl rule to the base class: https://github.com/Esri/calcite-web/blob/master/lib/sass/calcite-web/components/_form.scss#L1

I can try to get this onto the next patch release

@paulcpederson paulcpederson self-assigned this Feb 7, 2019
paulcpederson added a commit to paulcpederson/calcite-web that referenced this issue Feb 25, 2019
@paulcpederson
Esri#1061 - fix rtl styles for input search
9500596
@paulcpederson paulcpederson mentioned this issue Feb 25, 2019
Merged
@paulcpederson
Copy link
Member

part of 1.2.5

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@paulcpederson paulcpederson

Labels
bug in development right-to-left
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@paulcpederson @MikeTschudi