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

fix: make compact tokenizer inner width: auto and make cozy mode horizontally scrollable #775

Merged
merged 10 commits into from Mar 18, 2020

Conversation

mikerodonnell89
Copy link
Member

@mikerodonnell89 mikerodonnell89 commented Mar 11, 2020

Related Issue

Closes SAP/fundamental-styles# #774

@mikerodonnell89 mikerodonnell89 requested a review from a team March 11, 2020 22:40
@netlify
Copy link

netlify bot commented Mar 11, 2020

Deploy preview for fundamental-styles ready!

Built with commit 447466c

https://deploy-preview-775--fundamental-styles.netlify.com

@mikerodonnell89 mikerodonnell89 changed the title make tokenizer__inner width auto and template refactor make tokenizer__inner width auto Mar 11, 2020
@JKMarkowski
Copy link
Contributor

Hello @mikerodonnell89 is it done by purpose?
Opera:
image

Ie11:
image

@mikerodonnell89 mikerodonnell89 changed the title make tokenizer__inner width auto make compact tokenizer inner width: auto and make cozy mode horizontally scrollable Mar 13, 2020
Copy link
Contributor

@InnaAtanasova InnaAtanasova left a comment

Choose a reason for hiding this comment

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

Screen Shot 2020-03-13 at 8 46 16 AM

- I think the width of the tokens is wrong. - The focus outline is cut at the right side - The naming of the PR title is not following the guidelines - Would you please add Assignee, Projects and Milestones?

@mikerodonnell89 mikerodonnell89 self-assigned this Mar 13, 2020
@mikerodonnell89 mikerodonnell89 added this to the Sprint 32 - Miami milestone Mar 13, 2020
@mikerodonnell89 mikerodonnell89 changed the title make compact tokenizer inner width: auto and make cozy mode horizontally scrollable fix: make compact tokenizer inner width: auto and make cozy mode horizontally scrollable Mar 13, 2020
@@ -280,3 +285,75 @@ To show focus on whole element, it's needed to add `.is-focus` into container.
</div>
{% endcapture %}
{% include display-component.html component=compact-tokenizer %}

## Tokenizer - Scrollable
The Compact tokenizer is for large screens.
Copy link
Member Author

Choose a reason for hiding this comment

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

This is the cozy tokenizer. And the user won't have tab keys in cozy mode (phone/tablet)

Copy link
Contributor

Choose a reason for hiding this comment

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

In my my approach, there is added --scrollable, which can be added in cozy and compact mode.

@JKMarkowski
Copy link
Contributor

@mikerodonnell89
This is for desktop
tokenizerdesktop

This one is on mobile/tablets/touch devices
tokenizer

@@ -38,7 +44,7 @@ $block: #{$fd-namespace}-tokenizer;
&__input {
border: none !important;
min-width: 3rem !important;
padding: 0 $fd-tokenizer-spacing 0 0 !important;
padding: 0 !important;
Copy link
Contributor

Choose a reason for hiding this comment

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

Did we want to keep with the important! pattern here or switch to the new pattern we did with shellbar buttons?

Copy link
Contributor

Choose a reason for hiding this comment

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

Now it's handled like on shellbar, thanks for pointing it out :)

@InnaAtanasova InnaAtanasova added this to PRs Review in progress in Development via automation Mar 18, 2020
Development automation moved this from PRs Review in progress to PRs Reviewer approved Mar 18, 2020
@mikerodonnell89 mikerodonnell89 merged commit e34bf0b into master Mar 18, 2020
Development automation moved this from PRs Reviewer approved to Done Mar 18, 2020
@droshev droshev deleted the fix/tokenizer-inner-refactor branch March 19, 2020 14:26
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
Development
  
Done
Development

Successfully merging this pull request may close these issues.

None yet

5 participants