fixed Presets examples layout, fixed custom Tooltip layout

epam · Nov 12, 2024 · d3a1cee · d3a1cee
1 parent b5d19c4
commit d3a1cee
Show file tree

Hide file tree

Showing 5 changed files with 13 additions and 10 deletions.
diff --git a/app/src/demo/tables/filteredTable/FilteredTable.module.scss b/app/src/demo/tables/filteredTable/FilteredTable.module.scss
@@ -13,8 +13,6 @@
     flex-shrink: 0;
     background-color: var(--uui-surface-main);
     border-bottom: 1px solid var(--uui-divider);
-    overflow-x: auto;
-    overflow-y: hidden;
     align-items: center;
 
     .presets-title {

diff --git a/app/src/docs/_examples/tables/PresetsPanelBasic.example.tsx b/app/src/docs/_examples/tables/PresetsPanelBasic.example.tsx
@@ -133,7 +133,7 @@ export default function PresetsPanelExample() {
 
     return (
         <Panel background="surface-main" shadow style={ { height: '400px' } }>
-            <FlexRow padding="12">
+            <FlexRow padding="12" borderBottom>
                 <PresetsPanel { ...tableStateApi } />
             </FlexRow>
             <DataTable

diff --git a/app/src/docs/_examples/tables/useTableState/useTableState.example.tsx b/app/src/docs/_examples/tables/useTableState/useTableState.example.tsx
@@ -128,7 +128,7 @@ export default function FiltersPanelExample() {
 
     return (
         <Panel background="surface-main" shadow style={ { height: '400px' } }>
-            <FlexRow padding="12">
+            <FlexRow padding="12" borderBottom>
                 <PresetsPanel { ...tableStateApi } />
             </FlexRow>
             <DataTable

diff --git a/app/src/docs/_examples/tooltip/CustomMarkup.example.tsx b/app/src/docs/_examples/tooltip/CustomMarkup.example.tsx
@@ -8,13 +8,13 @@ export default function CustomMarkupExample() {
     ];
     const renderCustomMarkup = () => (
         <>
-            <Text fontSize="14">
+            <Text fontSize="14" size="none" fontWeight="600" lineHeight="18" cx={ css.header }>
                 Copy Workload Based Revenue to Forecast
             </Text>
-            <FlexRow columnGap="12">
+            <FlexRow columnGap="6" vPadding="12">
                 {months.map((month) => (
-                    <FlexCell minWidth={ 60 } cx={ css.textBlock } key={ month }>
-                        <Text fontSize="14" lineHeight="18" cx={ css.text }>
+                    <FlexCell minWidth={ 50 } width="auto" cx={ css.textBlock } key={ month }>
+                        <Text fontSize="14" lineHeight="18" fontWeight="600" cx={ css.text }>
                             {month}
                             {' '}
                             - 22
@@ -30,7 +30,7 @@ export default function CustomMarkupExample() {
 
     return (
         <FlexRow>
-            <Tooltip maxWidth={ 380 } renderContent={ renderCustomMarkup } color="neutral" placement="right">
+            <Tooltip maxWidth={ 500 } renderContent={ renderCustomMarkup } color="neutral" placement="right">
                 <Button data-foo={ 123 } fill="outline" caption="Custom tooltip" onClick={ () => null } />
             </Tooltip>
         </FlexRow>

diff --git a/app/src/docs/_examples/tooltip/CustomMarkupExample.module.scss b/app/src/docs/_examples/tooltip/CustomMarkupExample.module.scss
@@ -1,5 +1,10 @@
+.header {
+    padding-top: 6px;
+}
+
 .textBlock:not(:last-child) {
-    border-right: 1px solid var(--uui-neutral-5);
+    padding-right: 6px;
+    border-right: 1px solid var(--uui-divider);
 }
 
 .text {