Merge branch 'master' into alpha [skip release]

CHANGELOG.md

@@ -1,3 +1,17 @@
+# [8.15.0](https://github.com/dhis2/ui/compare/v8.14.13...v8.15.0) (2023-11-27)
+
+
+### Features
+
+* **button:** destructive secondary variant ([b72a04a](https://github.com/dhis2/ui/commit/b72a04a93cfb08180c030a94b8ad6008f3084bcf))
+
+## [8.14.13](https://github.com/dhis2/ui/compare/v8.14.12...v8.14.13) (2023-11-26)
+
+
+### Bug Fixes
+
+* **translations:** sync translations from transifex (master) ([cefd956](https://github.com/dhis2/ui/commit/cefd956826c7ab12c16b30f90e3c9c494f3c682a))
+
 ## [8.14.12](https://github.com/dhis2/ui/compare/v8.14.11...v8.14.12) (2023-11-22)
 
 

collections/ui/API.md

@@ -94,15 +94,15 @@ import { Button } from '@dhis2/ui'
 |children|node|||Component to render inside the button|
 |className|string|||A className that will be passed to the `<button>` element|
 |dataTest|string|`'dhis2-uicore-button'`||A string that will be applied as a `data-test` attribute on the button element<br/>for identification during testing|
-|destructive|custom|||Indicates that the button makes potentially dangerous<br/>deletions or data changes.<br/>Mutually exclusive with `primary` and `secondary` props|
+|destructive|boolean|||Applies 'destructive' button appearance, implying a dangerous action.|
 |disabled|boolean|||Applies a greyed-out appearance and makes the button non-interactive|
 |icon|element|||An icon element to display inside the button|
 |initialFocus|boolean|||Use this variant to capture the initial focus on the page.|
 |large|custom|||Makes the button large. Mutually exclusive with `small`|
 |loading|boolean|||Sets the button into a loading state|
 |name|string|||Sets `name` attribute on button element.<br/>Gets passed as part of the first argument to callbacks (see `onClick`).|
-|primary|custom|||Applies 'primary' button appearance.<br/>Mutually exclusive with `destructive` and `secondary` props|
-|secondary|custom|||Applies 'secondary' button appearance.<br/>Mutually exclusive with `primary` and `destructive` props|
+|primary|boolean|||Applies 'primary' button appearance, implying the most important action.|
+|secondary|boolean|||Applies 'secondary' button appearance.|
 |small|custom|||Makes the button small. Mutually exclusive with `large` prop|
 |tabIndex|string|||Tab index for focusing the button with a keyboard|
 |toggled|boolean|||Changes appearance of button to an on/off state|

components/button/API.md

@@ -17,15 +17,15 @@ import { Button } from '@dhis2-ui/button'
 |children|node|||Component to render inside the button|
 |className|string|||A className that will be passed to the `<button>` element|
 |dataTest|string|`'dhis2-uicore-button'`||A string that will be applied as a `data-test` attribute on the button element<br/>for identification during testing|
-|destructive|custom|||Indicates that the button makes potentially dangerous<br/>deletions or data changes.<br/>Mutually exclusive with `primary` and `secondary` props|
+|destructive|boolean|||Applies 'destructive' button appearance, implying a dangerous action.|
 |disabled|boolean|||Applies a greyed-out appearance and makes the button non-interactive|
 |icon|element|||An icon element to display inside the button|
 |initialFocus|boolean|||Use this variant to capture the initial focus on the page.|
 |large|custom|||Makes the button large. Mutually exclusive with `small`|
 |loading|boolean|||Sets the button into a loading state|
 |name|string|||Sets `name` attribute on button element.<br/>Gets passed as part of the first argument to callbacks (see `onClick`).|
-|primary|custom|||Applies 'primary' button appearance.<br/>Mutually exclusive with `destructive` and `secondary` props|
-|secondary|custom|||Applies 'secondary' button appearance.<br/>Mutually exclusive with `primary` and `destructive` props|
+|primary|boolean|||Applies 'primary' button appearance, implying the most important action.|
+|secondary|boolean|||Applies 'secondary' button appearance.|
 |small|custom|||Makes the button small. Mutually exclusive with `large` prop|
 |tabIndex|string|||Tab index for focusing the button with a keyboard|
 |toggled|boolean|||Changes appearance of button to an on/off state|

components/button/src/button/button.js

@@ -100,11 +100,9 @@ Button.propTypes = {
      */
     dataTest: PropTypes.string,
     /**
-     * Indicates that the button makes potentially dangerous
-     * deletions or data changes.
-     * Mutually exclusive with `primary` and `secondary` props
+     * Applies 'destructive' button appearance, implying a dangerous action.
      */
-    destructive: sharedPropTypes.buttonVariantPropType,
+    destructive: PropTypes.bool,
     /** Applies a greyed-out appearance and makes the button non-interactive  */
     disabled: PropTypes.bool,
     /** An icon element to display inside the button */
@@ -121,15 +119,13 @@ Button.propTypes = {
      */
     name: PropTypes.string,
     /**
-     * Applies 'primary' button appearance.
-     * Mutually exclusive with `destructive` and `secondary` props
+     * Applies 'primary' button appearance, implying the most important action.
      */
-    primary: sharedPropTypes.buttonVariantPropType,
+    primary: PropTypes.bool,
     /**
      * Applies 'secondary' button appearance.
-     * Mutually exclusive with `primary` and `destructive` props
      */
-    secondary: sharedPropTypes.buttonVariantPropType,
+    secondary: PropTypes.bool,
     /** Makes the button small. Mutually exclusive with `large` prop */
     small: sharedPropTypes.sizePropType,
     /** Tab index for focusing the button with a keyboard */

components/button/src/button/button.stories.js

@@ -122,6 +122,12 @@ Destructive.parameters = {
         },
     },
 }
+export const DestructiveSecondary = Template.bind({})
+DestructiveSecondary.args = {
+    destructive: true,
+    secondary: true,
+    name: 'Destructive secondary button',
+}
 
 export const Disabled = (args) => (
     <>

components/button/src/button/button.styles.js

@@ -187,6 +187,35 @@ export default css`
         fill: ${colors.white};
     }
 
+    .destructive.secondary {
+        border-color: rgba(74, 87, 104, 0.25);
+        background: transparent;
+        color: ${colors.red700};
+        fill: ${colors.red700};
+        font-weight: 400;
+    }
+
+    .destructive.secondary:hover {
+        border-color: ${colors.red600};
+        background: ${colors.red050};
+        color: ${colors.red800};
+        fill: ${colors.red800};
+    }
+
+    .destructive.secondary:active,
+    .destructive.secondary:active:focus {
+        background: ${colors.red100};
+        border-color: ${colors.red700};
+        box-shadow: none;
+    }
+
+    .destructive.secondary:disabled {
+        background: transparent;
+        border-color: rgba(74, 87, 104, 0.25);
+        color: rgba(183, 28, 28, 0.6);
+        fill: rgba(183, 28, 28, 0.6);
+    }
+
     .icon-only {
         padding: 0 0 0 5px;
     }

components/select/i18n/uz_UZ_Cyrl.po

@@ -1,13 +1,13 @@
 # 
 # Translators:
-# Ibatov <ibatovk@who.int>, 2021
+# Ibatov <ibatovk@who.int>, 2023
 # 
 msgid ""
 msgstr ""
 "Project-Id-Version: i18next-conv\n"
 "POT-Creation-Date: 2021-05-10T11:56:32.496Z\n"
 "PO-Revision-Date: 2021-06-24 12:50+0000\n"
-"Last-Translator: Ibatov <ibatovk@who.int>, 2021\n"
+"Last-Translator: Ibatov <ibatovk@who.int>, 2023\n"
 "Language-Team: Uzbek (Cyrillic) (https://app.transifex.com/hisp-uio/teams/100509/uz@Cyrl/)\n"
 "MIME-Version: 1.0\n"
 "Content-Type: text/plain; charset=UTF-8\n"
@@ -25,7 +25,7 @@ msgid "Type to filter options"
 msgstr ""
 
 msgid "Loading options"
-msgstr ""
+msgstr "Вариантлар юкланмоқда"
 
 msgid "No options found"
 msgstr ""

components/sharing-dialog/i18n/uz_UZ_Cyrl.po

@@ -1,13 +1,13 @@
 # 
 # Translators:
-# Ibatov <ibatovk@who.int>, 2021
+# Ibatov <ibatovk@who.int>, 2023
 # 
 msgid ""
 msgstr ""
 "Project-Id-Version: i18next-conv\n"
 "POT-Creation-Date: 2021-11-25T09:59:40.995Z\n"
 "PO-Revision-Date: 2021-10-01 23:39+0000\n"
-"Last-Translator: Ibatov <ibatovk@who.int>, 2021\n"
+"Last-Translator: Ibatov <ibatovk@who.int>, 2023\n"
 "Language-Team: Uzbek (Cyrillic) (https://app.transifex.com/hisp-uio/teams/100509/uz@Cyrl/)\n"
 "MIME-Version: 1.0\n"
 "Content-Type: text/plain; charset=UTF-8\n"
@@ -16,13 +16,13 @@ msgstr ""
 "Plural-Forms: nplurals=1; plural=0;\n"
 
 msgid "View only"
-msgstr ""
+msgstr "Фақат кўриш учун"
 
 msgid "View and edit"
-msgstr ""
+msgstr "Кўриш ва таҳрирлаш"
 
 msgid "Give access to a user or group"
-msgstr ""
+msgstr "Фойдаланувчи ёки гуруҳга киришга рухсат бериш"
 
 msgid "Access level"
 msgstr "Кириш мумкин бўлган босқичлар"
@@ -34,16 +34,16 @@ msgid "Not available offline"
 msgstr "Оффлайн режимда мавжуд эмас"
 
 msgid "Give access"
-msgstr ""
+msgstr "Рухсат бериш"
 
 msgid "Users and groups that currently have access"
-msgstr ""
+msgstr "Рухсати бор бўлган яойдаланувчилар ёки гуруҳлар"
 
 msgid "User / Group"
-msgstr ""
+msgstr "Фойдаланувчи/Гуруҳ"
 
 msgid "All users"
-msgstr ""
+msgstr "Барча фойдаланувчилар"
 
 msgid "No access"
 msgstr "Кириш ҳуқуқи мавжуд эмас"
@@ -52,16 +52,16 @@ msgid "Can view"
 msgstr "Кўриш мумкин"
 
 msgid "Can view and edit"
-msgstr ""
+msgstr "Кўриш ва таҳрирлаш имкони"
 
 msgid "Metadata"
 msgstr "МетаМаълумот"
 
 msgid "Remove access"
-msgstr ""
+msgstr "Рухсатни бекор қилиш"
 
 msgid "User or group"
-msgstr ""
+msgstr "Фойдаланувчи ёки гуруҳ"
 
 msgid "Search"
 msgstr "Қидириш"
@@ -127,13 +127,13 @@ msgid ""
 msgstr ""
 
 msgid "Sharing and access: {{- objectName}}"
-msgstr ""
+msgstr "Уланиш ва кириш: {{- objectName}}"
 
 msgid "Sharing and access"
-msgstr ""
+msgstr "Уланиш ва кириш"
 
 msgid "Close"
 msgstr "Ёпиш"
 
 msgid "Dashboard sharing"
-msgstr ""
+msgstr "Бошқарув панелига уланиш"

components/table/i18n/uz_UZ_Cyrl.po

@@ -0,0 +1,22 @@
+# 
+# Translators:
+# Ibatov <ibatovk@who.int>, 2023
+# 
+msgid ""
+msgstr ""
+"Project-Id-Version: i18next-conv\n"
+"POT-Creation-Date: 2021-06-15T13:35:03.608Z\n"
+"PO-Revision-Date: 2021-06-24 12:50+0000\n"
+"Last-Translator: Ibatov <ibatovk@who.int>, 2023\n"
+"Language-Team: Uzbek (Cyrillic) (https://app.transifex.com/hisp-uio/teams/100509/uz@Cyrl/)\n"
+"MIME-Version: 1.0\n"
+"Content-Type: text/plain; charset=UTF-8\n"
+"Content-Transfer-Encoding: 8bit\n"
+"Language: uz@Cyrl\n"
+"Plural-Forms: nplurals=1; plural=0;\n"
+
+msgid "Toggle filter"
+msgstr "Фильтрни алмаштириш"
+
+msgid "Sort items"
+msgstr "Элементларни саралаш"

constants/API.md

@@ -4,8 +4,6 @@
 - [layers](src/layers.js)
 - [statusPropType](src/shared-prop-types.js)
 - [statusArgType](src/shared-prop-types.js)
-- [buttonVariantPropType](src/shared-prop-types.js)
-- [buttonVariantArgType](src/shared-prop-types.js)
 - [sizePropType](src/shared-prop-types.js)
 - [sizeArgType](src/shared-prop-types.js)
 - [insideAlignmentPropType](src/shared-prop-types.js)

constants/src/shared-prop-types.js

@@ -20,28 +20,6 @@ export const statusArgType = {
     control: { type: 'boolean' },
 }
 
-/**
- * Button variant propType
- * @return {PropType} Mutually exclusive variants:
- * primary/secondary/destructive
- */
-export const buttonVariantPropType = mutuallyExclusive(
-    ['primary', 'secondary', 'destructive'],
-    PropTypes.bool
-)
-export const buttonVariantArgType = {
-    // No description because it should be set for the component description
-    table: {
-        type: {
-            summary: 'bool',
-            detail: "'primary', 'secondary', and 'destructive' are mutually exclusive props",
-        },
-    },
-    control: {
-        type: 'boolean',
-    },
-}
-
 /**
  * Size variant propType
  * @return {PropType} Mutually exclusive variants:

docs/docs/components/button.md

@@ -32,7 +32,7 @@ Buttons are used to trigger actions. There are different button variants that ar
 | ------------- | -------------------------------------------------------------------------------------------------------------------------- |
 | `Basic`       | Default. Will suit the majority of actions on a page.                                                                      |
 | `Primary`     | Use for the most important action on a page, like a _Save data_ button in a form. Only use one `primary` button on a page. |
-| `Secondary`   | Use for less important actions, usually in combination with other buttons.                                                 |
+| `Secondary`   | Use for less important actions, usually in combination with other buttons. Can be applied to `Destructive`.                |
 | `Destructive` | Only for primary-type actions that will delete or destroy something. Don't use several on a single page.                   |
 
 #### Basic
@@ -67,12 +67,16 @@ Buttons are used to trigger actions. There are different button variants that ar
 #### Destructive
 
 <Demo>
-    <Button destructive>Destructive button</Button>
+    <div class="stacked-examples-horizontal">
+        <Button destructive>Destructive button</Button>
+        <Button destructive secondary>Destructive secondary button</Button>
+    </div>
 </Demo>
 
 -   Only use for primary-type actions that will destroy data.
 -   Don't use if the action will only remove an item from the current context.
 -   Only use a one `destructive` button per page.
+-   `Destructive secondary` can be used more than once per page for less important destructive actions.
 
 ### Format