@patternfly/patternfly 4.204.4 → 4.205.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 (9) hide show
  1. package/components/Timestamp/timestamp.css +31 -0
  2. package/components/Timestamp/timestamp.scss +37 -0
  3. package/components/_all.scss +1 -0
  4. package/docs/components/Timestamp/examples/Timestamp.md +62 -0
  5. package/package.json +1 -1
  6. package/patternfly-no-reset.css +32 -0
  7. package/patternfly.css +32 -0
  8. package/patternfly.min.css +1 -1
  9. package/patternfly.min.css.map +1 -1
package/components/Timestamp/timestamp.css ADDED
@@ -0,0 +1,31 @@
1
+ .pf-c-timestamp {
2
+ --pf-c-timestamp--FontSize: var(--pf-global--FontSize--sm);
3
+ --pf-c-timestamp--Color: var(--pf-global--Color--200);
4
+ --pf-c-timestamp--m-help-text--TextDecorationLine: underline;
5
+ --pf-c-timestamp--m-help-text--TextDecorationStyle: dashed;
6
+ --pf-c-timestamp--m-help-text--TextDecorationThickness: var(--pf-global--BorderWidth--sm);
7
+ --pf-c-timestamp--m-help-text--TextUnderlineOffset: 0.25rem;
8
+ --pf-c-timestamp--m-help-text--TextDecorationColor: var(--pf-global--BorderColor--200);
9
+ --pf-c-timestamp--m-help-text--hover--Color: var(--pf-global--Color--100);
10
+ --pf-c-timestamp--m-help-text--focus--Color: var(--pf-global--Color--100);
11
+ --pf-c-timestamp--m-help-text--hover--TextDecorationColor: var(--pf-global--Color--100);
12
+ --pf-c-timestamp--m-help-text--focus--TextDecorationColor: var(--pf-global--Color--100);
13
+ font-size: var(--pf-c-timestamp--FontSize);
14
+ color: var(--pf-c-timestamp--Color);
15
+ }
16
+ .pf-c-timestamp.pf-m-help-text {
17
+ cursor: pointer;
18
+ text-decoration-line: var(--pf-c-timestamp--m-help-text--TextDecorationLine);
19
+ text-decoration-style: var(--pf-c-timestamp--m-help-text--TextDecorationStyle);
20
+ text-decoration-thickness: var(--pf-c-timestamp--m-help-text--TextDecorationThickness);
21
+ text-underline-offset: var(--pf-c-timestamp--m-help-text--TextUnderlineOffset);
22
+ text-decoration-color: var(--pf-c-timestamp--m-help-text--TextDecorationColor);
23
+ }
24
+ .pf-c-timestamp.pf-m-help-text:hover {
25
+ --pf-c-timestamp--Color: var(--pf-c-timestamp--m-help-text--hover--Color);
26
+ --pf-c-timestamp--m-help-text--TextDecorationColor: var(--pf-c-timestamp--m-help-text--hover--TextDecorationColor);
27
+ }
28
+ .pf-c-timestamp.pf-m-help-text:focus {
29
+ --pf-c-timestamp--Color: var(--pf-c-timestamp--m-help-text--focus--Color);
30
+ --pf-c-timestamp--m-help-text--TextDecorationColor: var(--pf-c-timestamp--m-help-text--focus--TextDecorationColor);
31
+ }
package/components/Timestamp/timestamp.scss ADDED
@@ -0,0 +1,37 @@
1
+ .pf-c-timestamp {
2
+ --pf-c-timestamp--FontSize: var(--pf-global--FontSize--sm);
3
+ --pf-c-timestamp--Color: var(--pf-global--Color--200);
4
+
5
+ // Help text variables for the timestamp
6
+ --pf-c-timestamp--m-help-text--TextDecorationLine: underline;
7
+ --pf-c-timestamp--m-help-text--TextDecorationStyle: dashed;
8
+ --pf-c-timestamp--m-help-text--TextDecorationThickness: var(--pf-global--BorderWidth--sm);
9
+ --pf-c-timestamp--m-help-text--TextUnderlineOffset: #{pf-size-prem(4px)};
10
+ --pf-c-timestamp--m-help-text--TextDecorationColor: var(--pf-global--BorderColor--200);
11
+ --pf-c-timestamp--m-help-text--hover--Color: var(--pf-global--Color--100);
12
+ --pf-c-timestamp--m-help-text--focus--Color: var(--pf-global--Color--100);
13
+ --pf-c-timestamp--m-help-text--hover--TextDecorationColor: var(--pf-global--Color--100);
14
+ --pf-c-timestamp--m-help-text--focus--TextDecorationColor: var(--pf-global--Color--100);
15
+
16
+ font-size: var(--pf-c-timestamp--FontSize);
17
+ color: var(--pf-c-timestamp--Color);
18
+
19
+ &.pf-m-help-text {
20
+ cursor: pointer;
21
+ text-decoration-line: var(--pf-c-timestamp--m-help-text--TextDecorationLine);
22
+ text-decoration-style: var(--pf-c-timestamp--m-help-text--TextDecorationStyle);
23
+ text-decoration-thickness: var(--pf-c-timestamp--m-help-text--TextDecorationThickness);
24
+ text-underline-offset: var(--pf-c-timestamp--m-help-text--TextUnderlineOffset);
25
+ text-decoration-color: var(--pf-c-timestamp--m-help-text--TextDecorationColor);
26
+
27
+ &:hover {
28
+ --pf-c-timestamp--Color: var(--pf-c-timestamp--m-help-text--hover--Color);
29
+ --pf-c-timestamp--m-help-text--TextDecorationColor: var(--pf-c-timestamp--m-help-text--hover--TextDecorationColor);
30
+ }
31
+
32
+ &:focus {
33
+ --pf-c-timestamp--Color: var(--pf-c-timestamp--m-help-text--focus--Color);
34
+ --pf-c-timestamp--m-help-text--TextDecorationColor: var(--pf-c-timestamp--m-help-text--focus--TextDecorationColor);
35
+ }
36
+ }
37
+ }
package/components/_all.scss CHANGED
@@ -81,6 +81,7 @@
81
81
  @import "./Tabs/tabs";
