Skip to content
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

Docs site changes #96

Merged
merged 8 commits into from
Feb 23, 2023
Merged

Docs site changes #96

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
8676103
first change
KrooshalUX Oct 6, 2022
417057e
undoing first change
KrooshalUX Oct 6, 2022
e5f8779
making a sample change to test commit success or failure
KrooshalUX Oct 11, 2022
6fb0315
undoes sample change for testing
KrooshalUX Oct 11, 2022
75be13e
minor changes for tone, deleted references to starter projects as the…
KrooshalUX Oct 24, 2022
7c37991
Delete OUI.iml
KrooshalUX Nov 3, 2022
d59d7dc
Delete oui.iml
KrooshalUX Nov 3, 2022
1e17229
Update getting_started.md
KrooshalUX Nov 3, 2022
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
11 changes: 11 additions & 0 deletions OUI/OUI.iml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
<?xml version="1.0" encoding="UTF-8"?>
<module type="JAVA_MODULE" version="4">
<component name="NewModuleRootManager" inherit-compiler-output="true">
<exclude-output />
<content url="file://$MODULE_DIR$">
<sourceFolder url="file://$MODULE_DIR$/src" isTestSource="false" />
</content>
<orderEntry type="inheritedJdk" />
<orderEntry type="sourceFolder" forTests="false" />
</component>
</module>
9 changes: 9 additions & 0 deletions oui.iml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
<?xml version="1.0" encoding="UTF-8"?>
<module type="WEB_MODULE" version="4">
<component name="NewModuleRootManager" inherit-compiler-output="true">
<exclude-output />
<content url="file://$MODULE_DIR$" />
<orderEntry type="inheritedJdk" />
<orderEntry type="sourceFolder" forTests="false" />
</component>
</module>
2 changes: 1 addition & 1 deletion src-docs/src/views/form_validation/form_validation_example.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ export const FormValidationExample = {
<strong>OuiFormRow</strong> components. Errors are optional and are
passed as an array in case you need to list more than one. You can
also hide the callout by passing
<OuiCode>invalidCallout=&ldquo;none&ldquo;</OuiCode>
<OuiCode>invalidCallout=&ldquo;none&ldquo;</OuiCode>.
</p>
),
source: [
Expand Down
26 changes: 3 additions & 23 deletions src-docs/src/views/guidelines/getting_started.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ yarn add @opensearch-project/oui @elastic/datemath moment prop-types

We depend upon the version of node defined in [.nvmrc](.nvmrc).

You will probably want to install a node version manager. [nvm](https://github.com/creationix/nvm) is recommended.
We recommend installing a node version manager: [nvm](https://github.com/creationix/nvm) is recommended.
KrooshalUX marked this conversation as resolved.
Show resolved Hide resolved

To install and use the correct node version with `nvm`:

Expand All @@ -29,7 +29,7 @@ nvm install

### Documentation

You can run the documentation locally at [http://localhost:8030/](http://localhost:8030/) by running the following.
You can run the documentation locally at [http://localhost:8030/](http://localhost:8030/) by running the following:

```js
yarn
Expand All @@ -51,9 +51,7 @@ OUI also has `moment` and `@elastic/datemath` as dependencies itself. These are

OUI publishes React UI components, JavaScript helpers called services, and utilities for writing Jest tests. Please refer to the [OpenSearch UI Framework website](https://elastic.github.io/eui) for comprehensive info on what's available.

OUI is published through [NPM](https://www.npmjs.com/package/@opensearch-project/oui) as a dependency. We also provide a starter projects for:
- [GatsbyJS](https://github.com/elastic/gatsby-oui-starter)
- [NextJS](https://github.com/elastic/next-oui-starter)
OUI is published through [NPM](https://www.npmjs.com/package/@opensearch-project/oui) as a dependency.

### Components

Expand Down Expand Up @@ -100,12 +98,6 @@ Other compiled themes include:
```js
import '@opensearch-project/oui/dist/oui_theme_dark.css';
```
```js
import '@opensearch-project/oui/dist/oui_theme_cascadia_light.css';
```
```js
import '@opensearch-project/oui/dist/oui_theme_cascadia_dark.css';
```

### Using our Sass variables on top of compiled CSS

Expand All @@ -125,11 +117,6 @@ For the dark theme, swap the first import for the dark colors file.
@import '@opensearch-project/oui/src/themes/oui/oui_globals.scss';
```

If you want to use the new, but in progress Cascadia theme, you can import it similarly.

```scss
@import '@opensearch-project/oui/src/themes/oui-cascadia/oui_cascadia_colors_light.scss';
@import '@opensearch-project/oui/src/themes/oui-cascadia/oui_cascadia_globals.scss';
```

### Using Sass to customize OUI
Expand Down Expand Up @@ -157,13 +144,6 @@ By default, OUI ships with a font stack that includes some outside, open source
@import url('https://rsms.me/inter/inter-ui.css');
```

The Cascadia theme uses the latest version of Inter that can be grabbed from Google Fonts as well.

```scss
// index.scss
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Roboto+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap');
```

### Reusing the variables in JavaScript

The Sass variables are also made available for consumption as json files. This enables reuse of values in css-in-js systems like [styled-components](https://www.styled-components.com). As the following example shows, it can also make the downstream components theme-aware without much extra effort:
Expand Down