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

docs(select): add modal interface to ion-select docs #3872

Merged
merged 2 commits into from
Nov 4, 2024

Conversation

tanner-reits
Copy link
Member

@tanner-reits tanner-reits commented Oct 31, 2024

NOTE: These docs are for an unreleased feature, to test, please update the version used by the playground to the following dev build:
8.3.4-dev.11730315987.18af6259

What's Changed:

  • Adds documentation on new modal interface where appropriate
  • Adds modal interface playground
  • Updates interface options playground to add new modal type

Associated feature PR: ionic-team/ionic-framework#29972

Copy link

vercel bot commented Oct 31, 2024

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
ionic-docs ✅ Ready (Inspect) Visit Preview 💬 Add feedback Nov 1, 2024 4:00pm

Comment on lines +170 to +171
The `modal` interface has a single `Close` button in the header. This button is only responsible for dismissing the modal. Any selections made will persist
after clicking this button or if the modal is dismissed using an alternative method.
Copy link
Member Author

Choose a reason for hiding this comment

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

I didn't update the playground despite adding this section since the "close" button isn't customizable

Comment on lines -210 to -214
Customizing the interface dialog should be done by following the Customization section in that interface's documentation:
Customizing the interface dialog should be done by following the styling sections (CSS shadow parts, CSS custom properties, and slots) in
that interface's documentation:

- [Alert Customization](alert.md#customization)
- [Action Sheet Customization](action-sheet.md#customization)
- [Popover Customization](popover.md#customization)
Copy link
Member Author

Choose a reason for hiding this comment

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

These links didn't exist anymore, so tried to update this section to point users in the right direction

@tanner-reits tanner-reits marked this pull request as ready for review October 31, 2024 15:32
@tanner-reits tanner-reits requested a review from a team as a code owner October 31, 2024 15:32
Copy link
Member

@brandyscarney brandyscarney left a comment

Choose a reason for hiding this comment

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

Looks good. Tested locally using the dev build with all demos & StackBlitz examples. 👍

Copy link
Contributor

@thetaPC thetaPC left a comment

Choose a reason for hiding this comment

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

LGTM, minor suggestions

Comment on lines +110 to +115
### Modal

import ModalExample from '@site/static/usage/v8/select/interfaces/modal/index.md';

<ModalExample />

Copy link
Contributor

Choose a reason for hiding this comment

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

Suggestion: Move this before Popover so it's alphabetic.

- [Alert](alert.md#css-shadow-parts)
- [Action Sheet](action-sheet.md#css-shadow-parts)
- [Popover](popover.md#css-shadow-parts)
- [Modal](modal.md#css-shadow-parts)
Copy link
Contributor

Choose a reason for hiding this comment

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

Suggestion: Move this before Popover so it's alphabetic.

Comment on lines +53 to +59
<ion-item>
<ion-select label="Modal" id="customModalSelect" interface="modal" placeholder="Select One">
<ion-select-option value="reese's">Reese's</ion-select-option>
<ion-select-option value="snickers">Snickers</ion-select-option>
<ion-select-option value="twix">Twix</ion-select-option>
</ion-select>
</ion-item>
Copy link
Contributor

Choose a reason for hiding this comment

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

Suggestion: Move this before Popover so it's alphabetic.

@tanner-reits tanner-reits merged commit f24a2bd into feature-8.4 Nov 4, 2024
4 checks passed
@tanner-reits tanner-reits deleted the tr/ROU-11301-select-modal-playgrounds branch November 4, 2024 14:17
tanner-reits added a commit that referenced this pull request Nov 4, 2024
* docs(select): update select docs for modal interface

* fix(select): point playground to correct demo
tanner-reits added a commit that referenced this pull request Nov 4, 2024
* docs(select): add `modal` interface to `ion-select` docs (#3872)

* docs(select): update select docs for modal interface

* fix(select): point playground to correct demo

* feat(segment): add playground & docs for segment view (#3875)

* feat(segment): add playground & docs for segment view

* fix(segment-view): api import version

* fix(segment-content): usage & common API sections

* Force CI run
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants