@redocly/theme 0.19.8 → 0.19.9

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 (5) hide show
  1. package/lib/components/Filter/FilterContent.js +16 -3
  2. package/lib/components/Filter/styledVariables.js +1 -2
  3. package/package.json +1 -1
  4. package/src/components/Filter/FilterContent.tsx +20 -5
  5. package/src/components/Filter/styledVariables.ts +1 -2
package/lib/components/Filter/FilterContent.js CHANGED
@@ -19,6 +19,8 @@ function FilterContent({ setFilterTerm, filters, filterTerm, isMobile, filterVal
19
19
  clearAll: 'theme.catalog.filters.clearAll',
20
20
  };
21
21
  const hasActiveFilters = filters.some((filter) => {
22
+ if (filterTerm)
23
+ return true;
22
24
  if (filter.selectedOptions && filter.selectedOptions instanceof Set) {
23
25
  return filter.selectedOptions.size;
24
26
  }
@@ -28,12 +30,14 @@ function FilterContent({ setFilterTerm, filters, filterTerm, isMobile, filterVal
28
30
  });
29
31
  const handleClearAll = () => {
30
32
  filters.forEach((filter) => filter.selectOption(''));
33
+ setFilterTerm('');
31
34
  };
32
35
  return (react_1.default.createElement(FilterContentWrapper, { isMobile: isMobile },
33
36
  react_1.default.createElement(Catalog_1.FilterControls, null,
34
37
  react_1.default.createElement(FilterPopover_1.StyledInput, { placeholder: translate(translationKeys.placeholder, 'Type to filter...'), value: filterTerm, onChange: (e) => setFilterTerm(e.target.value) })),
35
38
  react_1.default.createElement(exports.FilterItems, null, filters.map((filter, idx) => (react_1.default.createElement(Filter_1.Filter, { filter: filter, key: filter.property + '-' + idx, filterValuesCasing: filterValuesCasing })))),
36
- hasActiveFilters && (react_1.default.createElement(Button_1.Button, { size: "small", onClick: handleClearAll }, translate(translationKeys.placeholder, 'Clear all filters')))));
39
+ hasActiveFilters && (react_1.default.createElement(ActionsContainer, null,
40
+ react_1.default.createElement(ClearAllButton, { size: "default", variant: "outlined", onClick: handleClearAll }, translate(translationKeys.placeholder, 'Clear all filters'))))));
37
41
  }
38
42
  exports.FilterContent = FilterContent;
39
43
  const FilterContentWrapper = (0, styled_components_1.default)(Sidebar_1.Sidebar) `
@@ -42,11 +46,10 @@ const FilterContentWrapper = (0, styled_components_1.default)(Sidebar_1.Sidebar)
42
46
 
43
47
  ${Button_1.Button} {
44
48
  width: var(--filter-content-clear-button-width);
45
- margin: var(--filter-content-clear-button-margin);
46
49
  }
47
50
 
48
51
  ${({ theme, isMobile }) => !isMobile && theme.mediaQueries.medium} {
49
- display: block;
52
+ display: flex;
50
53
  border-right: 1px solid var(--filter-content-border-color);
51
54
 
52
55
  ${Catalog_1.FilterControls} {
@@ -55,6 +58,16 @@ const FilterContentWrapper = (0, styled_components_1.default)(Sidebar_1.Sidebar)
55
58
  }
56
59
  `;
57
60
  exports.FilterItems = styled_components_1.default.div `
61
+ overflow: scroll;
58
62
  padding: var(--filter-content-items-padding);
59
63
  `;
64
+ const ActionsContainer = styled_components_1.default.div `
65
+ display: flex;
66
+ align-items: center;
67
+ padding: var(--spacing-base) var(--spacing-lg);
68
+ margin-top: auto;
69
+ `;
70
+ const ClearAllButton = (0, styled_components_1.default)(Button_1.Button) `
71
+ width: var(--filter-content-clear-button-width);
72
+ `;
60
73
  //# sourceMappingURL=FilterContent.js.map
