@ansible/ansible-ui-framework 0.0.334 → 0.0.336
Sign up to get free protection for your applications and to get access to all the features.
- package/cjs/PageLayout.d.ts +1 -1
- package/cjs/PageLayout.js +1 -1
- package/docs/BulkActionDialog.md +1 -1
- package/docs/Framework.md +4 -4
- package/docs/GettingStarted.md +21 -6
- package/docs/PageFramework.md +1 -1
- package/docs/PageHeader.md +1 -1
- package/docs/PageLayout.md +2 -2
- package/docs/assets/css/style.scss +10 -6
- package/docs/index.md +4 -4
- package/package.json +1 -1
package/cjs/PageLayout.d.ts
CHANGED
@@ -2,7 +2,7 @@ import { ReactNode } from 'react';
|
|
2
2
|
/**
|
3
3
|
* The PageLayout is used as the container for the contents of the page.
|
4
4
|
* It enables page components to leverage full page layout and scrolling of sub content.
|
5
|
-
* An example is a full page table
|
5
|
+
* An example is a full page table where the page header, toolbar, column headers, and pagination stay fixed, but the rows of the table can scroll.
|
6
6
|
*
|
7
7
|
* @example
|
8
8
|
* <Page>
|
package/cjs/PageLayout.js
CHANGED
@@ -37,7 +37,7 @@ var useFrameworkTranslations_1 = require("./useFrameworkTranslations");
|
|
37
37
|
/**
|
38
38
|
* The PageLayout is used as the container for the contents of the page.
|
39
39
|
* It enables page components to leverage full page layout and scrolling of sub content.
|
40
|
-
* An example is a full page table
|
40
|
+
* An example is a full page table where the page header, toolbar, column headers, and pagination stay fixed, but the rows of the table can scroll.
|
41
41
|
*
|
42
42
|
* @example
|
43
43
|
* <Page>
|
package/docs/BulkActionDialog.md
CHANGED
package/docs/Framework.md
CHANGED
@@ -8,12 +8,12 @@ A framework for building applications using [PatternFly](https://www.patternfly.
|
|
8
8
|
- [Guides](Guides.md)
|
9
9
|
- [Components](Components.md)
|
10
10
|
|
11
|
-
The framework is made up of high level components
|
12
|
-
This allows the framework to adjust the web application for responsive layout.
|
11
|
+
The framework is made up of high level components abstracting design patterns away from the PatternFly components used underneath.
|
13
12
|
|
14
|
-
|
13
|
+
This framework:
|
15
14
|
|
16
15
|
- does not use any state libraries other than the built in react context state management.
|
17
16
|
- does not assume any specific translation libraries, but does provide a hook for internal translations.
|
18
17
|
- does not assume any specific navigation libraries, but does provide a hook for internal navigation.
|
19
|
-
|
18
|
+
|
19
|
+
There is an [Ansible UI Framework Demo](https://github.com/jamestalton/ansible-ui-framework-demo) repo showing an example of using the framework.
|
package/docs/GettingStarted.md
CHANGED
@@ -16,7 +16,7 @@ npm install @ansible/ansible-ui-framework
|
|
16
16
|
|
17
17
|
## Add the PageFramework to your application
|
18
18
|
|
19
|
-
Near the top of your application add the [PageFramework](
|
19
|
+
Near the top of your application add the [PageFramework](PageFramework.md) component.
|
20
20
|
|
21
21
|
This component adds the state management needed by the framework.
|
22
22
|
|
@@ -24,7 +24,7 @@ This component adds the state management needed by the framework.
|
|
24
24
|
|
25
25
|
### Use PageLayout to control the layout in your pages
|
26
26
|
|
27
|
-
The [PageLayout](
|
27
|
+
The [PageLayout](PageLayout.md) is used as the container for the contents of the page. It enables page components to leverage full page layout and scrolling of sub content. An example is a full page table where the page header, toolbar, column headers, and pagination stay fixed, but the rows of the table can scroll.
|
28
28
|
|
29
29
|
```tsx
|
30
30
|
<Page>
|
@@ -37,7 +37,7 @@ The [PageLayout](https://github.com/ansible/ansible-ui/blob/main/framework/docs/
|
|
37
37
|
|
38
38
|
### Use PageHeader for the heading of your pages
|
39
39
|
|
40
|
-
The [PageHeader](
|
40
|
+
The [PageHeader](PageHeader.md) is used at the top of each page. It provides a consistent layout of header elements.
|
41
41
|
|
42
42
|
```tsx
|
43
43
|
<Page>
|
@@ -52,7 +52,7 @@ The [PageHeader](https://github.com/ansible/ansible-ui/blob/main/framework/docs/
|
|
52
52
|
|
53
53
|
#### Table Pages
|
54
54
|
|
55
|
-
For pages containing a table, use the [PageTable](
|
55
|
+
For pages containing a table, use the [PageTable](PageTable.md) component. The PageTable support table, list, and card views of the data.
|
56
56
|
|
57
57
|
```tsx
|
58
58
|
<Page>
|
@@ -65,7 +65,7 @@ For pages containing a table, use the [PageTable](https://github.com/ansible/ans
|
|
65
65
|
|
66
66
|
#### Form Pages
|
67
67
|
|
68
|
-
For pages containing an input form, use the [PageForm](
|
68
|
+
For pages containing an input form, use the [PageForm](PageForm.md) component.
|
69
69
|
|
70
70
|
```tsx
|
71
71
|
<Page>
|
@@ -76,4 +76,19 @@ For pages containing an input form, use the [PageForm](https://github.com/ansibl
|
|
76
76
|
</Page>
|
77
77
|
```
|
78
78
|
|
79
|
-
|
79
|
+
#### Detail Pages
|
80
|
+
|
81
|
+
TODO
|
82
|
+
|
83
|
+
#### Page sub navigation
|
84
|
+
|
85
|
+
TODO
|
86
|
+
|
87
|
+
### Other Components
|
88
|
+
|
89
|
+
<!-- - [PageAlertToaster](PageAlertToaster.md) -->
|
90
|
+
|
91
|
+
- [BulkActionDialog](BulkActionDialog.md)
|
92
|
+
<!-- - [BulkConfirmationDialog](BulkConfirmationDialog.md) -->
|
93
|
+
<!-- - [SelectDialog](SelectDialog.md) -->
|
94
|
+
<!-- - [SelectMultipleDialog](SelectMultipleDialog.md) -->
|
package/docs/PageFramework.md
CHANGED
@@ -4,7 +4,7 @@
|
|
4
4
|
|
5
5
|
The `PageFramework` component bundles up all the context providers in the Ansible UI framework in a convienent component for framework consumers. Examples of internal context providers are translations, navigation, settings, alerts, and dialogs.
|
6
6
|
|
7
|
-
|
7
|
+
**Example**
|
8
8
|
|
9
9
|
```tsx
|
10
10
|
<PageFramework navigate={navigate}>...</PageFramework>
|
package/docs/PageHeader.md
CHANGED
package/docs/PageLayout.md
CHANGED
@@ -4,9 +4,9 @@
|
|
4
4
|
|
5
5
|
The PageLayout is used as the container for the contents of the page.
|
6
6
|
It enables page components to leverage full page layout and scrolling of sub content.
|
7
|
-
An example is a full page table
|
7
|
+
An example is a full page table where the page header, toolbar, column headers, and pagination stay fixed, but the rows of the table can scroll.
|
8
8
|
|
9
|
-
|
9
|
+
**Example**
|
10
10
|
|
11
11
|
```tsx
|
12
12
|
<Page>
|
@@ -66,8 +66,12 @@ h4 {
|
|
66
66
|
color: #4ad;
|
67
67
|
}
|
68
68
|
|
69
|
+
.highlight .k {
|
70
|
+
color: #248;
|
71
|
+
}
|
72
|
+
|
69
73
|
.highlight .kd {
|
70
|
-
color: #
|
74
|
+
color: #248;
|
71
75
|
}
|
72
76
|
|
73
77
|
.highlight .o {
|
@@ -91,12 +95,12 @@ h4 {
|
|
91
95
|
color: orangered;
|
92
96
|
}
|
93
97
|
|
94
|
-
table
|
95
|
-
background-color: #
|
98
|
+
table thead {
|
99
|
+
background-color: #08090b;
|
96
100
|
}
|
97
101
|
|
98
|
-
table
|
99
|
-
background-color: #
|
102
|
+
table tbody {
|
103
|
+
background-color: #08090b;
|
100
104
|
}
|
101
105
|
|
102
106
|
.markdown-body table tr {
|
@@ -114,7 +118,7 @@ table body {
|
|
114
118
|
}
|
115
119
|
|
116
120
|
.markdown-body table th {
|
117
|
-
color: #
|
121
|
+
color: #fff9;
|
118
122
|
border: unset;
|
119
123
|
border-bottom: 1px solid #fff4;
|
120
124
|
}
|
package/docs/index.md
CHANGED
@@ -8,12 +8,12 @@ A framework for building applications using [PatternFly](https://www.patternfly.
|
|
8
8
|
- [Guides](Guides.md)
|
9
9
|
- [Components](Components.md)
|
10
10
|
|
11
|
-
The framework is made up of high level components
|
12
|
-
This allows the framework to adjust the web application for responsive layout.
|
11
|
+
The framework is made up of high level components abstracting design patterns away from the PatternFly components used underneath.
|
13
12
|
|
14
|
-
|
13
|
+
This framework:
|
15
14
|
|
16
15
|
- does not use any state libraries other than the built in react context state management.
|
17
16
|
- does not assume any specific translation libraries, but does provide a hook for internal translations.
|
18
17
|
- does not assume any specific navigation libraries, but does provide a hook for internal navigation.
|
19
|
-
|
18
|
+
|
19
|
+
There is an [Ansible UI Framework Demo](https://github.com/jamestalton/ansible-ui-framework-demo) repo showing an example of using the framework.
|