82
82
  @import "./TextInputGroup/text-input-group";
83
83
  @import "./Tile/tile";
84
+ @import "./Timestamp/timestamp";
84
85
  @import "./Title/title";
85
86
  @import "./ToggleGroup/toggle-group";
86
87
  @import "./Tooltip/tooltip";
package/docs/components/Timestamp/examples/Timestamp.md ADDED
@@ -0,0 +1,62 @@
1
+ ---
2
+ id: Timestamp
3
+ beta: true
4
+ section: components
5
+ cssPrefix: pf-c-timestamp
6
+ ---## Examples
7
+
8
+ ### Basic
9
+
10
+ ```html
11
+ <span class="pf-c-timestamp">
12
+ <time
13
+ class="pf-c-timestamp__text"
14
+ datetime="2019-01-21T21:38"
15
+ >Thursday, 21 January 2019, 9:38 PM EST</time>
16
+ </span>
17
+
18
+ <br />
19
+ <br />
20
+
21
+ <span class="pf-c-timestamp">
22
+ <time
23
+ class="pf-c-timestamp__text"
24
+ datetime="2019-01-21T21:38"
25
+ >21 January 2019, 9:38 PM EST</time>
26
+ </span>
27
+
28
+ <br />
29
+ <br />
30
+
31
+ <span class="pf-c-timestamp">
32
+ <time
33
+ class="pf-c-timestamp__text"
34
+ datetime="2019-01-21T21:38"
35
+ >21 Jan. 2019, 9:38 PM EST</time>
36
+ </span>
37
+
38
+ <br />
39
+ <br />
40
+
41
+ <span class="pf-c-timestamp">
42
+ <time class="pf-c-timestamp__text" datetime="2022-07-15T10:00">1 hour ago</time>
43
+ </span>
44
+
45
+ <br />
46
+ <br />
47
+
48
+ <span class="pf-c-timestamp">
49
+ <time class="pf-c-timestamp__text" datetime="2022-07-21">Tomorrow</time>
50
+ </span>
51
+
52
+ ```
53
+
54
+ ## Documentation
55
+
56
+ ### Usage
57
+
58
+ | Class | Applied to | Outcome |
59
+ | ----------------------- | ----------------- | ------------------------------------------------------ |
60
+ | `.pf-c-timestamp` | `<span>` | Creates a timestamp. **Required** |
61
+ | `.pf-c-timestamp__text` | `<time>` | Creates the visual text of the timestamp. **Required** |
62
+ | `.pf-m-help-text` | `.pf-c-timestamp` | Modifies styling for a timestamp that has help text. |
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@patternfly/patternfly",
3
3
  "description": "Assets, source, tooling, and content for PatternFly 4",
