Skip to content

Commit c4eead0

Browse files
rkaraivanovrkaraivanov
committed
docs: Updated skills
- Added a prefix to the skill names to indicate they are related to Ignite UI for Web Components. - Updated the README.md file to reflect the changes in the skill names and structure.
1 parent 249e7c0 commit c4eead0

13 files changed

Lines changed: 875 additions & 18 deletions

File tree

‎.prettierignore‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
*.scss
2+
*.md
3+
*.yml

‎elements.md‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
# Element internals
2+
3+
1. reportValidity -> force invalid styles + validation container state
4+
2. setCustomValidity -> no changes; no styles applied on call
5+
6+
- [x] Button?
7+
- [x] Button specification
8+
- [x] Checkbox
9+
- [ ] Checkbox specification
10+
- [x] Combo
11+
- [ ] Combo specification -> Mention multiselect value array (similar to select)
12+
- [x] Datetime input
13+
- [ ] Datetime specification
14+
- [x] Input
15+
- [ ] Input specification
16+
- [x] Mask input
17+
- [ ] Mask specification -> Mention `valueMode` with formatting and form submit interaction
18+
- [x] Radio & Radio Group
19+
- [ ] Radio & Radio Group specification
20+
- [x] Rating
21+
- [ ] Rating specification
22+
- [x] Select
23+
- [ ] Select specification
24+
- [x] Slider
25+
- [ ] Slider specification
26+
- [x] Switch
27+
- [ ] Switch specification
28+
29+
# Counter component
30+
31+
https://github.com/inorganik/countUp.js/blob/master/src/countUp.ts
32+
33+
# Checkbox
34+
35+
- [ ] Update specification with indeterminate submit https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#indeterminate_state_checkboxes
36+
37+
# Calendar
38+
39+
- [ ] - First day localization wih `Intl.Locale` (Firefox pending)
40+
- [ ] - Fixed API docs in the refactoring branch
41+
42+
# Highlight container
43+
44+
- should it traverse Shadow DOM
45+
- should it react to slot changes / sub-tree DOM changes and apply search term if present
46+
- expose additional API - `first`, `last`, `goto(index)`, etc.
47+
48+
# General
49+
50+
- [See this](https://lit.dev/docs/components/events/#adding-event-listeners-to-the-component-or-its-shadow-root) for handling event
51+
delegation for composite components.
52+
53+
<!-- [![Racho's GitHub stats](https://github-readme-stats.vercel.app/api?username=rkaraivanov&show=reviews,discussions_started,discussions_answered,prs_merged,prs_merged_percentage)](https://github.com/anuraghazra/github-readme-stats)
54+
55+
[![Damyan's GitHub stats](https://github-readme-stats.vercel.app/api?username=damyanpetev&show=reviews,discussions_started,discussions_answered,prs_merged,prs_merged_percentage)](https://github.com/anuraghazra/github-readme-stats)
56+
57+
[![Simeon's GitHub stats](https://github-readme-stats.vercel.app/api?username=simeonoff&show=reviews,discussions_started,discussions_answered,prs_merged,prs_merged_percentage)](https://github.com/anuraghazra/github-readme-stats)
58+
59+
[![Konstantin's GitHub stats](https://github-readme-stats.vercel.app/api?username=kdinev&show=reviews,discussions_started,discussions_answered,prs_merged,prs_merged_percentage)](https://github.com/anuraghazra/github-readme-stats) -->

‎highlight-container.md‎

Lines changed: 172 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,172 @@
1+
# Highlight container specification
2+
3+
- [Highlight container specification](#highlight-container-specification)
4+
- [Owned By](#owned-by)
5+
- [Requires approval from:](#requires-approval-from)
6+
- [Signed off by:](#signed-off-by)
7+
- [Revision history](#revision-history)
8+
- [Overview](#overview)
9+
- [Acceptance criteria](#acceptance-criteria)
10+
- [User stories](#user-stories)
11+
- [End-user stories](#end-user-stories)
12+
- [Developer stories](#developer-stories)
13+
- [Functionality](#functionality)
14+
- [End-user experience](#end-user-experience)
15+
- [Developer experience](#developer-experience)
16+
- [Localization](#localization)
17+
- [Keyboard navigation](#keyboard-navigation)
18+
- [API](#api)
19+
- [Properties](#properties)
20+
- [Methods](#methods)
21+
- [Events](#events)
22+
- [Slots](#slots)
23+
- [CSS Shadow Parts](#css-shadow-parts)
24+
- [CSS Variables](#css-variables)
25+
- [Test scenarios](#test-scenarios)
26+
- [Automation](#automation)
27+
- [Accessibility](#accessibility)
28+
- [References](#references)
29+
- [RTL](#rtl)
30+
- [Assumptions and limitations](#assumptions-and-limitations)
31+
32+
## Owned By
33+
34+
**Team Name**: Design and Web Development
35+
36+
**Developer name**: Radoslav Karaivanov
37+
38+
**Designer name**: **TBD**
39+
40+
### Requires approval from:
41+
42+
- [ ] Damyan Petev
43+
- [ ] Svilen Dimchevski
44+
45+
### Signed off by:
46+
47+
- [ ] Simeon Simeonov
48+
- [ ] Radoslav Mirchev
49+
50+
### Revision history
51+
52+
| Version | Author | Date | Notes |
53+
| ------: | ------------------- | ---------- | ------------- |
54+
| 1 | Radoslav Karaivanov | 2024-06-17 | Initial draft |
55+
56+
## Overview
57+
58+
The `igc-highlight` allows for programmatic highlighting of DOM text nodes based on a set of criteria.
59+
It uses browser native APIs and does not modify the page DOM in any way. It supports
60+
61+
### Acceptance criteria
62+
63+
The `igc-highlight` must:
64+
65+
- be WAI-ARIA compliant.
66+
67+
## User stories
68+
69+
### End-user stories
70+
71+
As an end-user I expect to be able to:
72+
73+
- have a clear visual separation of the current highlighted text on the page.
74+
- have a clear visual separation between the current active highlight and the rest.
75+
76+
### Developer stories
77+
78+
As a developer I expect to be able to:
79+
80+
- set a search string and have the component match and highlight all applicable text.
81+
- customize the highlight and active highlight visual styling.
82+
- customize the search condition for matching and highlighting the text.
83+
- customize the component to distinguishes between uppercase and lowercase letters in text.
84+
- programmatically move the current active highlight in order to navigate the end-user.
85+
86+
## Functionality
87+
88+
### End-user experience
89+
90+
> [Design Handoff]
91+
92+
### Developer experience
93+
94+
### Localization
95+
96+
None applicable.
97+
98+
### Keyboard navigation
99+
100+
None applicable since by default the component is non-focusable.
101+
102+
## API
103+
104+
### Properties
105+
106+
| Property | Attribute | Reflected | Property Type | Default | Description |
107+
| ----------------- | -------------- | --------- | -------------------------- | ---------------------------- | ----------------------------------------------------------------------- |
108+
| caseSensitive | case-sensitive | Yes | Boolean | false | Whether to match the searched text with case sensitivity in mind. |
109+
| searchText | search-text | No | string | - | The string to search and highlight in the DOM content of the component. |
110+
| condition | condition | No | 'contains' \| 'startsWith' | contains | The condition to apply when matching text nodes. |
111+
| theme | theme | No | string | igc-default-highlight | The highlight theme name to use for the matched ranges. |
112+
| activeTheme | active-theme | No | string | igc-default-active-highlight | The highlight theme name to use for the current active range. |
113+
| matches | - | No | number | 0 | The total number of matches. |
114+
| current | - | No | number | 0 | The index of the currently active match. |
115+
| includeShadow ? | | | | | |
116+
| matchDiacritics ? | | | | | |
117+
118+
### Methods
119+
120+
| Name | Type signature | Description |
121+
| --------- | --------------------------------------- | --------------------------------------------- |
122+
| previous | `(options?: HighlightNavigation): void` | Moves the active state to the previous match. |
123+
| next | `(options?: HighlightNavigation): void` | Moves the active state to the next match. |
124+
| setActive | `(index: number): void` | |
125+
126+
### Events
127+
128+
None applicable.
129+
130+
### Slots
131+
132+
| Name | Description |
133+
| ------- | ------------------------------------------------------------------------------------------------------------- |
134+
| default | Default slot for the `igc-highlight`. Search and highlight works only for content slotted into the component. |
135+
136+
### CSS Shadow Parts
137+
138+
| Part | Description |
139+
| ---- | ----------- |
140+
141+
### CSS Variables
142+
143+
| Name | Description |
144+
| ---- | ----------- |
145+
146+
## Test scenarios
147+
148+
### Automation
149+
150+
**TBD**
151+
152+
## Accessibility
153+
154+
Since the highlight is visual only no intrinsic WAI-ARIA properties are applied.
155+
It is up to end-users to apply (if required) any accessibility attributes and relationships based
156+
on the application scenario they have.
157+
158+
#### References
159+
160+
### RTL
161+
162+
The component should work in a Right-To-Left context without additional setup or configuration.
163+
164+
## Assumptions and limitations
165+
166+
- The component matches text nodes which are its children. Any component which renders or portals content
167+
outside the parent `igc-highlight` container **will not be** included in the matches.
168+
169+
- The component matches only DOM text nodes. It does not support highlighting values inside inputs
170+
as well as any content that is set through the CSS **content** property.
171+
172+
- Shadow DOM roots are skipped while matching ?

0 commit comments

Comments
 (0)