Merge pull request #4472 from storybooks/dd/spellcheck-off

feat(textfilter): turn off spell check in story filter
storybookjs · Oct 23, 2018 · c3aa283 · c3aa283
2 parents cf5162b + c67abf8
commit c3aa283
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 4 deletions.
diff --git a/lib/ui/src/modules/ui/components/stories_panel/__snapshots__/index.stories.storyshot b/lib/ui/src/modules/ui/components/stories_panel/__snapshots__/index.stories.storyshot
@@ -23,9 +23,11 @@ exports[`Storyshots UI|stories/StoriesPanel default 1`] = `
     class="css-79elbk eg9vth70"
   >
     <input
+      autocomplete="off"
       class="css-1yhj4t5 eg9vth71"
       name="filter-text"
       placeholder="Filter"
+      spellcheck="false"
       type="text"
       value=""
     />
@@ -56,9 +58,11 @@ exports[`Storyshots UI|stories/StoriesPanel storiesHierarchies exists but is emp
     class="css-79elbk eg9vth70"
   >
     <input
+      autocomplete="off"
       class="css-1yhj4t5 eg9vth71"
       name="filter-text"
       placeholder="Filter"
+      spellcheck="false"
       type="text"
       value=""
     />
@@ -89,9 +93,11 @@ exports[`Storyshots UI|stories/StoriesPanel when open on mobile device 1`] = `
     class="css-79elbk eg9vth70"
   >
     <input
+      autocomplete="off"
       class="css-1yhj4t5 eg9vth71"
       name="filter-text"
       placeholder="Filter"
+      spellcheck="false"
       type="text"
       value=""
     />
@@ -122,9 +128,11 @@ exports[`Storyshots UI|stories/StoriesPanel with storiesHierarchies prop 1`] = `
     class="css-79elbk eg9vth70"
   >
     <input
+      autocomplete="off"
       class="css-1yhj4t5 eg9vth71"
       name="filter-text"
       placeholder="Filter"
+      spellcheck="false"
       type="text"
       value=""
     />

diff --git a/lib/ui/src/modules/ui/components/stories_panel/__snapshots__/text_filter.stories.storyshot b/lib/ui/src/modules/ui/components/stories_panel/__snapshots__/text_filter.stories.storyshot
@@ -5,9 +5,11 @@ exports[`Storyshots UI|stories/TextFilter with filterText 1`] = `
   class="css-79elbk eg9vth70"
 >
   <input
+    autocomplete="off"
     class="css-1yhj4t5 eg9vth71"
     name="filter-text"
     placeholder="Filter"
+    spellcheck="false"
     type="text"
     value="Filter Text"
   />
@@ -24,9 +26,11 @@ exports[`Storyshots UI|stories/TextFilter without filterText 1`] = `
   class="css-79elbk eg9vth70"
 >
   <input
+    autocomplete="off"
     class="css-1yhj4t5 eg9vth71"
     name="filter-text"
     placeholder="Filter"
+    spellcheck="false"
     type="text"
     value=""
   />

diff --git a/lib/ui/src/modules/ui/components/stories_panel/text_filter.js b/lib/ui/src/modules/ui/components/stories_panel/text_filter.js
@@ -76,6 +76,8 @@ class TextFilter extends React.Component {
     return (
       <Wrapper>
         <Input
+          autoComplete="off"
+          spellCheck="false"
           type="text"
           placeholder="Filter"
           name="filter-text"

diff --git a/lib/ui/src/modules/ui/components/stories_panel/text_filter.test.js b/lib/ui/src/modules/ui/components/stories_panel/text_filter.test.js
@@ -8,15 +8,14 @@ describe('manager.ui.components.stories_panel.test_filter', () => {
   describe('render', () => {
     test('should render input without filterText', () => {
       const wrap = mount(<TextFilter />);
-
-      const input = wrap.find('Styled(input)').first();
+      const input = wrap.find('[name="filter-text"]').first();
 
       expect(input).toHaveProp('placeholder', 'Filter');
     });
 
     test('should render input with filterText', () => {
       const wrap = mount(<TextFilter text="Filter Text" />);
-      const input = wrap.find('Styled(input)').first();
+      const input = wrap.find('[name="filter-text"]').first();
 
       expect(input).toHaveProp('value', 'Filter Text');
     });
@@ -27,7 +26,7 @@ describe('manager.ui.components.stories_panel.test_filter', () => {
       const onChange = jest.fn();
       const wrap = mount(<TextFilter onChange={onChange} />);
 
-      const input = wrap.find('Styled(input)').first();
+      const input = wrap.find('[name="filter-text"]').first();
       input.value = 'new value';
       input.simulate('change', { target: input });