4
- "version": "4.204.4",
4
+ "version": "4.205.0",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {
package/patternfly-no-reset.css CHANGED
@@ -30715,6 +30715,38 @@ svg.pf-c-spinner.pf-m-xl {
30715
30715
  --pf-c-tile--m-disabled__body--Color: var(--pf-global--disabled-color--300);
30716
30716
  }
30717
30717
 
30718
+ .pf-c-timestamp {
30719
+ --pf-c-timestamp--FontSize: var(--pf-global--FontSize--sm);
30720
+ --pf-c-timestamp--Color: var(--pf-global--Color--200);
30721
+ --pf-c-timestamp--m-help-text--TextDecorationLine: underline;
30722
+ --pf-c-timestamp--m-help-text--TextDecorationStyle: dashed;
30723
+ --pf-c-timestamp--m-help-text--TextDecorationThickness: var(--pf-global--BorderWidth--sm);
30724
+ --pf-c-timestamp--m-help-text--TextUnderlineOffset: 0.25rem;
30725
+ --pf-c-timestamp--m-help-text--TextDecorationColor: var(--pf-global--BorderColor--200);
30726
+ --pf-c-timestamp--m-help-text--hover--Color: var(--pf-global--Color--100);
30727
+ --pf-c-timestamp--m-help-text--focus--Color: var(--pf-global--Color--100);
30728
+ --pf-c-timestamp--m-help-text--hover--TextDecorationColor: var(--pf-global--Color--100);
30729
+ --pf-c-timestamp--m-help-text--focus--TextDecorationColor: var(--pf-global--Color--100);
30730
+ font-size: var(--pf-c-timestamp--FontSize);
30731
+ color: var(--pf-c-timestamp--Color);
30732
+ }
30733
+ .pf-c-timestamp.pf-m-help-text {
30734
+ cursor: pointer;
30735
+ text-decoration-line: var(--pf-c-timestamp--m-help-text--TextDecorationLine);
30736
+ text-decoration-style: var(--pf-c-timestamp--m-help-text--TextDecorationStyle);
30737
+ text-decoration-thickness: var(--pf-c-timestamp--m-help-text--TextDecorationThickness);
30738
+ text-underline-offset: var(--pf-c-timestamp--m-help-text--TextUnderlineOffset);
30739
+ text-decoration-color: var(--pf-c-timestamp--m-help-text--TextDecorationColor);
30740
+ }
30741
+ .pf-c-timestamp.pf-m-help-text:hover {
30742
+ --pf-c-timestamp--Color: var(--pf-c-timestamp--m-help-text--hover--Color);
30743
+ --pf-c-timestamp--m-help-text--TextDecorationColor: var(--pf-c-timestamp--m-help-text--hover--TextDecorationColor);
30744
+ }
30745
+ .pf-c-timestamp.pf-m-help-text:focus {
30746
+ --pf-c-timestamp--Color: var(--pf-c-timestamp--m-help-text--focus--Color);
30747
+ --pf-c-timestamp--m-help-text--TextDecorationColor: var(--pf-c-timestamp--m-help-text--focus--TextDecorationColor);
30748
+ }
30749
+
30718
30750
  .pf-c-title {
30719
30751
  --pf-c-title--FontFamily: var(--pf-global--FontFamily--heading--sans-serif);
30720
30752
  --pf-c-title--m-4xl--LineHeight: var(--pf-global--LineHeight--sm);
package/patternfly.css CHANGED
@@ -30842,6 +30842,38 @@ svg.pf-c-spinner.pf-m-xl {
30842
30842
  --pf-c-tile--m-disabled__body--Color: var(--pf-global--disabled-color--300);
30843
30843
  }
30844
30844
 
30845
+ .pf-c-timestamp {
30846
+ --pf-c-timestamp--FontSize: var(--pf-global--FontSize--sm);
30847
+ --pf-c-timestamp--Color: var(--pf-global--Color--200);
30848
+ --pf-c-timestamp--m-help-text--TextDecorationLine: underline;
30849
+ --pf-c-timestamp--m-help-text--TextDecorationStyle: dashed;
30850
+ --pf-c-timestamp--m-help-text--TextDecorationThickness: var(--pf-global--BorderWidth--sm);
30851
+ --pf-c-timestamp--m-help-text--TextUnderlineOffset: 0.25rem;
30852
+ --pf-c-timestamp--m-help-text--TextDecorationColor: var(--pf-global--BorderColor--200);
30853
+ --pf-c-timestamp--m-help-text--hover--Color: var(--pf-global--Color--100);
30854
+ --pf-c-timestamp--m-help-text--focus--Color: var(--pf-global--Color--100);
30855
+ --pf-c-timestamp--m-help-text--hover--TextDecorationColor: var(--pf-global--Color--100);
30856
+ --pf-c-timestamp--m-help-text--focus--TextDecorationColor: var(--pf-global--Color--100);
30857
+ font-size: var(--pf-c-timestamp--FontSize);
30858
+ color: var(--pf-c-timestamp--Color);
30859
+ }
30860
+ .pf-c-timestamp.pf-m-help-text {
30861
+ cursor: pointer;
30862
+ text-decoration-line: var(--pf-c-timestamp--m-help-text--TextDecorationLine);
30863
+ text-decoration-style: var(--pf-c-timestamp--m-help-text--TextDecorationStyle);
30864
+ text-decoration-thickness: var(--pf-c-timestamp--m-help-text--TextDecorationThickness);
30865
+ text-underline-offset: var(--pf-c-timestamp--m-help-text--TextUnderlineOffset);
30866
+ text-decoration-color: var(--pf-c-timestamp--m-help-text--TextDecorationColor);
30867
+ }
30868
+ .pf-c-timestamp.pf-m-help-text:hover {
30869
+ --pf-c-timestamp--Color: var(--pf-c-timestamp--m-help-text--hover--Color);
30870
+ --pf-c-timestamp--m-help-text--TextDecorationColor: var(--pf-c-timestamp--m-help-text--hover--TextDecorationColor);
30871
+ }
30872
+ .pf-c-timestamp.pf-m-help-text:focus {
30873
+ --pf-c-timestamp--Color: var(--pf-c-timestamp--m-help-text--focus--Color);
30874
+ --pf-c-timestamp--m-help-text--TextDecorationColor: var(--pf-c-timestamp--m-help-text--focus--TextDecorationColor);
30875
+ }
30876
+
30845
30877
  .pf-c-title {
30846
30878
  --pf-c-title--FontFamily: var(--pf-global--FontFamily--heading--sans-serif);
30847
30879
  --pf-c-title--m-4xl--LineHeight: var(--pf-global--LineHeight--sm);