package/lib/components/Filter/styledVariables.js CHANGED
@@ -33,8 +33,7 @@ exports.filter = (0, styled_components_1.css) `
33
33
 
34
34
  --filter-content-border-color: var(--border-secondary);
35
35
  --filter-content-items-padding: 0 var(--spacing-lg);
36
- --filter-content-clear-button-margin: var(--spacing-base) auto 0 auto;
37
- --filter-content-clear-button-width: calc(var(--spacing-unit) * 40);
36
+ --filter-content-clear-button-width: 100%;
38
37
  --filter-controls-background-color: var(--bg-base);
39
38
 
40
39
  --filter-popover-background-color: var(--bg-base);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@redocly/theme",
3
- "version": "0.19.8",
3
+ "version": "0.19.9",
4
4
  "description": "Shared UI components lib",
5
5
  "keywords": [
6
6
  "theme",
package/src/components/Filter/FilterContent.tsx CHANGED
@@ -32,6 +32,7 @@ export function FilterContent({
32
32
  };
33
33
 
34
34
  const hasActiveFilters = filters.some((filter) => {
35
+ if (filterTerm) return true;
35
36
  if (filter.selectedOptions && filter.selectedOptions instanceof Set) {
36
37
  return filter.selectedOptions.size;
37
38
  } else if (filter.selectedOptions.from && filter.selectedOptions.to) {
@@ -41,6 +42,7 @@ export function FilterContent({
41
42
 
42
43
  const handleClearAll = () => {
43
44
  filters.forEach((filter) => filter.selectOption(''));
45
+ setFilterTerm('');
44
46
  };
45
47
 
46
48
  return (
@@ -62,9 +64,11 @@ export function FilterContent({
62
64
  ))}
63
65
  </FilterItems>
64
66
  {hasActiveFilters && (
65
- <Button size="small" onClick={handleClearAll}>
66
- {translate(translationKeys.placeholder, 'Clear all filters')}
67
- </Button>
67
+ <ActionsContainer>
68
+ <ClearAllButton size="default" variant="outlined" onClick={handleClearAll}>
69
+ {translate(translationKeys.placeholder, 'Clear all filters')}
70
+ </ClearAllButton>
71
+ </ActionsContainer>
68
72
  )}
69
73
  </FilterContentWrapper>
70
74
  );
@@ -76,11 +80,10 @@ const FilterContentWrapper = styled(Sidebar)<{ isMobile?: boolean }>`
76
80
 
77
81
  ${Button} {
78
82
  width: var(--filter-content-clear-button-width);
79
- margin: var(--filter-content-clear-button-margin);
80
83
  }
81
84
 
82
85
  ${({ theme, isMobile }) => !isMobile && theme.mediaQueries.medium} {
83
- display: block;
86
+ display: flex;
84
87
  border-right: 1px solid var(--filter-content-border-color);
85
88
 
86
89
  ${FilterControls} {
@@ -90,5 +93,17 @@ const FilterContentWrapper = styled(Sidebar)<{ isMobile?: boolean }>`
90
93
  `;
91
94
 
92
95
  export const FilterItems = styled.div`
96
+ overflow: scroll;
93
97
  padding: var(--filter-content-items-padding);
94
98
  `;
99
+
100
+ const ActionsContainer = styled.div`
101
+ display: flex;
102
+ align-items: center;
103
+ padding: var(--spacing-base) var(--spacing-lg);
104
+ margin-top: auto;
105
+ `;
106
+
107
+ const ClearAllButton = styled(Button)`
108
+ width: var(--filter-content-clear-button-width);
109
+ `;
package/src/components/Filter/styledVariables.ts CHANGED
@@ -31,8 +31,7 @@ export const filter = css`
31
31
 
32
32
  --filter-content-border-color: var(--border-secondary);
33
33
  --filter-content-items-padding: 0 var(--spacing-lg);
34
- --filter-content-clear-button-margin: var(--spacing-base) auto 0 auto;
35
- --filter-content-clear-button-width: calc(var(--spacing-unit) * 40);
34
+ --filter-content-clear-button-width: 100%;
36
35
  --filter-controls-background-color: var(--bg-base);
37
36
 
38
37
  --filter-popover-background-color: var(--bg-base);