update the button docs

creativetimofficial · Dec 14, 2023 · eba21d3 · eba21d3 · vercel · Dec 14, 2023
1 parent f734a2c
commit eba21d3
Show file tree

Hide file tree

Showing 14 changed files with 59 additions and 5 deletions.
diff --git a/README.md b/README.md
@@ -11,7 +11,7 @@
     <img src="https://img.shields.io/npm/dt/@material-tailwind/react.svg" alt="Total Downloads">
   </a>
   <a href="https://github.com/creativetimofficial/material-tailwind/releases">
-    <img src="https://img.shields.io/badge/version-2.1.6-blue.svg" alt="Version" />
+    <img src="https://img.shields.io/badge/version-2.1.7-blue.svg" alt="Version" />
   </a>
 </p>
 <p align="center">

diff --git a/docs-content/react/releases.ts b/docs-content/react/releases.ts
@@ -1,4 +1,24 @@
 export const releases = [
+  {
+    version: "2.1.7",
+    date: "December 14, 2023",
+    name: "@material-tailwind/react",
+    description: "Material Tailwind v2.1.7",
+    content: [
+      {
+        title: "patch changes",
+        data: [
+          "Add black color for <Button />, <IconButton /> and <ButtonGroup /> components.",
+        ],
+      },
+      {
+        title: "docs changes",
+        data: [
+          "Update the button, icon button and button group documentation pages.",
+        ],
+      },
+    ],
+  },
   {
     version: "2.1.6",
     date: "December 13, 2023",

diff --git a/documentation/react/button-group.mdx b/documentation/react/button-group.mdx
@@ -311,6 +311,7 @@ type size = "sm" | "md" | "lg";
 ```ts
 type color =
   | "white"
+  | "black"
   | "blue-gray"
   | "gray"
   | "brown"

diff --git a/documentation/react/button.mdx b/documentation/react/button.mdx
@@ -456,6 +456,7 @@ type size = "sm" | "md" | "lg";
 ```ts
 type color =
   | "white"
+  | "black"
   | "blue-gray"
   | "gray"
   | "brown"

diff --git a/documentation/react/icon-button.mdx b/documentation/react/icon-button.mdx
@@ -360,6 +360,7 @@ type size = "sm" | "md" | "lg";
 ```ts
 type color =
   | "white"
+  | "black"
   | "blue-gray"
   | "gray"
   | "brown"

diff --git a/documentation/react/release-notes.mdx b/documentation/react/release-notes.mdx
@@ -2,6 +2,7 @@
 title: Release Notes - Material Tailwind
 description: Tailwind CSS is a highly customizable, low-level CSS framework that gives you all of the building blocks you need to build bespoke designs without any annoying opinionated styles you have to fight to override.
 navigation: [
+              "v2.1.7",
               "v2.1.6",
               "v2.1.5",
               "v2.1.4",

diff --git a/packages/material-tailwind-react/README.md b/packages/material-tailwind-react/README.md
@@ -8,7 +8,7 @@
     <img src="https://img.shields.io/npm/dt/@material-tailwind/react.svg" alt="Total Downloads">
   </a>
   <a href="https://github.com/creativetimofficial/material-tailwind/releases">
-    <img src="https://img.shields.io/badge/version-2.1.6-blue.svg" alt="Version" />
+    <img src="https://img.shields.io/badge/version-2.1.7-blue.svg" alt="Version" />
   </a>
   <a href="https://www.material-tailwind.com/docs/react/license">
     <img src="https://img.shields.io/badge/license-MIT-blue" alt="Licenese">

diff --git a/packages/material-tailwind-react/package.json b/packages/material-tailwind-react/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@material-tailwind/react",
   "homepage": "https://material-tailwind.com",
-  "version": "2.1.6",
+  "version": "2.1.7",
   "description": "@material-tailwind/react is an easy-to-use components library for ReactJS & Tailwind CSS inspired by Material Design.",
   "repository": "https://github.com/creativetimofficial/material-tailwind",
   "license": "MIT",

diff --git a/packages/material-tailwind-react/src/theme/components/button/buttonFilled.ts b/packages/material-tailwind-react/src/theme/components/button/buttonFilled.ts
@@ -7,6 +7,14 @@ const buttonFilled: object = {
     focus: "focus:opacity-[0.85] focus:shadow-none",
     active: "active:opacity-[0.85] active:shadow-none",
   },
+  black: {
+    background: "bg-gray-900",
+    color: "text-white",
+    shadow: "shadow-md shadow-gray-900/10",
+    hover: "hover:shadow-lg hover:shadow-gray-900/20",
+    focus: "focus:opacity-[0.85] focus:shadow-none",
+    active: "active:opacity-[0.85] active:shadow-none",
+  },
   "blue-gray": {
     background: "bg-blue-gray-500",
     color: "text-white",

diff --git a/packages/material-tailwind-react/src/theme/components/button/buttonGradient.ts b/packages/material-tailwind-react/src/theme/components/button/buttonGradient.ts
@@ -7,6 +7,13 @@ const buttonGradient: object = {
     focus: "focus:opacity-[0.85] focus:shadow-none",
     active: "active:opacity-[0.85] active:shadow-none",
   },
+  black: {
+    background: "bg-gradient-to-tr from-gray-900 to-gray-800",
+    color: "text-white",
+    shadow: "shadow-md shadow-gray-900/10",
+    hover: "hover:shadow-lg hover:shadow-gray-900/20",
+    active: "active:opacity-[0.85]",
+  },
   "blue-gray": {
     background: "bg-gradient-to-tr from-blue-gray-600 to-blue-gray-400",
     color: "text-white",

diff --git a/packages/material-tailwind-react/src/theme/components/button/buttonOutlined.ts b/packages/material-tailwind-react/src/theme/components/button/buttonOutlined.ts
@@ -6,6 +6,13 @@ const buttonOutlined: object = {
     focus: "focus:ring focus:ring-white/50",
     active: "active:opacity-[0.85]",
   },
+  black: {
+    border: "border border-gray-900",
+    color: "text-gray-900",
+    hover: "hover:opacity-75",
+    focus: "focus:ring focus:ring-gray-300",
+    active: "active:opacity-[0.85]",
+  },
   "blue-gray": {
     border: "border border-blue-gray-500",
     color: "text-blue-gray-500",

diff --git a/packages/material-tailwind-react/src/theme/components/button/buttonText.ts b/packages/material-tailwind-react/src/theme/components/button/buttonText.ts
@@ -4,6 +4,11 @@ const buttonText: object = {
     hover: "hover:bg-white/10",
     active: "active:bg-white/30",
   },
+  black: {
+    color: "text-gray-900",
+    hover: "hover:bg-gray-900/10",
+    active: "active:bg-gray-900/20",
+  },
   "blue-gray": {
     color: "text-blue-gray-500",
     hover: "hover:bg-blue-gray-500/10",

diff --git a/packages/material-tailwind-react/src/theme/components/buttonGroup/buttonGroupDividerColor.ts b/packages/material-tailwind-react/src/theme/components/buttonGroup/buttonGroupDividerColor.ts
@@ -2,6 +2,9 @@ const buttonGroupDividerColor: object = {
   white: {
     divideColor: "divide-blue-gray-50",
   },
+  black: {
+    divideColor: "divide-gray-800",
+  },
   "blue-gray": {
     divideColor: "divide-blue-gray-600",
   },

diff --git a/packages/material-tailwind-react/src/types/components/button.ts b/packages/material-tailwind-react/src/types/components/button.ts
@@ -12,7 +12,7 @@ import { propTypesColors } from "../generic";
 // typescript types
 export type variant = "filled" | "outlined" | "gradient" | "text";
 export type size = "sm" | "md" | "lg";
-export type color = "white" | colors;
+export type color = "white" | "black" | colors;
 export type fullWidth = boolean;
 export type ripple = boolean;
 export type className = string;
@@ -22,7 +22,7 @@ export type loading = boolean;
 // javascript prop-types
 export const propTypesVariant: any = ["filled", "outlined", "gradient", "text"];
 export const propTypesSize: any = ["sm", "md", "lg"];
-export const propTypesColor: any = ["white", ...propTypesColors];
+export const propTypesColor: any = ["white", "black", ...propTypesColors];
 export const propTypesFullWidth: any = PropTypes.bool;
 export const propTypesRipple: any = PropTypes.bool;
 export const propTypesClassName: any = PropTypes.string;