Skip to content

chore: lint markdown files #266

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.

Sign up for GitHub

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

Open
danielleroux wants to merge 1 commit into
base: main
Choose a base branch
from
Open

chore: lint markdown files #266

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions .github/workflows/build.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,9 @@ jobs:

- uses: ./.github/workflows/actions/turbo

- name: Lint Markdown
run: pnpm lint:markdown

- name: Build
run: pnpm build
env:
Expand Down
3 changes: 3 additions & 0 deletions .github/workflows/pr.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,9 @@ jobs:

- uses: ./.github/workflows/actions/turbo

- name: Lint Markdown
run: pnpm lint:markdown

- name: Build
run: pnpm build
env:
Expand Down
32 changes: 16 additions & 16 deletions docs/components/date-picker/guide.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,22 +41,22 @@ Individual calendar dates within a date picker have five states: Default, hover,
## Dos and Don’ts

<div class="dos-and-donts">
<div class="dos">
<ul aria-label="Recommended practices">
<li>Do use date pickers to ensure accurate date selection</li>
<li>Do provide clear labels when the date picker is used in a form context</li>
<li>Do ensure the date picker is accessible via keyboard navigation</li>
<li>Do use range selection for date periods like booking dates or report timeframes</li>
<li>Do set min and max dates to prevent invalid date selections</li>
</ul>
</div>
<div class="donts">
<ul aria-label="Practices to avoid">
<li>Don’t use date pickers for dates that are far in the past or future, use [date inputs](../input) instead</li>
<li>Don’t clutter the date picker interface with unnecessary options</li>
<li>Don’t forget to handle empty or invalid date states in your validation logic</li>
</ul>
</div>
<div class="dos">
<ul aria-label="Recommended practices">
<li>Do use date pickers to ensure accurate date selection</li>
<li>Do provide clear labels when the date picker is used in a form context</li>
<li>Do ensure the date picker is accessible via keyboard navigation</li>
<li>Do use range selection for date periods like booking dates or report timeframes</li>
<li>Do set min and max dates to prevent invalid date selections</li>
</ul>
</div>
<div class="donts">
<ul aria-label="Practices to avoid">
<li>Don’t use date pickers for dates that are far in the past or future, use [date inputs](../input) instead</li>
<li>Don’t clutter the date picker interface with unnecessary options</li>
<li>Don’t forget to handle empty or invalid date states in your validation logic</li>
</ul>
</div>
</div>

## Related
Expand Down
9 changes: 6 additions & 3 deletions docs/components/date-time-picker/code.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,8 +12,9 @@ import DatetimepickerPlayground from '@site/docs/autogenerated/playground/dateti

<DatetimepickerPlayground height="28rem" />

<!-- Re-add this when migrating to the rework components -->
<!-- # Translation
{/* Re-add this when migrating to the rework components

# Translation
The `ix-date-picker` uses the DayJS locale for the translations of the names of the weekdays and months. To change the default english translation you have to import the desired DayJS locale. Please refer to the [DayJS documentation](https://day.js.org/docs/en/i18n/loading-into-browser) or the examples below.

```html
Expand All @@ -36,6 +37,8 @@ export default async () => {
const locale = await import('dayjs/locale/de');
return <IxDateTimePicker dayJsLocale={locale} />;
};
``` -->
```

*/}

<PropsApi />
32 changes: 16 additions & 16 deletions docs/components/date-time-picker/guide.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,22 +42,22 @@ Individual calendar dates within a date time picker have five states: Default, h
## Dos and Don’ts

