@atom-learning/components 2.32.3-beta.0 → 2.33.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (164) hide show
  1. package/CHANGELOG.md +60 -0
  2. package/README.md +11 -5
  3. package/dist/components/accordion/AccordionItem.js +1 -1
  4. package/dist/components/accordion/AccordionTrigger.js +1 -1
  5. package/dist/components/avatar/Avatar.js +1 -1
  6. package/dist/components/calendar/Calendar.js +1 -1
  7. package/dist/components/carousel/CarouselArrows.js +1 -1
  8. package/dist/components/carousel/CarouselSlide.js +1 -1
  9. package/dist/components/checkbox-field/CheckboxField.js +1 -1
  10. package/dist/components/chip/Chip.js +1 -1
  11. package/dist/components/chip/ChipGroup.js +1 -1
  12. package/dist/components/chip-dismissible-group/ChipDismissibleGroupRoot.js +1 -1
  13. package/dist/components/data-table/DataTable.js +1 -1
  14. package/dist/components/data-table/DataTableBody.js +1 -1
  15. package/dist/components/data-table/DataTableDataCell.js +1 -1
  16. package/dist/components/data-table/DataTableGlobalFilter.js +1 -1
  17. package/dist/components/data-table/DataTableRow.js +1 -1
  18. package/dist/components/data-table/DataTableTable.js +1 -1
  19. package/dist/components/data-table/drag-and-drop/DraggableRow.js +1 -1
  20. package/dist/components/data-table/drag-and-drop/Handle.js +1 -1
  21. package/dist/components/dismissible/DismissibleRoot.js +1 -1
  22. package/dist/components/dismissible/DismissibleTrigger.js +1 -1
  23. package/dist/components/dropdown-menu/DropdownMenuLinkItem.js +1 -1
  24. package/dist/components/field-wrapper/FieldDescription.js +1 -1
  25. package/dist/components/field-wrapper/InlineFieldWrapper.js +1 -1
  26. package/dist/components/file-input/FileInput.js +1 -1
  27. package/dist/components/grid/Grid.js +1 -1
  28. package/dist/components/heading/Heading.js +1 -1
  29. package/dist/components/icon/Icon.js +1 -1
  30. package/dist/components/inline-message/InlineMessage.js +1 -1
  31. package/dist/components/label/Label.js +1 -1
  32. package/dist/components/link/Link.js +1 -1
  33. package/dist/components/list/List.js +1 -1
  34. package/dist/components/markdown-content/components/MarkdownEmphasis.js +1 -1
  35. package/dist/components/markdown-content/components/MarkdownHeading.js +1 -1
  36. package/dist/components/markdown-content/components/MarkdownImage.js +1 -1
  37. package/dist/components/markdown-content/components/MarkdownInlineCode.js +1 -1
  38. package/dist/components/markdown-content/components/MarkdownLink.js +1 -1
  39. package/dist/components/markdown-content/components/MarkdownListItem.js +1 -1
  40. package/dist/components/markdown-content/components/MarkdownParagraph.js +1 -1
  41. package/dist/components/markdown-content/components/MarkdownStrong.js +1 -1
  42. package/dist/components/markdown-content/components/MarkdownThematicBreak.js +1 -1
  43. package/dist/components/navigation/NavigationMenuDropdownContent.js +1 -1
  44. package/dist/components/navigation/NavigationMenuLink.js +1 -1
  45. package/dist/components/notification-badge/NotificationBadge.js +1 -1
  46. package/dist/components/number-input/NumberInput.js +1 -1
  47. package/dist/components/number-input-field/NumberInputField.js +1 -1
  48. package/dist/components/popover/PopoverContent.js +1 -1
  49. package/dist/components/radio-button/RadioButton.js +1 -1
  50. package/dist/components/radio-button-field/RadioButtonField.js +1 -1
  51. package/dist/components/radio-button-field/RadioField.js +1 -1
  52. package/dist/components/radio-card/RadioCardGroup.js +1 -1
  53. package/dist/components/search-input/SearchInput.d.ts +2 -0
  54. package/dist/components/search-input/SearchInput.js +1 -1
  55. package/dist/components/select-field/SelectField.js +1 -1
  56. package/dist/components/sidedrawer/SidedrawerAccordion/SidedrawerAccordionContent.js +1 -1
  57. package/dist/components/sidedrawer/SidedrawerContent.js +1 -1
  58. package/dist/components/slider/Slider.d.ts +2 -1
  59. package/dist/components/slider/Slider.js +1 -1
  60. package/dist/components/slider-field/SliderField.js +1 -1
  61. package/dist/components/stack-content/StackContent.js +1 -1
  62. package/dist/components/stepper/StepperStepBack.js +1 -1
  63. package/dist/components/table/Table.d.ts +1 -5
  64. package/dist/components/table/Table.js +1 -1
  65. package/dist/components/table/TableBody.js +1 -1
  66. package/dist/components/table/TableHeader.js +1 -1
  67. package/dist/components/table/TableRow.js +1 -1
  68. package/dist/components/tabs/Tabs.js +1 -1
  69. package/dist/components/tabs/TabsTrigger.js +1 -1
  70. package/dist/components/tabs/TabsTriggerList.js +1 -1
  71. package/dist/components/text/Text.js +1 -1
  72. package/dist/components/toast/Toast.js +1 -1
  73. package/dist/components/toast/ToastProvider.js +1 -1
  74. package/dist/components/toggle-group/ToggleGroupButton.js +1 -1
  75. package/dist/components/tooltip/TooltipContent.js +1 -1
  76. package/dist/components/video/Video.js +1 -1
  77. package/dist/docgen.json +1 -1
  78. package/dist/experiments/color-scheme/ColorScheme.js +1 -1
  79. package/dist/index.cjs.js +1 -1
  80. package/dist/index.d.ts +1 -0
  81. package/dist/index.js +1 -1
  82. package/dist/utilities/hooks/useCallbackRef.js +1 -1
  83. package/package.json +6 -6
  84. package/dist/components/table/TableStickyColumnsContainer.d.ts +0 -9
  85. package/dist/components/table/TableStickyColumnsContainer.js +0 -1
  86. package/dist/docs/Accordion.mdx +0 -94
  87. package/dist/docs/ActionIcon.mdx +0 -87
  88. package/dist/docs/AlertDialog.mdx +0 -40
  89. package/dist/docs/Avatar.mdx +0 -129
  90. package/dist/docs/Badge.mdx +0 -55
  91. package/dist/docs/Box.mdx +0 -52
  92. package/dist/docs/Button.mdx +0 -68
  93. package/dist/docs/CONTRIBUTING.md +0 -224
  94. package/dist/docs/CSSWrapper.mdx +0 -10
  95. package/dist/docs/Carousel.mdx +0 -88
  96. package/dist/docs/Checkbox.mdx +0 -19
  97. package/dist/docs/CheckboxField.mdx +0 -14
  98. package/dist/docs/Chip.mdx +0 -118
  99. package/dist/docs/ChipDismissibleGroup.mdx +0 -33
  100. package/dist/docs/ChipToggleGroup.mdx +0 -27
  101. package/dist/docs/Combobox.mdx +0 -44
  102. package/dist/docs/DataTable.mdx +0 -279
  103. package/dist/docs/DateField.mdx +0 -20
  104. package/dist/docs/DateInput.mdx +0 -87
  105. package/dist/docs/Dialog.mdx +0 -68
  106. package/dist/docs/Dismissible.mdx +0 -48
  107. package/dist/docs/DismissibleGroup.mdx +0 -29
  108. package/dist/docs/Divider.mdx +0 -16
  109. package/dist/docs/DropdownMenu.mdx +0 -30
  110. package/dist/docs/EmptyState.mdx +0 -23
  111. package/dist/docs/FieldWrapper.mdx +0 -30
  112. package/dist/docs/FileInput.mdx +0 -45
  113. package/dist/docs/Flex.mdx +0 -16
  114. package/dist/docs/Form.mdx +0 -411
  115. package/dist/docs/Grid.mdx +0 -28
  116. package/dist/docs/Heading.mdx +0 -30
  117. package/dist/docs/Icon.mdx +0 -30
  118. package/dist/docs/Image.mdx +0 -14
  119. package/dist/docs/InlineMessage.mdx +0 -52
  120. package/dist/docs/Input.mdx +0 -24
  121. package/dist/docs/InputField.mdx +0 -26
  122. package/dist/docs/Label.mdx +0 -32
  123. package/dist/docs/Link.mdx +0 -53
  124. package/dist/docs/List.mdx +0 -38
  125. package/dist/docs/Loader.mdx +0 -16
  126. package/dist/docs/MarkdownContent.mdx +0 -77
  127. package/dist/docs/NavigationMenu.mdx +0 -144
  128. package/dist/docs/NotificationBadge.mdx +0 -35
  129. package/dist/docs/NumberInput.mdx +0 -37
  130. package/dist/docs/NumberInputField.mdx +0 -26
  131. package/dist/docs/PasswordField.mdx +0 -23
  132. package/dist/docs/PasswordInput.mdx +0 -15
  133. package/dist/docs/Popover.mdx +0 -29
  134. package/dist/docs/ProgressBar.mdx +0 -56
  135. package/dist/docs/README.mdx +0 -79
  136. package/dist/docs/RadioButton.mdx +0 -10
  137. package/dist/docs/RadioButtonField.mdx +0 -25
  138. package/dist/docs/RadioCard.mdx +0 -62
  139. package/dist/docs/SearchField.mdx +0 -26
  140. package/dist/docs/SearchInput.mdx +0 -13
  141. package/dist/docs/Select.mdx +0 -56
  142. package/dist/docs/SelectField.mdx +0 -17
  143. package/dist/docs/Sidedrawer.mdx +0 -155
  144. package/dist/docs/Slider.mdx +0 -117
  145. package/dist/docs/SliderField.mdx +0 -35
  146. package/dist/docs/Stack.mdx +0 -24
  147. package/dist/docs/StackContent.mdx +0 -32
  148. package/dist/docs/Stepper.mdx +0 -154
  149. package/dist/docs/Styling.mdx +0 -85
  150. package/dist/docs/Switch.mdx +0 -28
  151. package/dist/docs/Table.mdx +0 -146
  152. package/dist/docs/Tabs.mdx +0 -76
  153. package/dist/docs/Text.mdx +0 -24
  154. package/dist/docs/Textarea.mdx +0 -12
  155. package/dist/docs/TextareaField.mdx +0 -21
  156. package/dist/docs/Toast.mdx +0 -20
  157. package/dist/docs/ToggleGroup.mdx +0 -88
  158. package/dist/docs/Tooltip.mdx +0 -25
  159. package/dist/docs/TopBar.mdx +0 -95
  160. package/dist/docs/Video.mdx +0 -12
  161. package/dist/docs/accessibility.mdx +0 -67
  162. package/dist/docs/coreconcepts.mdx +0 -77
  163. package/dist/docs/introduction.mdx +0 -33
  164. package/dist/docs/versioning.mdx +0 -40
