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

Search field is very rounded on iOS #229

Closed
lazd opened this issue Jul 26, 2019 · 1 comment · Fixed by #265
Closed

Search field is very rounded on iOS #229

lazd opened this issue Jul 26, 2019 · 1 comment · Fixed by #265

Comments

@lazd
Copy link
Member

lazd commented Jul 26, 2019

Expected Behavior

It should be a little round.

Actual Behavior

It's quite round. Weirdly, it looks proper on focus.

Steps to reproduce

  1. Go here http://opensource.adobe.com/spectrum-css/2.14.0-alpha.9/docs/search.html
  2. Use eyes

Browser name/version/os (ie Chrome Version 62.0.3202.94 (Official Build) (64-bit) MacOS)

Mobile Safari iOS 12.4

Spectrum-CSS version

2.14.0-alpha.9

Sample Code that illustrates the problem

  <form class="spectrum-Search js-form" role="combobox" aria-expanded="false" aria-owns="search-results-listbox" aria-haspopup="listbox">
    <input type="search" placeholder="Search" name="search" autocomplete="off" class="spectrum-Textfield spectrum-Search-input js-input" aria-autocomplete="listbox" aria-owns="search-results-listbox" aria-label="Search">
    <svg class="spectrum-Icon spectrum-UIIcon-Magnifier spectrum-Search-icon" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-Magnifier" />
    </svg>
    <button type="reset" value="Reset" class="spectrum-ClearButton js-clearButton" tabindex="-1" hidden>
      <svg class="spectrum-Icon spectrum-UIIcon-CrossSmall" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-CrossSmall" />
      </svg>
    </button>
  </form>

Screenshots (if applicable)

image
@lazd lazd added Component: Search bug Results from a bug in the CSS implementation and removed bug Results from a bug in the CSS implementation labels Jul 26, 2019
@adobe-bot
Copy link

JIRA issue created: https://jira.corp.adobe.com/browse/SDS-1846

lazd added a commit that referenced this issue Aug 9, 2019
@lazd
Fix search field on iOS, closes #229
3143a76
@lazd lazd closed this as completed in 06688fa Aug 23, 2019
@lazd lazd mentioned this issue Aug 27, 2019
Merged
1 task
jianliao pushed a commit that referenced this issue Aug 27, 2019
@lazd
Move to individually versioned packages with Lerna (#254)
567c5ed 
* New, responsive site based on individually versioned components with silly fast navigation, lazy loaded deps as docs are viewed
  * Basic accessible search with build-time index generation
* Update README for individual versioning, add legacy README with legacy usage
  * Add documentation for site updating and architecture
  * Add docs for documentation generation, link to docs, remove references to Precursors
  * Add instructions for adding/editing components
  * Add docs to show how to update DNA and icons
  * Add docs for getting DNA variables from @spectrum-css/vars
  * Document issues with npm ci and installing optional dependencies

* Update to DNA 5.18.1
* Update icons to 4.1.0
* Audit DNA status for all components
* Add nvmrc
* Export a experimental tree-shakable DNA variable object from @spectrum-css/vars

* Update Textarea line-height and min-height, closes #231
* Fix spinner buttons appearing on Steppers in Firefox, closes #214
* Fix search field on iOS, closes #229 
* Fix Menu chevron vertical alignment, fixes #240
* Fix horizontal alignment of labels in anchor buttons, fixes #239
* Remove button outline when focused in Firefox, fixes #161
* Fix bar loader label in IE 11, fixes #242
* Fix Radio label margins when labels are below, fixes #246
* Fix Checkbox icon color when checkbox imported before icons, fixes #219 (#235)
* Add Adobe Clean UX support, closes #189  (#248)
* Fix fallback fonts for ar, he, ja, zh-Hans, zh-Hant, and ko, closes #232 (#248)
* Removed float from tags, fixes #218 (#237)
* Make Slider grab handle look right in docs, closes #255
* Add missing Asset docs, closes #256
* Add Menu .is-highlighted so we can indicate highlight without mis-using .is-open, closes #258 
* Support using links as menu items, closes #257
* Fix incorrect height for small BarLoader, fixes #259
jianliao pushed a commit that referenced this issue Sep 19, 2019
@lazd @jianliao
feat: move to individually versioned packages with Lerna (#265)
cb7fd4b 
Update Textarea line-height and min-height, closes #231
Fix spinner buttons appearing on Steppers in Firefox, closes #214
Fix search field on iOS, closes #229
Fix Menu chevron vertical alignment, fixes #240
Fix horizontal alignment of labels in anchor buttons, fixes #239
Remove button outline when focused in Firefox, fixes #161
Fix bar loader label in IE 11, fixes #242
Fix Radio label margins when labels are below, fixes #246
Fix Checkbox icon color when checkbox imported before icons, fixes #219 (#235)
Add Adobe Clean UX support, closes #189 (#248)
Fix fallback fonts for ar, he, ja, zh-Hans, zh-Hant, and ko, closes #232 (#248)
Removed float from tags, fixes #218 (#237)
Make Slider grab handle look right in docs, closes #255
Add missing Asset docs, closes #256
Add Menu .is-highlighted so we can indicate highlight without mis-using .is-open, closes #258
Support using links as menu items, closes #257
Fix incorrect height for small BarLoader, fixes #259
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Move to individually versioned packages with Lerna adobe/spectrum-css
2 participants
@lazd @adobe-bot