chore: fix gaps in safari (#6093)

taiga-family · Nov 27, 2023 · b700101 · b700101
1 parent d265c64
commit b700101
Show file tree

Hide file tree

Showing 25 changed files with 146 additions and 154 deletions.
diff --git a/projects/addon-mobile/styles/common/badge.less b/projects/addon-mobile/styles/common/badge.less
@@ -15,7 +15,7 @@ tui-badge,
         font: var(--tui-font-text-s);
         font-weight: bold;
 
-        --t-padding: 0 0.625rem 0 0.375rem;
+        --t-padding: 0 0.625rem;
         --t-size: 1.75rem;
     }
 }
diff --git a/projects/core/styles/mixins/mixins.less b/projects/core/styles/mixins/mixins.less
@@ -65,8 +65,9 @@
     text-decoration: none;
 }
 
-.chip() {
+.button-base() {
     .clearbtn();
+    position: relative;
     display: inline-flex;
     align-items: center;
     flex-shrink: 0;
@@ -75,7 +76,21 @@
     overflow: hidden;
     vertical-align: middle;
     max-width: 100%;
-    font: var(--tui-font-text-s);
+    gap: calc(var(--t-gap) - 2 * var(--t-margin));
+
+    > img,
+    > tui-svg,
+    > tui-icon,
+    > tui-avatar,
+    > tui-badge,
+    > [tuiBadge],
+    > [tuiRadio],
+    > [tuiToggle],
+    > [tuiCheckbox],
+    &._icon-left:before,
+    &._icon-right:after {
+        margin: var(--t-margin);
+    }
 }
 
 .autofill(@mode:default) {

diff --git a/projects/core/styles/mixins/mixins.scss b/projects/core/styles/mixins/mixins.scss
@@ -64,9 +64,10 @@
     line-height: inherit;
 }
 
-@mixin chip() {
+@mixin button-base() {
     @include clearbtn();
 
+    position: relative;
     display: inline-flex;
     align-items: center;
     flex-shrink: 0;
@@ -75,9 +76,21 @@
     overflow: hidden;
     vertical-align: middle;
     max-width: 100%;
-    padding: var(--t-padding);
-    height: var(--t-size);
-    font: var(--tui-font-text-s);
+    gap: calc(var(--t-gap) - 2 * var(--t-margin));
+
+    > img,
+    > tui-svg,
+    > tui-icon,
+    > tui-avatar,
+    > tui-badge,
+    > [tuiBadge],
+    > [tuiRadio],
+    > [tuiToggle],
+    > [tuiCheckbox],
+    &._icon-left:before,
+    &._icon-right:after {
+        margin: var(--t-margin);
+    }
 }
 
 @mixin autofill($mode: default) {

diff --git a/projects/core/styles/theme/appearance/icon.less b/projects/core/styles/theme/appearance/icon.less
@@ -18,6 +18,7 @@
 [tuiAppearance][data-appearance='floating'] {
     &:before,
     &:after {
+        .transition(color);
         color: var(--tui-text-03);
     }
 

diff --git a/projects/demo/src/modules/app/pages.ts b/projects/demo/src/modules/app/pages.ts
@@ -953,7 +953,7 @@ export const pages: TuiDocPages = [
     },
     {
         section: `Experimental`,
-        title: `Tooltip`,
+        title: `Tooltip `,
         keywords: `tooltip, тултип, hint, подсказка, помощь, help`,
         route: `/experimental/tooltip`,
     },

diff --git a/projects/demo/src/modules/experimental/badge/badge.component.ts b/projects/demo/src/modules/experimental/badge/badge.component.ts
@@ -19,7 +19,6 @@ export class ExampleTuiBadgeComponent {
 
     readonly example1: TuiDocExample = {
         HTML: import('./examples/1/index.html?raw'),
-        LESS: import('./examples/1/index.less?raw'),
     };
 
     readonly example2: TuiDocExample = {

diff --git a/projects/demo/src/modules/experimental/badge/examples/1/index.html b/projects/demo/src/modules/experimental/badge/examples/1/index.html
@@ -10,7 +10,7 @@
 <p>Use CSS for support colors</p>
 <tui-badge
     *tuiRepeatTimes="let index of 20"
-    class="support-{{ index + 1 }}"
+    [style.background]="'var(--tui-support-' + (index + 1).toString().padStart(2, '0') + ')'"
 >
     Taiga
 </tui-badge>
diff --git a/projects/demo/src/modules/experimental/badge/examples/1/index.less b/projects/demo/src/modules/experimental/badge/examples/1/index.less
@@ -1,13 +1,3 @@
 tui-badge {
     margin: 0.5rem;
 }
-
-@iterations: 20;
-
-.loop (@i) when (@i > 0) {
-    .support-@{i} {
-        background-color: ~'var(--tui-support-@{i}, var(--tui-support-0@{i}))';
-    }
-    .loop(@i - 1);
-}
-.loop (@iterations);
diff --git a/projects/demo/src/modules/experimental/chip/chip.module.ts b/projects/demo/src/modules/experimental/chip/chip.module.ts
@@ -13,7 +13,6 @@ import {
     TuiCheckboxModule,
     TuiChipModule,
     TuiFadeModule,
-    TuiIconModule,
 } from '@taiga-ui/experimental';
 
 import {ExampleTuiChipComponent} from './chip.component';
@@ -28,7 +27,6 @@ import {TuiChipExample4} from './examples/4';
         FormsModule,
         TuiChipModule,
         TuiRepeatTimesModule,
-        TuiIconModule,
         TuiFadeModule,
         TuiNotificationModule,
         TuiButtonModule,

diff --git a/projects/demo/src/modules/experimental/sensitive/examples/1/index.html b/projects/demo/src/modules/experimental/sensitive/examples/1/index.html
@@ -1,7 +1,7 @@
-<div>
+<p>
     Balance:
     <span [tuiSensitive]="sensitive">100 000$</span>
-</div>
+</p>
 
 <label>
     <tui-toggle [(ngModel)]="sensitive"></tui-toggle>

diff --git a/projects/demo/src/modules/experimental/sensitive/examples/1/index.less b/projects/demo/src/modules/experimental/sensitive/examples/1/index.less
diff --git a/projects/demo/src/modules/experimental/sensitive/examples/1/index.ts b/projects/demo/src/modules/experimental/sensitive/examples/1/index.ts
@@ -5,7 +5,6 @@ import {encapsulation} from '@demo/emulate/encapsulation';
 @Component({
     selector: 'tui-sensitive-example-1',
     templateUrl: './index.html',
-    styleUrls: ['./index.less'],
     encapsulation,
     changeDetection,
 })

diff --git a/projects/demo/src/modules/experimental/sensitive/examples/2/index.html b/projects/demo/src/modules/experimental/sensitive/examples/2/index.html
@@ -1,35 +1,28 @@
-<p>
-    <button
-        appearance="destructive"
-        size="m"
-        tuiButton
-    >
+<button
+    appearance="destructive"
+    size="m"
+    tuiButton
+>
+    <span>
         Pay
-        <span
-            class="text"
-            [tuiSensitive]="sensitive"
-        >
-            1000$
-        </span>
-    </button>
-    <button
-        appearance="flat"
-        size="m"
-        tuiButton
-        class="tui-space_left-2"
-    >
+        <span [tuiSensitive]="sensitive">1000$</span>
+    </span>
+</button>
+<button
+    appearance="flat"
+    size="m"
+    tuiButton
+    class="tui-space_left-2"
+>
+    <span>
         Pay
-        <span
-            class="text"
-            [tuiSensitive]="sensitive"
-        >
-            1000$
-        </span>
-    </button>
-</p>
-<p class="tui-space_top-10">
+        <span [tuiSensitive]="sensitive">1000$</span>
+    </span>
+</button>
+
+<p>
     <tui-badge
-        appearance="light"
+        [style.background]="'var(--tui-positive)'"
         [tuiSensitive]="sensitive"
     >
         12 000$
@@ -44,5 +37,5 @@
 
 <label>
     <tui-toggle [(ngModel)]="sensitive"></tui-toggle>
-    hide
+    Hide
 </label>
diff --git a/projects/demo/src/modules/experimental/sensitive/examples/2/index.less b/projects/demo/src/modules/experimental/sensitive/examples/2/index.less
diff --git a/projects/demo/src/modules/experimental/sensitive/examples/2/index.ts b/projects/demo/src/modules/experimental/sensitive/examples/2/index.ts
@@ -5,7 +5,6 @@ import {encapsulation} from '@demo/emulate/encapsulation';
 @Component({
     selector: 'tui-sensitive-example-2',
     templateUrl: './index.html',
-    styleUrls: ['./index.less'],
     encapsulation,
     changeDetection,
 })

diff --git a/projects/demo/src/modules/experimental/sensitive/sensitive.component.ts b/projects/demo/src/modules/experimental/sensitive/sensitive.component.ts
@@ -17,15 +17,11 @@ export class ExampleTuiSensitiveComponent {
     );
 
     readonly example1: TuiDocExample = {
-        TypeScript: import('./examples/1/index.ts?raw'),
         HTML: import('./examples/1/index.html?raw'),
-        LESS: import('./examples/1/index.less?raw'),
     };
 
     readonly example2: TuiDocExample = {
-        TypeScript: import('./examples/2/index.ts?raw'),
         HTML: import('./examples/2/index.html?raw'),
-        LESS: import('./examples/2/index.less?raw'),
     };
 
     sensitive = true;

diff --git a/projects/demo/src/modules/experimental/sensitive/sensitive.template.html b/projects/demo/src/modules/experimental/sensitive/sensitive.template.html
@@ -28,6 +28,13 @@
             heading="Components"
             [content]="example2"
         >
+            <tui-notification class="tui-space_bottom-4">
+                Buttons have
+                <code>gap</code>
+                style configured for icons, avatars and other similar content. Wrap your text in
+                <code>span</code>
+                so it does not affect you.
+            </tui-notification>
             <tui-sensitive-example-2></tui-sensitive-example-2>
         </tui-doc-example>
     </ng-template>

diff --git a/projects/experimental/components/badge/badge.directive.ts b/projects/experimental/components/badge/badge.directive.ts
@@ -7,6 +7,7 @@ import {TUI_BADGE_OPTIONS, TuiBadgeOptions} from './badge.options';
 @Directive({
     selector: 'tui-badge,[tuiBadge]',
     host: {
+        tuiBadgeNew: '',
         tuiAppearance: '',
         '[class._dot]': 'dot',
         '[attr.data-appearance]': 'appearance',

diff --git a/projects/experimental/components/badge/badge.style.less b/projects/experimental/components/badge/badge.style.less
@@ -1,25 +1,26 @@
 @import '@taiga-ui/core/styles/taiga-ui-local';
 
-tui-badge,
-[tuiBadge] {
-    .chip();
+// TODO: Change to [tuiBadge] in 4.0
+[tuiBadgeNew] {
+    .button-base();
+    border-radius: 6rem;
     background: #959595;
     color: var(--tui-base-01);
-    border-radius: 6rem;
     padding: var(--t-padding);
     height: var(--t-size);
     min-width: var(--t-size);
+    font: var(--tui-font-text-s);
 
+    --t-gap: 0rem;
     --t-dot: currentColor;
     --t-icon-size: 1rem;
 
     &._dot:before {
         content: '';
         display: block;
+        width: 0.375rem;
+        height: 0.375rem;
         background: var(--t-dot);
-        margin: 0 0.125rem 0 0.25rem;
-        width: 0.25rem;
-        height: 0.25rem;
         border-radius: 100%;
     }
 
@@ -50,34 +51,46 @@ tui-badge,
     }
 
     &[data-size='s'] {
-        text-indent: 0.125rem;
-
-        --t-padding: 0 0.3125rem 0 0.1875rem;
+        --t-padding: 0 0.3125rem;
         --t-size: 1rem;
         --t-icon-size: 0.625rem;
+        --t-margin: -0.125rem;
+
+        &._dot:before {
+            width: 0.25rem;
+            height: 0.25rem;
+            margin-inline-end: -0.125rem;
+        }
     }
 
     &[data-size='m'] {
-        text-indent: 0.125rem;
-
-        --t-padding: 0 0.375rem 0 0.25rem;
+        --t-padding: 0 0.375rem;
         --t-size: 1.25rem;
         --t-icon-size: 0.75rem;
+        --t-margin: -0.125rem;
     }
 
     &[data-size='l'] {
-        text-indent: 0.25rem;
-
-        --t-padding: 0 0.5rem 0 0.25rem;
+        --t-padding: 0 0.5rem;
         --t-size: var(--tui-height-xs);
+        --t-margin: -0.25rem;
+
+        &._dot:before {
+            margin-inline-end: -0.25rem;
+        }
     }
 
     &[data-size='xl'] {
+        --t-margin: -0.25rem;
+        --t-padding: 0 0.75rem;
+        --t-size: var(--tui-height-s);
         font: var(--tui-font-text-m);
-        text-indent: 0.25rem;
 
-        --t-padding: 0 0.75rem 0 0.5rem;
-        --t-size: var(--tui-height-s);
+        &._dot:before {
+            width: 0.5rem;
+            height: 0.5rem;
+            margin-inline-end: -0.125rem;
+        }
     }
 }
 
@@ -90,6 +103,8 @@ tui-icon[tuiBadge] {
     height: var(--t-size);
     width: var(--t-size);
 
+    --t-margin: 0 !important;
+
     &[data-size='s']:after {
         mask-size: 0.625rem;
     }