Skip to content
New issue

Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.

#

By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? # to your account

Jump to bottom

fix(doc): add small size input example #1230

Merged
merged 12 commits into from
Dec 12, 2022
Merged

fix(doc): add small size input example #1230

merged 12 commits into from
Dec 12, 2022

Conversation

hannahiss
Copy link
Member

Closes #1229

@julien-deramond julien-deramond added v5 📖 documentation Improvements or additions to documentation fix labels May 2, 2022
louismaximepiton
louismaximepiton reviewed May 2, 2022
View reviewed changes
Copy link
Member

@louismaximepiton louismaximepiton left a comment

Choose a reason for hiding this comment

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

IMO, we should backport the associated CSS too, but we maybe need to warn about it with an ODS alert (as the small version isn't allowed by the brand) ?

@netlify
Copy link

netlify bot commented May 19, 2022 •
edited
Loading

✅ Deploy Preview for boosted ready!

Name Link
🔨 Latest commit 6d1f964
🔍 Latest deploy log https://app.netlify.com/sites/boosted/deploys/6396ed5d18003900095ac581
😎 Deploy Preview https://deploy-preview-1230--boosted.netlify.app/docs/5.2/migration
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

@hannahiss hannahiss force-pushed the main-his-small-size-input branch from 908aa0b to 1ad2db0 Compare May 19, 2022 09:50
louismaximepiton
louismaximepiton reviewed May 25, 2022
View reviewed changes
Copy link
Member

@louismaximepiton louismaximepiton left a comment

Choose a reason for hiding this comment

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

I searched a bit in the doc and it seems like .form-control-sm, .form-select-sm are missing too, maybe you can tackle it with this PR ?

Otherwise, the actual implementation seems good to me

@hannahiss
Copy link
Member Author

I'm really not sure about the sizes of inputs, it is a proposition...

louismaximepiton
louismaximepiton requested changes Jun 13, 2022
View reviewed changes
Copy link
Member

@louismaximepiton louismaximepiton left a comment

Choose a reason for hiding this comment

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

I don't know if this is a good idea since we don't want to show people that they can be used, but I think we should display the small examples in the doc.

IMO, we should try to have every small input to have the same height : 30px or equivalent

@louismaximepiton louismaximepiton force-pushed the main-his-small-size-input branch from defa839 to 40b1527 Compare July 8, 2022 10:52
louismaximepiton
louismaximepiton approved these changes Jul 8, 2022
View reviewed changes
Copy link
Member

@louismaximepiton louismaximepiton left a comment

Choose a reason for hiding this comment

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

LGTM, but we need to discuss a bit on:

  • $line-height-* are weird to me ($line-height-sm > $line-height-base) but could be handled in another PR
  • See on Bs why .input-group sizing changes padding of .form-control instead of having a min-height: like .form-control-* do.
  • .col-form-label-* seems to be not aligned with the input value

@julien-deramond

This comment was marked as resolved.

# to view
@hannahiss hannahiss force-pushed the main-his-small-size-input branch from 95201f2 to 8460bb5 Compare November 15, 2022 10:35
@hannahiss
Copy link
Member Author

Add small size examples to match Bootstrap examples, even if they are not part of ODS, in forms:

  • Forms > Form control > Sizing
  • Forms > Form control > File input
  • Forms > Input group > Sizing
  • Forms > Layout > Horizontal form label sizing
  • Forms > Select > Sizing

Some callouts (warnings about incompatibility with ODS) should be added at all these places like in PR #1614 (if PR #1614 is merged before this one, should be added in this PR, if not, should be added in PR #1614)

@hannahiss
Copy link
Member Author

hannahiss commented Nov 15, 2022 •
edited
Loading

I updated the documentation with missing mentions to small sizes (compared to Bootstrap).

@louismaximepiton louismaximepiton mentioned this pull request Nov 16, 2022
Closed
@julien-deramond
Copy link
Contributor

Could you please update the migration guide as well?

@hannahiss
Copy link
Member Author

Could you please update the migration guide as well?

I'm wondering if you should mention it, because we don't want developers to use these small examples (not compatible with ODS) ! We may discuss it on daily ?

@julien-deramond julien-deramond force-pushed the main-his-small-size-input branch from d7f11c0 to 47eb461 Compare December 12, 2022 06:51
@julien-deramond julien-deramond self-requested a review December 12, 2022 07:38
julien-deramond
julien-deramond approved these changes Dec 12, 2022
View reviewed changes
Copy link
Contributor

@julien-deramond julien-deramond left a comment

Choose a reason for hiding this comment

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

Pushed some minor modifications. LGTM!

@sonarqubecloud
Copy link

Kudos, SonarCloud Quality Gate passed!    Quality Gate passed

Bug A 0 Bugs
Vulnerability A 0 Vulnerabilities
Security Hotspot A 0 Security Hotspots
Code Smell A 0 Code Smells

No Coverage information No Coverage information
0.0% 0.0% Duplication

@julien-deramond julien-deramond merged commit cb36161 into main Dec 12, 2022
@julien-deramond julien-deramond deleted the main-his-small-size-input branch December 12, 2022 09:03
@julien-deramond julien-deramond mentioned this pull request Dec 12, 2022
Closed
This was referenced Sep 12, 2023
Closed
Open
# for free to join this conversation on GitHub. Already have an account? # to comment
Reviewers

@julien-deramond julien-deramond julien-deramond approved these changes

@louismaximepiton louismaximepiton louismaximepiton approved these changes

Assignees
No one assigned
Labels
awaiting-reply 📖 documentation Improvements or additions to documentation fix v5
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

Docs > Forms > Input group: add Small Sizing example
3 participants
@hannahiss @julien-deramond @louismaximepiton