mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-11-09 16:16:41 +08:00
a57be0941d
Issue number: Internal --------- <!-- Please do not submit updates to dependencies unless it fixes an issue. --> <!-- Please try to limit your pull request to one type (bugfix, feature, etc). Submit multiple pull requests if needed. --> ## What is the current behavior? <!-- Please describe the current behavior that you are modifying. --> N/A ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - Adds two global classes for `.ionic-link` (standalone) and `.ionic-link-underline` (underline) appearances. - The global classes apply when directly applied to an anchor element (`a`) or when used on a parent container that renders a link internally. **Usage** Developers will need to import the link global stylesheet at this time to leverage the following CSS classes. ```html <!-- Basic Usage --> <a href="#" class="ionic-link">Standalone</a> <a href="#" class="ionic-link-underline">Underline</a> <!-- Nested Usage --> <div class="ionic-link"> <a href="#">Standalone</a> </div> <div class="ionic-link-underline"> <a href="#">Underline</a> </div> ``` **Focus and Activated States** Developers should apply the `ion-focusable` and `ion-activatable` classes to the anchor elements to enable proper styling on a mobile device. For web-only usages, the fallback `:focus` and `:active` pseudo states will apply correctly. ```html <!-- Basic Usage --> <a href="#" class="ionic-link ion-focusable ion-activatable">Standalone</a> <a href="#" class="ionic-link-underline ion-focusable ion-activatable">Underline</a> ``` ### Design Changes This section is areas of the implementation that are not consistent with the design and why. 1. Font size: Link font sizing is inherited from its content. This is to provide visual consistency when using a link within a paragraph or existing text content. Links should not have an explicit font size, but can be customized by the developer if a specific font size is desired. 2. Color: `currentColor` was used in place of `$ionic-color-neutral-900`. This is to provide better visual consistency when a link is used within content. Text color should be set on the body or text content, which would apply neutral-900 in places where it is applied. 3. The text underline offset in the designs is ~3px, but all of the design implementation is on a 4px grid. We've landed on 2px for the offset here. Discussed with Design and these proposed changes were verbally approved. ## Does this introduce a breaking change? - [ ] Yes - [x] No <!-- If this introduces a breaking change: 1. Describe the impact and migration path for existing applications below. 4. Update the BREAKING.md file with the breaking change. 5. Add "BREAKING CHANGE: [...]" to the commit description when merging. See https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#footer for more information. --> ## Other information <!-- Any other information that is important to this PR such as screenshots of how the component looks before and after the change. -->