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.

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

Editor: Updated close icon and fixed input text overlap #4167

Merged
merged 2 commits into from Aug 24, 2020

Conversation

mariano-formidable
Copy link
Contributor

@mariano-formidable mariano-formidable commented Aug 21, 2020

Summary

This PR updates the text input used in the Editor. It updates the clear text icon, and prevents the text from being clipped by the icon.

User-facing changes

The text input component used in the "Link" panel and the "Accessibility" panel has been updated.

Testing Instructions

1.) Open a story in the Editor.
2.) Add an image to the page.
3.) Click on the image and type in really long text into the "Link" and/or "Accessibility" panel and notice that the "clear text" icon is a nice big X, and notice that the input text does not get overlapped by the icon (it gets clipped).

Fixes #1874

Screenshot

long_text

@google-cla google-cla bot added the cla: yes label Aug 21, 2020
@github-actions
Copy link
Contributor

github-actions bot commented Aug 21, 2020

Size Change: -49 B (0%)

Total Size: 1.16 MB

ℹ️ View Unchanged
Filename Size Change
assets/css/edit-story.css 268 B 0 B
assets/css/stories-dashboard.css 305 B 0 B
assets/css/web-stories-embed-block.css 515 B 0 B
assets/js/chunk-web-stories-template-0-********************.js 10.2 kB 0 B
assets/js/chunk-web-stories-template-1-********************.js 10.3 kB 0 B
assets/js/chunk-web-stories-template-2-********************.js 10 kB 0 B
assets/js/chunk-web-stories-template-3-********************.js 10.5 kB 0 B
assets/js/chunk-web-stories-template-4-********************.js 10.6 kB 0 B
assets/js/chunk-web-stories-template-5-********************.js 6.86 kB 0 B
assets/js/chunk-web-stories-template-6-********************.js 9.91 kB 0 B
assets/js/chunk-web-stories-template-7-********************.js 9.78 kB 0 B
assets/js/edit-story.js 486 kB -17 B (0%)
assets/js/stories-dashboard.js 512 kB -32 B (0%)
assets/js/web-stories-activation-notice.js 63.6 kB 0 B
assets/js/web-stories-embed-block.js 16.9 kB 0 B

compressed-size-action

@@ -19,6 +19,7 @@ module.exports = {
'./stories/**/*.js',
'../assets/src/dashboard/**/stories/*.@(js|mdx)',
'../assets/src/edit-story/**/stories/*.@(js|mdx)',
'../assets/src/animation/**/stories/*.@(js|mdx)',
Copy link
Contributor Author

Choose a reason for hiding this comment

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

Added our effect/part animations back to storybook.

@@ -100,7 +100,7 @@ export function AnimationPart(type, args) {
[ANIMATION_EFFECTS.ZOOM.value]: EffectZoom,
[ANIMATION_EFFECTS.DROP.value]: EffectDrop,
[ANIMATION_EFFECTS.ROTATE_IN.value]: EffectRotateIn,
}[type] || throughput;
}[type?.value || type] || throughput;
Copy link
Contributor Author

Choose a reason for hiding this comment

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

Small fix so storybook effect animations get back to working.

@mariano-formidable mariano-formidable changed the title [WIP] Editor: Updated close icon and fixed input text overlap Editor: Updated close icon and fixed input text overlap Aug 21, 2020
@mariano-formidable mariano-formidable marked this pull request as ready for review August 21, 2020 22:33
@mariano-formidable mariano-formidable self-assigned this Aug 21, 2020
@codecov
Copy link

codecov bot commented Aug 21, 2020

Codecov Report

Merging #4167 into main will increase coverage by 2.37%.
The diff coverage is 100.00%.

Impacted file tree graph

@@            Coverage Diff             @@
##             main    #4167      +/-   ##
==========================================
+ Coverage   80.09%   82.46%   +2.37%     
==========================================
  Files         809      812       +3     
  Lines       14120    14147      +27     
==========================================
+ Hits        11310    11667     +357     
+ Misses       2810     2480     -330     
Flag Coverage Δ
#karmatests 70.00% <100.00%> (-0.61%) ⬇️
#unittests 65.63% <100.00%> (+<0.01%) ⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

Impacted Files Coverage Δ
assets/src/animation/parts/index.js 35.29% <ø> (ø)
assets/src/edit-story/components/form/text.js 100.00% <100.00%> (ø)
...s/src/dashboard/components/previewErrorBoundary.js 100.00% <0.00%> (ø)
assets/src/dashboard/types.js 100.00% <0.00%> (ø)
...ets/src/dashboard/components/cardGridItem/types.js 100.00% <0.00%> (ø)
assets/src/dashboard/components/types.js 100.00% <0.00%> (ø)
assets/src/dashboard/components/dropdown/index.js 88.46% <0.00%> (+1.92%) ⬆️
...ssets/src/dashboard/components/popoverMenu/menu.js 65.38% <0.00%> (+1.92%) ⬆️
...sets/src/dashboard/components/cardGallery/index.js 95.12% <0.00%> (+2.43%) ⬆️
assets/src/dashboard/utils/usePagePreviewSize.js 89.74% <0.00%> (+2.56%) ⬆️
... and 47 more

Copy link
Contributor

@BrittanyIRL BrittanyIRL left a comment

Choose a reason for hiding this comment

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

👍
Text is now clipped on link and assistive inputs. Tested chrome, firefox, safari.

Also verified that the animations are working again in storybook.

@mariano-formidable mariano-formidable merged commit ad1d3c0 into main Aug 24, 2020
@mariano-formidable mariano-formidable deleted the bug/1874-update-input-display branch August 24, 2020 16:25
@swissspidy swissspidy added Group: Style Panel Type: Enhancement New feature or improvement of an existing feature labels Aug 31, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Group: Style Panel Type: Enhancement New feature or improvement of an existing feature
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Truncate text in input fields with close icon
4 participants