Skip to content

Commit

Permalink
docs(all): 📝 update radio checkbox ex with docs
Browse files Browse the repository at this point in the history
  • Loading branch information
@navin-moorthy
navin-moorthy committed Sep 23, 2021
1 parent 5dfcbab commit 2186fb4
Show file tree
Hide file tree
Showing 18 changed files with 108 additions and 113 deletions.
4 changes: 2 additions & 2 deletions docs/breadcrumb.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,8 +21,8 @@ for its
import * as React from "react";

import {
Breadcrumbs as RenderlesskitBreadcrumbs,
BreadcrumbLink,
Breadcrumbs as RenderlesskitBreadcrumbs,
} from "@renderlesskit/react";

export const Breadcrumbs = () => {
Expand Down Expand Up @@ -60,7 +60,7 @@ export const Breadcrumbs = () => {
export default Breadcrumbs;
```

[![Edit CodeSandbox](https://img.shields.io/badge/Breadcrumbs-Open%20On%20CodeSandbox-%230971f1?style=for-the-badge&logo=codesandbox&labelColor=151515)](https://codesandbox.io/s/40ezi)
[![Edit CodeSandbox](https://img.shields.io/badge/Breadcrumbs-Open%20On%20CodeSandbox-%230971f1?style=for-the-badge&logo=codesandbox&labelColor=151515)](https://codesandbox.io/s/z16je)

## Accessibility Requirement

Expand Down
7 changes: 4 additions & 3 deletions docs/calendar.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,15 +31,16 @@ keyboard navigaiton & focus management.
import * as React from "react";

import {
useCalendarState,
Calendar as CalendarWrapper,
CalendarButton,
CalendarCell,
CalendarCellButton,
CalendarGrid,
CalendarHeader,
CalendarWeekTitle,
useCalendarState,
} from "@renderlesskit/react";

import {
ChevronLeft,
ChevronRight,
Expand Down Expand Up @@ -140,9 +141,9 @@ Also we can customize and style the ranges with CSS attribute selectors
}
```

[![Edit CodeSandbox](https://img.shields.io/badge/Calendar-Open%20On%20CodeSandbox-%230971f1?style=for-the-badge&logo=codesandbox&labelColor=151515)](https://codesandbox.io/s/emwe0)
[![Edit CodeSandbox](https://img.shields.io/badge/Calendar-Open%20On%20CodeSandbox-%230971f1?style=for-the-badge&logo=codesandbox&labelColor=151515)](https://codesandbox.io/s/qojzs)

[![Edit CodeSandbox](https://img.shields.io/badge/Range%20Calendar-Open%20On%20CodeSandbox-%230971f1?style=for-the-badge&logo=codesandbox&labelColor=151515)](https://codesandbox.io/s/wypyx)
[![Edit CodeSandbox](https://img.shields.io/badge/Range%20Calendar-Open%20On%20CodeSandbox-%230971f1?style=for-the-badge&logo=codesandbox&labelColor=151515)](https://codesandbox.io/s/rdtk7)

## Composition

Expand Down
6 changes: 3 additions & 3 deletions docs/checkbox.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,10 +22,10 @@ By default, it renders the native `<input type="checkbox">`.
import * as React from "react";

import {
useCheckboxState,
Checkbox as RenderlesskitCheckbox,
USE_CHECKBOX_STATE_KEYS,
splitStateProps,
USE_CHECKBOX_STATE_KEYS,
useCheckboxState,
} from "@renderlesskit/react";

export const Checkbox = props => {
Expand All @@ -42,7 +42,7 @@ export const Checkbox = props => {
export default Checkbox;
```

[![Edit CodeSandbox](https://img.shields.io/badge/Checkbox%20Basic-Open%20On%20CodeSandbox-%230971f1?style=for-the-badge&logo=codesandbox&labelColor=151515)](https://codesandbox.io/s/y9yts)
[![Edit CodeSandbox](https://img.shields.io/badge/Checkbox%20Basic-Open%20On%20CodeSandbox-%230971f1?style=for-the-badge&logo=codesandbox&labelColor=151515)](https://codesandbox.io/s/vwt44)

## Accessibility Requirement

Expand Down
33 changes: 17 additions & 16 deletions docs/datepicker.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,20 +28,21 @@ for the keyboard navigation & accessibility features.
import * as React from "react";

import {
DatePicker,
DatePickerSegment,
DatePickerContent,
DatePickerTrigger,
useDatePickerState,
DatePickerSegmentField,
Calendar as CalendarWrapper,
CalendarButton,
CalendarCell,
CalendarCellButton,
CalendarGrid,
CalendarHeader,
CalendarWeekTitle,
DatePicker,
DatePickerContent,
DatePickerSegment,
DatePickerSegmentField,
DatePickerTrigger,
useDatePickerState,
} from "@renderlesskit/react";

import {
CalendarIcon,
ChevronLeft,
Expand Down Expand Up @@ -139,27 +140,27 @@ const Calendar = state => {
};
```

[![Edit CodeSandbox](https://img.shields.io/badge/DatePicker-Open%20On%20CodeSandbox-%230971f1?style=for-the-badge&logo=codesandbox&labelColor=151515)](https://codesandbox.io/s/5hx47)
[![Edit CodeSandbox](https://img.shields.io/badge/DatePicker-Open%20On%20CodeSandbox-%230971f1?style=for-the-badge&logo=codesandbox&labelColor=151515)](https://codesandbox.io/s/kzk3i)

### Range DatePicker

```js
import React from "react";

import {
DatePicker,
DatePickerContent,
DatePickerSegment,
DatePickerTrigger,
DatePickerSegmentField,
useDateRangePickerState,
Calendar,
CalendarButton,
CalendarCell,
CalendarCellButton,
CalendarGrid,
CalendarHeader,
CalendarButton,
CalendarWeekTitle,
CalendarCellButton,
DatePicker,
DatePickerContent,
DatePickerSegment,
DatePickerSegmentField,
DatePickerTrigger,
useDateRangePickerState,
} from "@renderlesskit/react";

import {
Expand Down Expand Up @@ -279,7 +280,7 @@ const RangeCalendar = state => {
};
```

[![Edit CodeSandbox](https://img.shields.io/badge/RangeDatePicker-Open%20On%20CodeSandbox-%230971f1?style=for-the-badge&logo=codesandbox&labelColor=151515)](https://codesandbox.io/s/prvgx)
[![Edit CodeSandbox](https://img.shields.io/badge/RangeDatePicker-Open%20On%20CodeSandbox-%230971f1?style=for-the-badge&logo=codesandbox&labelColor=151515)](https://codesandbox.io/s/181vj)

## Composition

Expand Down
4 changes: 2 additions & 2 deletions docs/drawer.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,10 +20,10 @@ import { css } from "@emotion/css";

import {
Drawer as RenderlesskitDrawer,
useDrawerState,
DrawerBackdrop,
DrawerCloseButton,
DrawerDisclosure,
useDrawerState,
} from "@renderlesskit/react";

export const Drawer = props => {
Expand Down Expand Up @@ -95,7 +95,7 @@ const cssTransforms = {
};
```

[![Edit CodeSandbox](https://img.shields.io/badge/Drawer-Open%20On%20CodeSandbox-%230971f1?style=for-the-badge&logo=codesandbox&labelColor=151515)](https://codesandbox.io/s/fyqw3)
[![Edit CodeSandbox](https://img.shields.io/badge/Drawer-Open%20On%20CodeSandbox-%230971f1?style=for-the-badge&logo=codesandbox&labelColor=151515)](https://codesandbox.io/s/o99mb)

## Composition

Expand Down
4 changes: 2 additions & 2 deletions docs/number-input.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,9 +25,9 @@ import * as React from "react";

import {
NumberInput as RenderlesskitNumberInput,
useNumberInputState,
NumberInputDecrementButton,
NumberInputIncrementButton,
useNumberInputState,
} from "@renderlesskit/react";

export const NumberInput = props => {
Expand All @@ -53,7 +53,7 @@ export const NumberInput = props => {
export default NumberInput;
```

[![Edit CodeSandbox](https://img.shields.io/badge/NumberInput-Open%20On%20CodeSandbox-%230971f1?style=for-the-badge&logo=codesandbox&labelColor=151515)](https://codesandbox.io/s/yko82)
[![Edit CodeSandbox](https://img.shields.io/badge/NumberInput-Open%20On%20CodeSandbox-%230971f1?style=for-the-badge&logo=codesandbox&labelColor=151515)](https://codesandbox.io/s/up5vw)

## Accessibility Requirement

Expand Down
4 changes: 2 additions & 2 deletions docs/picker-base.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,8 +21,8 @@ import * as React from "react";

import {
PickerBase as RenderlesskitPickerBase,
PickerBaseTrigger,
PickerBaseContent,
PickerBaseTrigger,
usePickerBaseState,
} from "@renderlesskit/react";

Expand All @@ -42,7 +42,7 @@ export const PickerBase = props => {
export default PickerBase;
```

[![Edit CodeSandbox](https://img.shields.io/badge/Picker%20Base-Open%20On%20CodeSandbox-%230971f1?style=for-the-badge&logo=codesandbox&labelColor=151515)](https://codesandbox.io/s/yighd)
[![Edit CodeSandbox](https://img.shields.io/badge/Picker%20Base-Open%20On%20CodeSandbox-%230971f1?style=for-the-badge&logo=codesandbox&labelColor=151515)](https://codesandbox.io/s/m1o69)

## Composition

Expand Down
8 changes: 4 additions & 4 deletions docs/radio.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,11 +22,11 @@ By default, it renders the native `<input type="radio">`.
import * as React from "react";

import {
useRadioState,
Radio as RenderlesskitRadio,
USE_RADIO_STATE_KEYS,
splitStateProps,
RadioGroup,
splitStateProps,
USE_RADIO_STATE_KEYS,
useRadioState,
} from "@renderlesskit/react";

export const Radio = props => {
Expand All @@ -52,7 +52,7 @@ export const Radio = props => {
export default Radio;
```

[![Edit CodeSandbox](https://img.shields.io/badge/Radio%20Basic-Open%20On%20CodeSandbox-%230971f1?style=for-the-badge&logo=codesandbox&labelColor=151515)](https://codesandbox.io/s/juzxw)
[![Edit CodeSandbox](https://img.shields.io/badge/Radio%20Basic-Open%20On%20CodeSandbox-%230971f1?style=for-the-badge&logo=codesandbox&labelColor=151515)](https://codesandbox.io/s/u62dy)

## Accessibility Requirement

Expand Down
12 changes: 6 additions & 6 deletions docs/select.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,19 +56,19 @@ export default Select;

[![Edit CodeSandbox](https://img.shields.io/badge/Select-Open%20On%20CodeSandbox-%230971f1?style=for-the-badge&logo=codesandbox&labelColor=151515)](https://codesandbox.io/s/surso)

[![Edit CodeSandbox](https://img.shields.io/badge/Dynamic%20Select-Open%20On%20CodeSandbox-%230971f1?style=for-the-badge&logo=codesandbox&labelColor=151515)](https://codesandbox.io/s/l50wh)
[![Edit CodeSandbox](https://img.shields.io/badge/Dynamic%20Select-Open%20On%20CodeSandbox-%230971f1?style=for-the-badge&logo=codesandbox&labelColor=151515)](https://codesandbox.io/s/7pd7i)

[![Edit CodeSandbox](https://img.shields.io/badge/Multiple%20Select-Open%20On%20CodeSandbox-%230971f1?style=for-the-badge&logo=codesandbox&labelColor=151515)](https://codesandbox.io/s/quwfv)
[![Edit CodeSandbox](https://img.shields.io/badge/Multiple%20Select-Open%20On%20CodeSandbox-%230971f1?style=for-the-badge&logo=codesandbox&labelColor=151515)](https://codesandbox.io/s/kdlji)

[![Edit CodeSandbox](https://img.shields.io/badge/Fetch%20Select-Open%20On%20CodeSandbox-%230971f1?style=for-the-badge&logo=codesandbox&labelColor=151515)](https://codesandbox.io/s/8irr5)

[![Edit CodeSandbox](https://img.shields.io/badge/Windows%20Select-Open%20On%20CodeSandbox-%230971f1?style=for-the-badge&logo=codesandbox&labelColor=151515)](https://codesandbox.io/s/osmtv)
[![Edit CodeSandbox](https://img.shields.io/badge/Windows%20Select-Open%20On%20CodeSandbox-%230971f1?style=for-the-badge&logo=codesandbox&labelColor=151515)](https://codesandbox.io/s/yso1f)

[![Edit CodeSandbox](https://img.shields.io/badge/Custom%20Select-Open%20On%20CodeSandbox-%230971f1?style=for-the-badge&logo=codesandbox&labelColor=151515)](https://codesandbox.io/s/mbn6n)
[![Edit CodeSandbox](https://img.shields.io/badge/Custom%20Select-Open%20On%20CodeSandbox-%230971f1?style=for-the-badge&logo=codesandbox&labelColor=151515)](https://codesandbox.io/s/243ku)

[![Edit CodeSandbox](https://img.shields.io/badge/Controlled%20Select-Open%20On%20CodeSandbox-%230971f1?style=for-the-badge&logo=codesandbox&labelColor=151515)](https://codesandbox.io/s/b4w5q)
[![Edit CodeSandbox](https://img.shields.io/badge/Controlled%20Select-Open%20On%20CodeSandbox-%230971f1?style=for-the-badge&logo=codesandbox&labelColor=151515)](https://codesandbox.io/s/tnzwu)

[![Edit CodeSandbox](https://img.shields.io/badge/Virtual%20Select%20Options-Open%20On%20CodeSandbox-%230971f1?style=for-the-badge&logo=codesandbox&labelColor=151515)](https://codesandbox.io/s/l9z28)
[![Edit CodeSandbox](https://img.shields.io/badge/Virtual%20Select%20Options-Open%20On%20CodeSandbox-%230971f1?style=for-the-badge&logo=codesandbox&labelColor=151515)](https://codesandbox.io/s/qqrjd)

## Composition

Expand Down
16 changes: 8 additions & 8 deletions docs/slider.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,9 +26,9 @@ import * as React from "react";
import { VisuallyHidden } from "reakit";

import {
SliderTrack,
SliderThumb,
SliderInput,
SliderThumb,
SliderTrack,
useSliderState,
} from "@renderlesskit/react";

Expand Down Expand Up @@ -86,17 +86,17 @@ export const Slider = args => {
export default Slider;
```

[![Edit CodeSandbox](https://img.shields.io/badge/Single%20Slider-Open%20On%20CodeSandbox-%230971f1?style=for-the-badge&logo=codesandbox&labelColor=151515)](https://codesandbox.io/s/oii0e)
[![Edit CodeSandbox](https://img.shields.io/badge/Single%20Slider-Open%20On%20CodeSandbox-%230971f1?style=for-the-badge&logo=codesandbox&labelColor=151515)](https://codesandbox.io/s/wqe8x)

[![Edit CodeSandbox](https://img.shields.io/badge/Single%20Origin%20Slider-Open%20On%20CodeSandbox-%230971f1?style=for-the-badge&logo=codesandbox&labelColor=151515)](https://codesandbox.io/s/0i333)
[![Edit CodeSandbox](https://img.shields.io/badge/Single%20Origin%20Slider-Open%20On%20CodeSandbox-%230971f1?style=for-the-badge&logo=codesandbox&labelColor=151515)](https://codesandbox.io/s/myoqv)

[![Edit CodeSandbox](https://img.shields.io/badge/Single%20Reversed%20Slider-Open%20On%20CodeSandbox-%230971f1?style=for-the-badge&logo=codesandbox&labelColor=151515)](https://codesandbox.io/s/rcn4d)
[![Edit CodeSandbox](https://img.shields.io/badge/Single%20Reversed%20Slider-Open%20On%20CodeSandbox-%230971f1?style=for-the-badge&logo=codesandbox&labelColor=151515)](https://codesandbox.io/s/jv5dw)

[![Edit CodeSandbox](https://img.shields.io/badge/Single%20Vertical%20Slider-Open%20On%20CodeSandbox-%230971f1?style=for-the-badge&logo=codesandbox&labelColor=151515)](https://codesandbox.io/s/wl1jp)
[![Edit CodeSandbox](https://img.shields.io/badge/Single%20Vertical%20Slider-Open%20On%20CodeSandbox-%230971f1?style=for-the-badge&logo=codesandbox&labelColor=151515)](https://codesandbox.io/s/gph2l)

[![Edit CodeSandbox](https://img.shields.io/badge/Range%20Slider-Open%20On%20CodeSandbox-%230971f1?style=for-the-badge&logo=codesandbox&labelColor=151515)](https://codesandbox.io/s/bibgn)
[![Edit CodeSandbox](https://img.shields.io/badge/Range%20Slider-Open%20On%20CodeSandbox-%230971f1?style=for-the-badge&logo=codesandbox&labelColor=151515)](https://codesandbox.io/s/d02dk)

[![Edit CodeSandbox](https://img.shields.io/badge/Multi%20Slider-Open%20On%20CodeSandbox-%230971f1?style=for-the-badge&logo=codesandbox&labelColor=151515)](https://codesandbox.io/s/tgseh)
[![Edit CodeSandbox](https://img.shields.io/badge/Multi%20Slider-Open%20On%20CodeSandbox-%230971f1?style=for-the-badge&logo=codesandbox&labelColor=151515)](https://codesandbox.io/s/0rvot)

## Accessibility Requirement

Expand Down
Loading

0 comments on commit 2186fb4

Please sign in to comment.