<div class="dos-and-donts">
<div class="dos">
<ul aria-label="Recommended practices">
<li>Do use date time pickers when both date and time information are required</li>
<li>Do ensure the date time picker is accessible via keyboard navigation</li>
<li>Do use range selection for time periods like booking appointments or scheduling events</li>
<li>Do set appropriate min and max dates to prevent invalid selections</li>
</ul>
</div>
<div class="donts">
<ul aria-label="Practices to avoid">
<li>Don’t use date time pickers when only a date or only a time is needed (use [date pickers](../date-picker) or [time pickers](../time-picker) instead)</li>
<li>Don’t forget to validate both date and time inputs in your form logic</li>
<li>Don’t use date time pickers for dates that are far in the past or future without setting appropriate min and max constraints</li>
<li>Don’t clutter the interface with unnecessary time precision when approximate times are sufficient</li>
</ul>
</div>
<div class="dos">
<ul aria-label="Recommended practices">
<li>Do use date time pickers when both date and time information are required</li>
<li>Do ensure the date time picker is accessible via keyboard navigation</li>
<li>Do use range selection for time periods like booking appointments or scheduling events</li>
<li>Do set appropriate min and max dates to prevent invalid selections</li>
</ul>
</div>
<div class="donts">
<ul aria-label="Practices to avoid">
<li>Don’t use date time pickers when only a date or only a time is needed (use [date pickers](../date-picker) or [time pickers](../time-picker) instead)</li>
<li>Don’t forget to validate both date and time inputs in your form logic</li>
<li>Don’t use date time pickers for dates that are far in the past or future without setting appropriate min and max constraints</li>
<li>Don’t clutter the interface with unnecessary time precision when approximate times are sufficient</li>
</ul>
</div>
</div>