package/dist/docs/CONTRIBUTING.md DELETED
@@ -1,224 +0,0 @@
1
- ---
2
- title: Contributing
3
- description: When contributing to this repository, use the following information to uphold the standards we have set for this project
4
- category: Overview
5
- ---
6
-
7
- Everyone is encouraged to contribute to the development of this project. If you spot a missing component or an additional feature, please raise an issue in GitHub using the [feature request template](https://github.com/atom-learning/components/issues/new?template=request-a-feature.md).
8
- In this document, you will find all the necessary information to develop and test the features. Therefore, please review this document and the `README.md` before you get started.
9
-
10
- ## Getting started
11
-
12
- Clone the repo
13
-
14
- ```bash
15
- git clone git@github.com:atom-learning/components.git
16
- ```
17
-
18
- Install dependencies
19
-
20
- ```bash
21
- yarn install
22
- ```
23
-
24
- **Before starting to develop on this project, please consider the following:**
25
-
26
- - Read the entire contribution guide
27
- - Read the [accessibility section](https://design.atomlearning.technology/components/accessibility)
28
- - Read the [versioning section](https://design.atomlearning.technology/components/versioning)
29
- - Check that the `pre-commit` hooks work before pushing into a branch
30
- - Always commit your changes to a branch and request a code review by raising a PR.
31
- - Always include tests for the changes introduced
32
-
33
- ### Available scripts
34
-
35
- - `dev`: Builds the libary in dev mode and watches for changes
36
- - `start:sandbox`: Starts up a simple sandbox to test changes
37
- - `build:lib`: Builds the library and populates the `dist` folder
38
- - `build:docs`: Builds the documentation and exports it to be consumed by the `documentation` project.
39
- - `clean`: Deletes the `dist` folder to ensure a clean build
40
- - `format`: Formats the code using `Prettier`
41
- - `lint`: Lints and fixes syntax issues with the code using `ESLint`
42
- - `test`: Runs the testing suite using `Jest`
43
- - `test:watch`: Runs the testing suite in watch mode
44
- - `validate`: Runs all the validate commands to: audit any additional dependencies, detect linting/syntax issues, detect typescript compilation errors, prints the output size and flags any potential build issues. See `package.json` for more details.
45
-
46
- ## Commits
47
-
48
- This section is **very important**! Our releases and version numbers follow [Semantic Versioning](https://semver.org/) and are generated from the commit messages in PRs when they get merged into `main`, so make sure you follow our conventions.
49
-
50
- We use [`commitlint`](https://github.com/conventional-changelog/commitlint) to enforce rules about commit messages and [`semantic-release`](https://github.com/semantic-release/semantic-release) to generate releases and version numbers based on them. The configuration of these tools is spread between several plugins, but here's what you need to know.
51
-
52
- The structure of a commit message is as follows:
53
-
54
- ```
55
- <type>(<scope>): <subject>
56
- <BLANK LINE>
57
- <body>
58
- <BLANK LINE>
59
- <footer>
60
- ```
61
-
62
- All commit messages must have a type (a word followed by a colon at the start of the message) from this [list](https://github.com/conventional-changelog/commitlint/tree/master/@commitlint/config-conventional#type-enum) (the scope is optional but strongly encouraged). Either of the following types will cause a new release to be published when your PR is merged into `main`:
63
-
64
- - `fix` for bug fixes (patch version)
65
- - `perf` for performance improvements (patch version)
66
- - `feat` for new features (minor version)
67
-
68
- Other subjects (such as `chore`) will not cause a new release **unless** the commit footer starts with `BREAKING CHANGE:` (followed by an explanation of the breaking change).
69
-
70
- Commits that introduce a breaking change should start with `feat!:` and include the `BREAKING CHANGE:` footer. Breaking changes will cause a major version increase.
71
-
72
- Here is an example of the release type that will be done based on a commit messages:
73
-
74
- | Commit message | Release type |
75
- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------- |
76
- | `fix(pencil): stop graphite breaking when too much pressure applied` | Patch Release |
77
- | `feat(pencil): add 'graphiteWidth' option` | Minor Release |
78
- | `perf(pencil): remove graphiteWidth option`<br /><br />`BREAKING CHANGE: The graphiteWidth option has been removed.`<br/>`The default graphite width of 10mm is always used for performance reasons.` | Major Breaking Release |
79
-
80
- **Notes:**
81
-
82
- - A commit should contain at most one self-contained functional change and a functional change should be contained in exactly one commit.
83
- - When squashing commits make sure to rewrite the resulting commit message to be compliant with the project's commit message convention. **If the resulting squashed commit would encompasses multiple changes (for example multiple unrelated features or fixes) then it's probably not a good idea to squash those commits together**.
84
-
85
- ## Directory structure
86
-
87
- Use the following directory structure and file naming conventions. You can automate this by running `yarn add-component` in the root directory and following the instructions. Once the `add-component` task has completed, you should have the following folder and files created:
88
-
89
- ```
90
- src/
91
- components/
92
- component-name/
93
- ComponentName.tsx
94
- ComponentName.test.tsx
95
- ComponentName.mdx
96
- index.ts
97
- ```
98
-
99
- ## Component API
100
-
101
- ### Prop validation
102
-
103
- All components should have fully typed props.
104
-
105
- ### `css` prop
106
-
107
- All components should accept a `css` prop. Single-child components are styled directly, while components composed of multiple components/elements use the `css` prop only for styles that affect the whole component/its relationship to other components on the page:
108
-
109
- - If the component renders two or more sibling elements/components, wrap them in a `CSSWrapper` and pass the `css` prop to that.
110
- - Otherwise, pass the `css` prop value directly to the direct child.
111
-
112
- ```jsx
113
- const SimpleComponent = ({ css }) => (
114
- <Box css={css}>This box gets styled directly</Box>
115
- )
116
-
117
- const ComposedComponent = ({ css }) => (
118
- <CSSWrapper css={css}>
119
- <Box css={{ mb: '$3' }}>
120
- The styling of these boxes is ComposedComponent's responsibility
121
- </Box>
122
- <Box css={{ color: '$primary' }}>
123
- If we want to combine boxes differently, we can compose a new component
124
- </Box>
125
- </CSSWrapper>
126
- )
127
- ```
128
-
129
- ## Tests
130
-
131
- In this project, we follow the principles set out by the [`React Testing Library`]() where we focus on testing the user interactions with the component. The target is to have as much test coverage as possible.
132
-
133
- As a minimum, the following tests are required:
134
-
135
- - Tests to validate the user interactions with the component
136
- - Snapshots for the different states of the component (i.e., for an `accordion` cover both the collapsed and expanded states
137
- - Snapshots for each variant that outputs different HTML
138
- - Accessibility unit tests
139
-
140
- ### Examples
141
-
142
- ```jsx
143
- describe(`Box component`, () => {
144
- it('renders', async () => {
145
- const { container } = render(
146
- <Box css={{ m: 'auto', height: 100, width: 100 }}>BOX</Box>
147
- )
148
- await screen.findByText('BOX')
149
- expect(container).toMatchSnapshot()
150
- })
151
-
152
- it('has no programmatically detectable a11y issues', async () => {
153
- render(<Box />, document.body)
154
-
155
- const results = await axe(document.body)
156
- expect(results).toHaveNoViolations()
157
- })
158
- })
159
- ```
160
-
161
- ## Documentation
162
-
163
- Each component should have documentation that covers the following:
164
-
165
- - Variants
166
- - Available component-specific properties
167
- - When it should be used
168
- - When it _shouldn't_ be used (e.g. instead of using an `Input` directly, we'll often want to use an `InputField`)
169
-
170
- We use YAML frontmatter to add metadata to our documentation. The available fields are:
171
-
172
- - `title` - The title of the page, usually the name of the component. It can be made more readable, e.g. `CSS Wrapper` instead of `CSSWrapper`
173
- - `component` - The name of the component; this is used to extract prop-types, so must be exact. This can also be a comma separated list if additional components are exported or included in the root export. e.g. `Dialog,Dialog.Trigger,Dialog.Content`
174
- - `description` - A high-level description of the component and its usage will be shown as the page's opening statement.
175
- - `category` - A category to group with related components
176
- - `priority` - Provides the ability to prioritise the content within its category, e.g. `1` will be listed before other content that has higher or no `priority` defined
177
-
178
- There is no need to add a main `# Heading` to your page as the documentation site will add it automatically from your `title` field. Avoid manually adding a `PropsTable` as this will be automated, or adding custom `import`s as these will break the MDX parser.
179
-
180
- To show code examples and component previews in your documentation, use the code block syntax with a language, in our case, `tsx`.
181
-
182
- The following basic example will show just the code:
183
-
184
- ````md
185
- ```tsx
186
- <Button />
187
- ```
188
- ````
189
-
190
- Adding `preview` will also render the code above the code block:
191
-
192
- ````md
193
- ```tsx preview
194
- <Button />
195
- ```
196
- ````
197
-
198
- Adding `live` will render the code and adds the ability to live edit:
199
-
200
- ````md
201
- ```tsx live
202
- <Button />
203
- ```
204
- ````
205
-
206
- ## Raising a PR
207
-
208
- In the PR, include:
209
-
210
- - A link to the ticket for the work
211
- - A brief description of the work you've done
212
- - Links to any designs provided
213
- - Screenshots of the built component
214
- - An explanation of any decisions that were made.
215
-
216
- If any of the patterns stated above weren't followed, please explain the reasons for it.
217
-
218
- **For a PR to be approved, tests and documentation are required as mentioned above.**
219
-
220
- After a PR has at least two thumbs-up and all the recommendations/conversations have been resolved, it can be merged into `main`.
221
-
222
- ## Merging/Releasing
223
-
224
- After a PR was merged, releasing the changes is fully automated (please refer to the commits section). Once the pipeline has completed and the new version is released, you can then upgrade the package in the consuming project and use it.
package/dist/docs/CSSWrapper.mdx DELETED
@@ -1,10 +0,0 @@
1
- ---
2
- title: CSS Wrapper
3
- component: CSSWrapper
4
- category: Utilities
5
- ---
6
-
7
- If `CSSWrapper` is passed a truthy `css` prop, it renders its children wrapped in a `Box` with that `css`. If `css` is falsy, `CSSWrapper`
8
- just renders its children.
9
-
10
- Use `CSSWrapper` to wrap other components that have no natural container, but **only if the addition of a `<Box />` won’t change the component’s layout behaviour**.
package/dist/docs/Carousel.mdx DELETED
@@ -1,88 +0,0 @@
1
- ---
2
- title: Carousel
3
- component: Carousel,Carousel.Slider,Carousel.Slide,Carousel.Pagination,Carousel.ArrowPrevious,Carousel.ArrowNext
4
- description: The Carousel component displays a series of slides that can be swiped between or selected directly via buttons
5
- category: Media
6
- ---
7
-
8
- The `Carousel` must contain a `Carousel.Slider` with nested `Carousel.Slide`s and optionally can include a `Carousel.Pagination` and `Carousel.ArrowPrevious` / `Carousel.ArrowNext` for navigation between slides.
9
- `Carousel.Slider`’s optional `overflow` prop will cause it to render all slides at once, allowing the user to drag them into view. The `aria-selected` attribute can be used as a CSS selector to style slides according to whether they are currently selected (see below).
10
-
11
- Note that `Carousel.Slide`s must receive an `index` prop in order to correctly apply styling based on whether they are selected and that `Carousel.Arrows` should be rendered inside a parent with `position: relative` in order to be positioned correctly.
12
-
13
- ```tsx preview
14
- <Carousel
15
- slideWidth={200}
16
- slideHeight={200}
17
- numSlides={3}
18
- css={{ position: 'relative' }}
19
- >
20
- <Carousel.ArrowPrevious css={{ position: 'absolute', left: '$2' }} />
21
- <Carousel.ArrowNext css={{ position: 'absolute', right: '$2' }} />
22
-
23
- <Carousel.Slider aria-label="Example carousel" css={{ mb: '$4' }}>
24
- <Carousel.Slide index={1} aria-label="Slide 1">
25
- <Box css={{ bg: '$primary', size: 200 }} />
26
- </Carousel.Slide>
27
- <Carousel.Slide index={2} aria-label="Slide 2">
28
- <Box css={{ bg: '$primary', size: 200 }} />
29
- </Carousel.Slide>
30
- <Carousel.Slide index={3} aria-label="Slide 3">
31
- <Box css={{ bg: '$primary', size: 200 }} />
32
- </Carousel.Slide>
33
- </Carousel.Slider>
34
-
35
- <Carousel.Pagination css={{ mx: 'auto', width: 'max-content' }} />
36
- </Carousel>
37
- ```
38
-
39
- ### useCarousel hook
40
-
41
- useCarousel hook exposes the Carousel context outside.
42
-
43
- Documentation about the hook usage
44
- https://github.com/express-labs/pure-react-carousel#hooks-and-usecontext
45
-
46
- Code snippet:
47
-
48
- ```
49
- const Slider = ({ children }) => {
50
- const carouselContext = useCarousel()
51
- const [currentSlide, setCurrentSlide] = React.useState(
52
- carouselContext.state.currentSlide
53
- )
54
-
55
- React.useEffect(() => {
56
- function onChange() {
57
- setCurrentSlide(carouselContext.state.currentSlide)
58
- }
59
- carouselContext.subscribe(onChange)
60
- return () => carouselContext.unsubscribe(onChange)
61
- }, [carouselContext])
62
-
63
- console.log('carouselContext', carouselContext)
64
- return (
65
- <>
66
- <div>Current slide: {currentSlide}</div>
67
- {children}
68
- </>
69
- )
70
- }
71
- ```
72
-
73
- ```
74
- <Carousel
75
- slideWidth={200}
76
- slideHeight={200}
77
- numSlides={2}
78
- css={{ position: 'relative' }}
79
- >
80
- <Carousel.ArrowPrevious />
81
- <Carousel.ArrowNext />
82
- <Slider>
83
- <Carousel.Slider>
84
- // slides
85
- </Carousel.Slider>
86
- </Slider>
87
- </Carousel>
88
- ```
package/dist/docs/Checkbox.mdx DELETED
@@ -1,19 +0,0 @@
1
- ---
2
- title: Checkbox
3
- component: Checkbox
4
- description: Checkbox provides a styled checkbox without a label
5
- category: Form primitives
6
- ---
7
-
8
- Checkboxes should be accompanied by labels, so rather than using `Checkbox` directly in a UI,
9
- it’s normally best to the `CheckboxField` component, which combines a `Checkbox` with a `Label` and
10
- displays validation errors. Alternatively, use this `Checkbox` component to compose other field components
11
- with more specific requirements.
12
-
13
- ```tsx preview
14
- <Checkbox />
15
- ```
16
-
17
- ```tsx preview
18
- <Checkbox checked="indeterminate"/>
19
- ```
package/dist/docs/CheckboxField.mdx DELETED
@@ -1,14 +0,0 @@
1
- ---
2
- title: Checkbox Field
3
- component: CheckboxField
4
- description: Combines a Checkbox with a Label and InlineMessage
5
- category: Form fields
6
- ---
7
-
8
- `CheckboxField` renders a `Checkbox` inside an `InlineFieldWrapper`, providing a consistent layout for a checkbox, label and, when applicable, an error.
9
-
10
- ```tsx preview
11
- <Form>
12
- <CheckboxField label="Do you like checkboxes?" name="likeCheckboxes" />
13
- </Form>
14
- ```
package/dist/docs/Chip.mdx DELETED
@@ -1,118 +0,0 @@
1
- ---
2
- title: Chip
3
- component: Chip, ChipGroup
4
- description: A component in the shape of a pill providing visual cues to prompt users to enter information or filter content.
5
- category: Feedback
6
- ---
7
-
8
- `Chip` itself is a primitive. It has no functional logic in itself, however, it is used to provide common styles for all the `Chip`-based components.
9
-
10
- ```tsx preview
11
- <Chip>
12
- <Chip.Content>Not the tasty kind</Chip.Content>
13
- </Chip>
14
- ```
15
-
16
- ## Gap
17
-
18
- `gap={ 1 | 2 | 3}`
19
-
20
- We provide three options for gap space between chips. `1` will be typically used within Input fields (multiselect) or when space is limited. `2` is the default option that provides a comfortable distance for the set.
21
-
22
- ```tsx preview
23
- <ChipGroup gap={1}>
24
- <Chip>
25
- <Chip.Content>A</Chip.Content>
26
- </Chip>
27
- <Chip>
28
- <Chip.Content>B</Chip.Content>
29
- </Chip>
30
- <Chip>
31
- <Chip.Content>C</Chip.Content>
32
- </Chip>
33
- </ChipGroup>
34
- ```
35
-
36
- ## Size
37
-
38
- `size="sm | md | lg"`
39
-
40
- ```tsx preview
41
- <ChipGroup align="center">
42
- <Chip size="sm">
43
- <Chip.Content>
44
- <Icon is={Upload} />A
45
- </Chip.Content>
46
- </Chip>
47
- <Chip size="md">
48
- <Chip.Content>
49
- <Icon is={Upload} />B
50
- </Chip.Content>
51
- </Chip>
52
- <Chip size="lg">
53
- <Chip.Content>
54
- <Icon is={Upload} />C
55
- </Chip.Content>
56
- </Chip>
57
- <Chip
58
- size={{
59
- '@initial': 'lg',
60
- '@md': 'md',
61
- '@lg': 'sm'
62
- }}
63
- >
64
- <Chip.Content>
65
- <Icon is={Upload} />C
66
- </Chip.Content>
67
- </Chip>
68
- </ChipGroup>
69
- ```
70
-
71
- ## Icon
72
-
73
- When an `<Icon />` is used as an immediate child of `<Chip.Content />` we automatically transform it to
74
- a `<Chip.Icon />` which applies the correct styles and sizing to it.
75
-
76
- ```tsx preview
77
- <ChipGroup>
78
- <Chip>
79
- <Chip.Content>
80
- <Icon is={Upload} /> Icon
81
- </Chip.Content>
82
- </Chip>
83
- <Chip>
84
- <Chip.Content>
85
- <Chip.Icon is={Upload} /> Chip.Icon
86
- </Chip.Content>
87
- </Chip>
88
- </ChipGroup>
89
- ```
90
-
91
- If additional nesting is needed; you can use the `<Chip.Icon />` component directly.
92
-
93
- ```tsx preview
94
- <ChipGroup>
95
- <Chip>
96
- <Chip.Content>
97
- <div>
98
- <Icon is={Upload} /> Icon (wrong sizing)
99
- </div>
100
- </Chip.Content>
101
- </Chip>
102
- <Chip>
103
- <Chip.Content>
104
- <div>
105
- <Chip.Icon is={Upload} /> Chip.Icon
106
- </div>
107
- </Chip.Content>
108
- </Chip>
109
- </ChipGroup>
110
- ```
111
-
112
- ## Disabled
113
-
114
- ```tsx preview
115
- <Chip data-disabled>
116
- <Chip.Content>Not the tasty kind</Chip.Content>
117
- </Chip>
118
- ```
package/dist/docs/ChipDismissibleGroup.mdx DELETED
@@ -1,33 +0,0 @@
1
- ---
2
- title: Chip Dismissible Group
3
- component: ChipDismissibleGroupRoot,ChipDismissibleGroup.Item
4
- description: Combines the DismissibleGroup logic together with the Chip primitive styling
5
- category: Feedback
6
- ---
7
-
8
- Used to visualise groups of dismissible information, in fields such as an entity or different attributes. Can also be used to represent removable filtering criteria.
9
-
10
- ```tsx preview
11
- <ChipDismissibleGroup
12
- onDismiss={(value) => {
13
- alert(`dismiss ${value}`)
14
- }}
15
- >
16
- <ChipDismissibleGroup.Item value="a" dismissActionLabel="Dismiss 'A'">
17
- <Icon is={Person} />
18
- Dismissible
19
- </ChipDismissibleGroup.Item>
20
- <ChipDismissibleGroup.Item value="b" dismissActionLabel="Dismiss 'B'">
21
- <Icon is={Person} />
22
- Dismissible
23
- </ChipDismissibleGroup.Item>
24
- <ChipDismissibleGroup.Item
25
- value="c"
26
- dismissActionLabel="Dismiss 'C'"
27
- disabled
28
- >
29
- <Icon is={Person} />
30
- Dismissible
31
- </ChipDismissibleGroup.Item>
32
- </ChipDismissibleGroup>
33
- ```
package/dist/docs/ChipToggleGroup.mdx DELETED
@@ -1,27 +0,0 @@
1
- ---
2
- title: Chip Toggle Group
3
- component: ChipToggleGroupRoot,ChipToggleGroup.Item
4
- description: Combines the Toggle Group radix component with the Chip primitive styling
5
- category: Feedback
6
- ---
7
-
8
- Used as a method for filtering a collection of data. Acts like multiple or single selection. Each chip toggles between selected and unselected. When selected, a checkmark appears as the leading icon.
9
-
10
- ```tsx preview
11
- <ChipToggleGroup
12
- type="multiple"
13
- defaultValue={['a', 'b']}
14
- onValueChange={(value) => {
15
- console.log(value)
16
- }}
17
- >
18
- <ChipToggleGroup.Item value="a">A</ChipToggleGroup.Item>
19
- <ChipToggleGroup.Item value="b" disabled>
20
- B
21
- </ChipToggleGroup.Item>
22
- <ChipToggleGroup.Item value="c">C</ChipToggleGroup.Item>
23
- <ChipToggleGroup.Item value="d" disabled>
24
- D
25
- </ChipToggleGroup.Item>
26
- </ChipToggleGroup>
27
- ```
package/dist/docs/Combobox.mdx DELETED
@@ -1,44 +0,0 @@
1
- ---
2
- title: Combobox
3
- component: Combobox,Combobox.Input,Combobox.Popover,Combobox.List,Combobox.Option,Combobox.OptionText
4
- description: Combobox combines a text input with a list of suggested values
5
- category: Form primitives
6
- ---
7
-
8
- `Combobox` wraps Reach UI's `Combobox` component with default styling and accepts all the same props. See [the Reach UI docs](https://reach.tech/combobox/) for details.
9
-
10
- Arbitrary components can be nested inside the `Combobox.Popover` to allow for more advanced usecases, e.g. adding a new value to the list of suggestions
11
-
12
- Note that when combined with a `Label`, the `id` that matches the `Label`'s `htmlFor` prop should go on the `Combobox.Input`.
13
-
14
- ```jsx live
15
- <Box css={{ width: '400px' }}>
16
- <Label css={{ mb: '$3' }} htmlFor="someid">
17
- What's your favourite fruit?
18
- </Label>
19
- <Combobox onSelect={console.log} openOnFocus>
20
- <Combobox.Input id="someid" />
21
- <Combobox.Popover>
22
- <Combobox.List>
23
- <Combobox.Option value="Apple" />
24
- <Combobox.Option value="Banana" />
25
- <Combobox.Option value="Cranberry" />
26
- <Combobox.Option value="Dragon fruit" />
27
-
28
- <Flex css={{ alignItems: 'center', p: '$2' }}>
29
- <Input size="sm" placeholder="New fruit" />
30
- <Button
31
- size="sm"
32
- css={{ ml: '$2' }}
33
- onClick={() =>
34
- alert('Nest other interactive UI here for advanced usecases')
35
- }
36
- >
37
- Add a new fruit
38
- </Button>
39
- </Flex>
40
- </Combobox.List>
41
- </Combobox.Popover>
42
- </Combobox>
43
- </Box>
44
- ```