## Related
Expand Down
12 changes: 6 additions & 6 deletions docs/components/forms-validation/code.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,23 +60,23 @@ To suppress the internal validation of a component, you have to provide the `nov
<Admonition type="info" title="Important">
Please note that using the `required` attribute in an Angular application could result in unfavourabe behaviour displaying the field as invalid even if there was no user interaction yet.
To avoid that it is suggested not to add the `required` attribute, but implement a custom validator for required fields instead (see `name` and `last-name` in the following code).
</Admonition>
<FormValidationPlayground onlyFramework="angular" examplesByName includeCssFile />
</Admonition>
<FormValidationPlayground onlyFramework="angular" examplesByName includeCssFile />

## React

<Admonition type="info" title="Just an example">
Using `react-form-hook` is just an example to demonstrate how validation could be done
within React. You can use any other validation library or write your own validation logic.
</Admonition>
<FormValidationPlayground onlyFramework="react" examplesByName includeCssFile />
</Admonition>
<FormValidationPlayground onlyFramework="react" examplesByName includeCssFile />

## Vue

<Admonition type="info" title="Just an example">
Using `@vuelidate/core` is just an example to demonstrate how validation could be done
within Vue. You can use any other validation library or write your own validation logic.
</Admonition>
<FormValidationPlayground onlyFramework="vue" examplesByName includeCssFile />
</Admonition>
<FormValidationPlayground onlyFramework="vue" examplesByName includeCssFile />


26 changes: 13 additions & 13 deletions docs/components/input-date-time/guide.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,19 +56,19 @@ Date time input has five states: Default, hover, disabled, read-only and focused
## Dos and Don’ts

<div class="dos-and-donts">
<div class="dos">
<ul aria-label="Recommended practices">
<li>Do use consistent date and time formats throughout the application to avoid confusion</li>
<li>Do provide clear instructions on the expected format, such as "Enter the date time in yyyy/mm/dd HH:mm format"</li>
<li>Do consider localization to adapt date and time formats to local conventions</li>
<li>Do use separate inputs for start and end date times when defining time ranges</li>
</ul>
</div>
<div class="donts">
<ul aria-label="Practices to avoid">
<li>Don't use date time inputs when only a date or only a time is needed (use [date input](../input-date) or [time input](../input-time) instead)</li>
</ul>
</div>
<div class="dos">
<ul aria-label="Recommended practices">
<li>Do use consistent date and time formats throughout the application to avoid confusion</li>
<li>Do provide clear instructions on the expected format, such as "Enter the date time in yyyy/mm/dd HH:mm format"</li>
<li>Do consider localization to adapt date and time formats to local conventions</li>
<li>Do use separate inputs for start and end date times when defining time ranges</li>
</ul>
</div>
<div class="donts">
<ul aria-label="Practices to avoid">
<li>Don't use date time inputs when only a date or only a time is needed (use [date input](../input-date) or [time input](../input-time) instead)</li>
</ul>
</div>
</div>

## Related
Expand Down
26 changes: 13 additions & 13 deletions docs/components/input-time/guide.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,19 +57,19 @@ Time input has five states: Default, hover, disabled, read-only and focused.
## Dos and Don’ts

<div className="dos-and-donts">
<div className="dos">
<ul aria-label="Recommended practices">
<li>Do use consistent time formats throughout the application to avoid confusion</li>
<li>Do add helper text to clarify the time format being used</li>
<li>Do ensure the time picker is accessible via keyboard</li>
<li>Do consider localization to adapt time formats to local conventions</li>
</ul>
</div>
<div className="donts">
<ul aria-label="Practices to avoid">
<li>Don’t use the same input for start and end times, instead separate them</li>
</ul>
</div>
<div className="dos">
<ul aria-label="Recommended practices">
<li>Do use consistent time formats throughout the application to avoid confusion</li>
<li>Do add helper text to clarify the time format being used</li>
<li>Do ensure the time picker is accessible via keyboard</li>
<li>Do consider localization to adapt time formats to local conventions</li>
</ul>
</div>
<div className="donts">
<ul aria-label="Practices to avoid">
<li>Don’t use the same input for start and end times, instead separate them</li>
</ul>
</div>
</div>

## Related
Expand Down
24 changes: 12 additions & 12 deletions docs/components/loading-modal/guide.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,18 +31,18 @@ Loading modals have two states: Closed and opened.
## Dos and Don’ts

<div className="dos-and-donts">
<div className="dos">
<ul aria-label="Recommended practices">
<li>Do only use if any user interaction needs to be blocked, otherwise use [spinners](../spinner) instead</li>
<li>Do use if user interaction needs to be blocked and the progress is unknown, otherwise use [progress indicators](../progress-indicator) placed in [custom modals](../modal) instead</li>
</ul>
</div>
<div className="donts">
<ul aria-label="Practices to avoid">
<li>Don’t block users for long tasks without an alternative</li>
<li>Don’t show vague messages that leave users unsure what is happening</li>
</ul>
</div>
<div className="dos">
<ul aria-label="Recommended practices">
<li>Do only use if any user interaction needs to be blocked, otherwise use [spinners](../spinner) instead</li>
<li>Do use if user interaction needs to be blocked and the progress is unknown, otherwise use [progress indicators](../progress-indicator) placed in [custom modals](../modal) instead</li>
</ul>
</div>
<div className="donts">
<ul aria-label="Practices to avoid">
<li>Don’t block users for long tasks without an alternative</li>
<li>Don’t show vague messages that leave users unsure what is happening</li>
</ul>
</div>
</div>

## Related
Expand Down
26 changes: 13 additions & 13 deletions docs/components/message-modal/guide.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,19 +57,19 @@ Message modals have two states: Closed and opened.
## Dos and Don’ts

<div className="dos-and-donts">
<div className="dos">
<ul aria-label="Recommended practices">
<li>Do use action labels that describe the result (avoid Yes or No)</li>
<li>Do communicate consequences clearly for destructive actions</li>
<li>Do keep messages short and scannable</li>
</ul>
</div>
<div className="donts">
<ul aria-label="Practices to avoid">
<li>Don’t use message modals for non-essential information, use [toasts](../toast) instead</li>
<li>Don’t hide confirm actions behind ambiguous labels</li>
</ul>
</div>
<div className="dos">
<ul aria-label="Recommended practices">
<li>Do use action labels that describe the result (avoid Yes or No)</li>
<li>Do communicate consequences clearly for destructive actions</li>
<li>Do keep messages short and scannable</li>
</ul>
</div>
<div className="donts">
<ul aria-label="Practices to avoid">
<li>Don’t use message modals for non-essential information, use [toasts](../toast) instead</li>
<li>Don’t hide confirm actions behind ambiguous labels</li>
</ul>
</div>
</div>

## Related
Expand Down
34 changes: 17 additions & 17 deletions docs/components/modal/guide.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,23 +59,23 @@ Modals have two states: Closed and opened.
## Dos and Don’ts

<div className="dos-and-donts">
<div className="dos">
<ul aria-label="Recommended practices">
<li>Do provide at least one visible way to close the modal</li>
<li>Do provide a clear primary action that describes the result</li>
<li>Do ensure all controls are accessible by keyboard and screen‑reader</li>
<li>Do preserve scroll position and page state when closing</li>
<li>Do return users to the previous state when cancelling, not an unrelated page</li>
</ul>
</div>
<div className="donts">
<ul aria-label="Practices to avoid">
<li>Don’t use modals if a decision should be made (use [message modals](../message-modal) instead)</li>
<li>Don’t nest modals, e.g. to load more data, instead use [spinners](../spinner) within modal contents)</li>
<li>Don’t auto close modals for irreversible actions</li>
<li>Don’t overload the modal with unrelated content</li>
</ul>
</div>
<div className="dos">
<ul aria-label="Recommended practices">
<li>Do provide at least one visible way to close the modal</li>
<li>Do provide a clear primary action that describes the result</li>
<li>Do ensure all controls are accessible by keyboard and screen‑reader</li>
<li>Do preserve scroll position and page state when closing</li>
<li>Do return users to the previous state when cancelling, not an unrelated page</li>
</ul>
</div>
<div className="donts">
<ul aria-label="Practices to avoid">
<li>Don’t use modals if a decision should be made (use [message modals](../message-modal) instead)</li>
<li>Don’t nest modals, e.g. to load more data, instead use [spinners](../spinner) within modal contents)</li>
<li>Don’t auto close modals for irreversible actions</li>
<li>Don’t overload the modal with unrelated content</li>
</ul>
</div>
</div>

## Related
Expand Down
40 changes: 20 additions & 20 deletions docs/components/overview.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,53 +14,53 @@ import { CategoryButton } from '@site/src/components/CategoryButton';
#

<IxLayoutGrid style={{marginBottom: '3rem'}} no-margin>
<IxRow style={{gap: '0.5rem', justifyContent: 'center'}}>
<CategoryButton
<IxRow style={{gap: '0.5rem', justifyContent: 'center'}}>
<CategoryButton
title="Application frame"
link="#application-frame">
![](https://www.figma.com/design/wEptRgAezDU1z80Cn3eZ0o/iX-Documentation-illustrations?node-id=5186-249&t=gkh6VNlJun96I6Ac-4)
</CategoryButton>
<CategoryButton
</CategoryButton>
<CategoryButton
title="Navigation and hierarchy"
link="#navigation-and-hierarchy">
![](https://www.figma.com/design/wEptRgAezDU1z80Cn3eZ0o/iX-Documentation-illustrations?node-id=5186-259&t=gkh6VNlJun96I6Ac-4)
</CategoryButton>
<CategoryButton
</CategoryButton>
<CategoryButton
title="Containers and layouts"
link="#containers-and-layouts">
![](https://www.figma.com/design/wEptRgAezDU1z80Cn3eZ0o/iX-Documentation-illustrations?node-id=5186-269&t=gkh6VNlJun96I6Ac-4)
</CategoryButton>
<CategoryButton
</CategoryButton>
<CategoryButton
title="Forms"
link="#forms">
![](https://www.figma.com/design/wEptRgAezDU1z80Cn3eZ0o/iX-Documentation-illustrations?node-id=5186-283&t=gkh6VNlJun96I6Ac-4)
</CategoryButton>
<CategoryButton
</CategoryButton>
<CategoryButton
title="Input fields and selections"
link="#input-fields-and-selections">
![](https://www.figma.com/design/wEptRgAezDU1z80Cn3eZ0o/iX-Documentation-illustrations?node-id=5186-298&t=gkh6VNlJun96I6Ac-11)
</CategoryButton>
<CategoryButton
</CategoryButton>
<CategoryButton
title="Buttons and actions"
link="#buttons-and-actions">
![](https://www.figma.com/design/wEptRgAezDU1z80Cn3eZ0o/iX-Documentation-illustrations?node-id=5186-305&t=gkh6VNlJun96I6Ac-11)
</CategoryButton>
<CategoryButton
</CategoryButton>
<CategoryButton
title="System feedback and status"
link="#system-feedback-and-status">
![](https://www.figma.com/design/wEptRgAezDU1z80Cn3eZ0o/iX-Documentation-illustrations?node-id=5186-332&t=gkh6VNlJun96I6Ac-11)
</CategoryButton>
<CategoryButton
</CategoryButton>
<CategoryButton
title="Data display"
link="#data-display">
![](https://www.figma.com/design/wEptRgAezDU1z80Cn3eZ0o/iX-Documentation-illustrations?node-id=5186-370&t=gkh6VNlJun96I6Ac-11)
</CategoryButton>
<CategoryButton
</CategoryButton>
<CategoryButton
title="Charts"
link="#charts">
![](https://www.figma.com/design/wEptRgAezDU1z80Cn3eZ0o/iX-Documentation-illustrations?node-id=5186-387&t=gkh6VNlJun96I6Ac-11)
</CategoryButton>
</IxRow>
</CategoryButton>
</IxRow>
</IxLayoutGrid>

## Application frame
Expand Down
Loading
Loading