Merge pull request #7 from anthonyleung-dev/material-web-v2

feat: upgrade material/web to 2.0.0

Author: anthonyleung-dev

CHANGELOG.md

@@ -7,6 +7,12 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [2.0.0] - 2024-08-13
+
+### Changed
+- Updated the `@material/web` package to `2.0.0`
+- Removed the CSS import in `src/index.tsx`, Now the CSS import is optional.
+
 ## [1.0.10] - 2024-05-31
 
 ### Changed

README.md

@@ -20,11 +20,14 @@ yarn add react-material-web
 
 Here's a quick example to get you started. After installing, you can import and use Material Components like any other React component.
 
+We default to using the `@fontsource/roboto` and `material-symbols` in styles, if you want to use them, you can import them in your project:
 Add styles to your project:
 ```tsx
 import 'react-material-web/styles'
 ```
 
+Or you can use the components without default styles.
+
 Then, you can use the components like this:
 
 ```tsx

package-lock.json

@@ -67,7 +67,7 @@
     "dependencies": {
         "@fontsource/roboto": "^5.0.12",
         "@lit/react": "^1.0.4",
-        "@material/web": "^1.5.0",
-        "material-symbols": "^0.17.1"
+        "@material/web": "^2.0.0",
+        "material-symbols": "^0.17.4"
     }
 }

package.json

@@ -65,6 +65,7 @@ export interface MdElevatedButtonElement extends _MdElevatedButton {}
  * @param {string} target - Where to display the linked `href` URL for a link button. Common options include `_blank` to open in a new tab.
  * @param {boolean} trailingIcon - Whether to render the icon at the inline end of the label rather than the inline start.
  * @param {boolean} hasIcon - Whether to display the icon or not.
+ * @param {string} softDisabled - Whether or not the button is "soft-disabled" (disabled but still focusable). https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_disabled_controls for more guidance on when this is needed.
  * @param {string} type - The default behavior of the button. May be "text", "reset", or "submit" (default).
  * @param {string} value - The value added to a form with the button's name when the button submits a form.
  * @param {string} name - The name of the button.
@@ -92,6 +93,7 @@ export const MdOutlinedButton = createComponent({
  * @param {string} target - Where to display the linked `href` URL for a link button. Common options include `_blank` to open in a new tab.
  * @param {boolean} trailingIcon - Whether to render the icon at the inline end of the label rather than the inline start.
  * @param {boolean} hasIcon - Whether to display the icon or not.
+ * @param {string} softDisabled - Whether or not the button is "soft-disabled" (disabled but still focusable). https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_disabled_controls for more guidance on when this is needed.
  * @param {string} type - The default behavior of the button. May be "text", "reset", or "submit" (default).
  * @param {string} value - The value added to a form with the button's name when the button submits a form.
  * @param {string} name - The name of the button.
@@ -119,6 +121,7 @@ export const MdFilledButton = createComponent({
  * @param {string} target - Where to display the linked `href` URL for a link button. Common options include `_blank` to open in a new tab.
  * @param {boolean} trailingIcon - Whether to render the icon at the inline end of the label rather than the inline start.
  * @param {boolean} hasIcon - Whether to display the icon or not.
+ * @param {string} softDisabled - Whether or not the button is "soft-disabled" (disabled but still focusable). https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_disabled_controls for more guidance on when this is needed.
  * @param {string} type - The default behavior of the button. May be "text", "reset", or "submit" (default).
  * @param {string} value - The value added to a form with the button's name when the button submits a form.
  * @param {string} name - The name of the button.
@@ -146,6 +149,7 @@ export const MdTextButton = createComponent({
  * @param {string} href - The URL that the link button points to.
  * @param {string} target - Where to display the linked `href` URL for a link button. Common options include `_blank` to open in a new tab.
  * @param {boolean} trailingIcon - Whether to render the icon at the inline end of the label rather than the inline start.
+ * @param {string} softDisabled - Whether or not the button is "soft-disabled" (disabled but still focusable). https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_disabled_controls for more guidance on when this is needed.
  * @param {boolean} hasIcon - Whether to display the icon or not.
  * @param {string} type - The default behavior of the button. May be "text", "reset", or "submit" (default).
  * @param {string} value - The value added to a form with the button's name when the button submits a form.
@@ -173,6 +177,7 @@ export const MdFilledTonalButton = createComponent({
  * @param {string} href - The URL that the link button points to.
  * @param {string} target - Where to display the linked `href` URL for a link button. Common options include `_blank` to open in a new tab.
  * @param {boolean} trailingIcon - Whether to render the icon at the inline end of the label rather than the inline start.
+ * @param {string} softDisabled - Whether or not the button is "soft-disabled" (disabled but still focusable). https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_disabled_controls for more guidance on when this is needed.
  * @param {boolean} hasIcon - Whether to display the icon or not.
  * @param {string} type - The default behavior of the button. May be "text", "reset", or "submit" (default).
  * @param {string} value - The value added to a form with the button's name when the button submits a form.

src/components/core/button/index.tsx

@@ -89,9 +89,10 @@ export const MdChipSet = createComponent({
  * @param {boolean} elevated - Whether or not the chip is elevated.
  * @param {boolean} removable - Whether or not the chip is removable.
  * @param {boolean} selected - Whether or not the chip is selected.
+ * @param {string} softDisabled - Whether or not the button is "soft-disabled" (disabled but still focusable). https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_disabled_controls for more guidance on when this is needed.
  * @param {boolean} disabled - Whether or not the chip is disabled. Disabled chips are not focusable, unless always-focusable is set.
- * @param {boolean} alwaysFocusable - When true, allow disabled chips to be focused with arrow keys. Add this when a chip needs increased visibility when disabled. See https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_disabled_controls for more guidance on when this is needed.
- * @param {string} label - The label of the chip.
+ * @param {boolean} alwaysFocusable - (Deprecated: Use `softDisabled` instead of `alwaysFocusable` + `disabled`.) When true, allow disabled chips to be focused with arrow keys. Add this when a chip needs increased visibility when disabled. See https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_disabled_controls for more guidance on when this is needed.
+ * @param {string} label - (Deprecated: Set text as content of the chip instead.) The label of the chip.
  * @param {() => void} handleTrailingActionFocus - Callback for when the trailing action is focused.
  * @param {string} ariaLabelRemove - Aria label for the remove button.
  */
@@ -112,9 +113,10 @@ export const MdFilterChip = createComponent({
  * @param {string} target - The target of the link.(e.g. _blank, _self, _parent, _top
  * @param {boolean} removeOnly - Whether or not the chip is remove only.
  * @param {boolean} selected - Whether or not the chip is selected.
+ * @param {string} softDisabled - Whether or not the button is "soft-disabled" (disabled but still focusable). https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_disabled_controls for more guidance on when this is needed.
  * @param {boolean} disabled - Whether or not the chip is disabled. Disabled chips are not focusable, unless always-focusable is set.
- * @param {boolean} alwaysFocusable - When true, allow disabled chips to be focused with arrow keys. Add this when a chip needs increased visibility when disabled. See https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_disabled_controls for more guidance on when this is needed.
- * @param {string} label - The label of the chip.
+ * @param {boolean} alwaysFocusable - (Deprecated: Use `softDisabled` instead of `alwaysFocusable` + `disabled`.) When true, allow disabled chips to be focused with arrow keys. Add this when a chip needs increased visibility when disabled. See https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_disabled_controls for more guidance on when this is needed.
+ * @param {string} label - (Deprecated: Set text as content of the chip instead.) The label of the chip.
  * @param {() => void} handleTrailingActionFocus - Callback for when the trailing action is focused.
  * @param {string} ariaLabelRemove - Aria label for the remove button.
  */
@@ -133,8 +135,9 @@ export const MdInputChip = createComponent({
  * @param {string} href - The URL that the chip links to.
  * @param {string} target - The target of the link.(e.g. _blank, _self, _parent, _top
  * @param {boolean} disabled - Whether or not the chip is disabled. Disabled chips are not focusable, unless always-focusable is set.
- * @param {boolean} alwaysFocusable - When true, allow disabled chips to be focused with arrow keys. Add this when a chip needs increased visibility when disabled. See https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_disabled_controls for more guidance on when this is needed.
- * @param {string} label - The label of the chip.
+ * @param {string} softDisabled - Whether or not the button is "soft-disabled" (disabled but still focusable). https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_disabled_controls for more guidance on when this is needed.
+ * @param {boolean} alwaysFocusable - (Deprecated: Use `softDisabled` instead of `alwaysFocusable` + `disabled`.) When true, allow disabled chips to be focused with arrow keys. Add this when a chip needs increased visibility when disabled. See https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_disabled_controls for more guidance on when this is needed.
+ * @param {string} label - (Deprecated: Set text as content of the chip instead.) The label of the chip.
  */
 export const MdSuggestionChip = createComponent({
     react: React,
@@ -151,8 +154,9 @@ export const MdSuggestionChip = createComponent({
  * @param {string} href - The URL that the chip links to.
  * @param {string} target - The target of the link.(e.g. _blank, _self, _parent, _top
  * @param {boolean} disabled - Whether or not the chip is disabled. Disabled chips are not focusable, unless always-focusable is set.
- * @param {boolean} alwaysFocusable - When true, allow disabled chips to be focused with arrow keys. Add this when a chip needs increased visibility when disabled. See https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_disabled_controls for more guidance on when this is needed.
- * @param {string} label - The label of the chip.
+ * @param {string} softDisabled - Whether or not the button is "soft-disabled" (disabled but still focusable). https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_disabled_controls for more guidance on when this is needed.
+ * @param {boolean} alwaysFocusable - (Deprecated: Use `softDisabled` instead of `alwaysFocusable` + `disabled`.) When true, allow disabled chips to be focused with arrow keys. Add this when a chip needs increased visibility when disabled. See https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_disabled_controls for more guidance on when this is needed.
+ * @param {string} label - (Deprecated: Set text as content of the chip instead.) The label of the chip.
  */
 export const MdAssistChip = createComponent({
     react: React,

src/components/core/chips/index.tsx

@@ -35,17 +35,6 @@ const meta = {
             description:
                 'Whether or not the chip is disabled. Disabled chips are not focusable, unless always-focusable is set.',
         },
-        alwaysFocusable: {
-            control: 'boolean',
-            defaultValue: false,
-            description:
-                'When true, allow disabled chips to be focused with arrow keys. Add this when a chip needs increased visibility when disabled. See https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_disabled_controls for more guidance on when this is needed.',
-        },
-        label: {
-            control: 'text',
-            description: 'The label of the chip.',
-            defaultValue: '',
-        },
     },
     // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
     args: {},
@@ -56,18 +45,15 @@ type Story = StoryObj<typeof meta>
 
 // More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
 export const Detault: Story = {
-    args: {
-        label: 'Assist Chip',
-    },
+    args: {},
+    render: (props) => <MdAssistChip {...props}>Assist Chip</MdAssistChip>,
 }
 
 export const WithIcon: Story = {
-    args: {
-        label: 'Assist Chip with Icon',
-    },
     render: (props) => (
         <MdAssistChip {...props}>
             <MdIcon slot="icon">local_laundry_service</MdIcon>
+            Assist Chip
         </MdAssistChip>
     ),
 }

src/components/core/chips/stories/md-assist-chip.stories.tsx

@@ -1,3 +1,5 @@
+import React from 'react'
+
 import type { Meta, StoryObj } from '@storybook/react'
 import { MdFilterChip, MdFilterChipProps } from '..'
 
@@ -34,17 +36,6 @@ const meta = {
             description:
                 'Whether or not the chip is disabled. Disabled chips are not focusable, unless always-focusable is set.',
         },
-        alwaysFocusable: {
-            control: 'boolean',
-            defaultValue: false,
-            description:
-                'When true, allow disabled chips to be focused with arrow keys. Add this when a chip needs increased visibility when disabled. See https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_disabled_controls for more guidance on when this is needed.',
-        },
-        label: {
-            control: 'text',
-            description: 'The label of the chip.',
-            defaultValue: '',
-        },
         ariaLabelRemove: {
             control: 'text',
             description: 'Aria label for the remove button.',
@@ -59,7 +50,6 @@ type Story = StoryObj<typeof meta>
 
 // More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
 export const Detault: Story = {
-    args: {
-        label: 'Filter Chip',
-    },
+    args: {},
+    render: ({ ...args }) => <MdFilterChip {...args}>Filter Chip</MdFilterChip>,
 }

src/components/core/chips/stories/md-filter-chip.stories.tsx

@@ -50,15 +50,6 @@ const meta = {
             description:
                 'When true, allow disabled chips to be focused with arrow keys. Add this when a chip needs increased visibility when disabled. See https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_disabled_controls for more guidance on when this is needed.',
         },
-        label: {
-            control: 'text',
-            description: 'The label of the chip.',
-            defaultValue: '',
-        },
-        ariaLabelRemove: {
-            control: 'text',
-            description: 'Aria label for the remove button.',
-        },
     },
     // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
     args: {
@@ -71,21 +62,19 @@ type Story = StoryObj<typeof meta>
 
 // More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
 export const Detault: Story = {
-    args: {
-        label: 'Input Chip',
-    },
+    args: {},
 }
 
 export const WithAvatar: Story = {
     args: {
-        label: 'Input Chip with Avatar',
         avatar: true,
         disabled: false,
     },
     render: ({ ...args }) => (
         <MdChipSet>
             <MdInputChip {...args}>
                 <img slot="icon" src="https://lh3.googleusercontent.com/a/default-user=s48" />
+                Input Chip with Avatar
             </MdInputChip>
         </MdChipSet>
     ),

src/components/core/chips/stories/md-input-chip.stories.tsx

@@ -34,17 +34,6 @@ const meta = {
             description:
                 'Whether or not the chip is disabled. Disabled chips are not focusable, unless always-focusable is set.',
         },
-        alwaysFocusable: {
-            control: 'boolean',
-            defaultValue: false,
-            description:
-                'When true, allow disabled chips to be focused with arrow keys. Add this when a chip needs increased visibility when disabled. See https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_disabled_controls for more guidance on when this is needed.',
-        },
-        label: {
-            control: 'text',
-            description: 'The label of the chip.',
-            defaultValue: '',
-        },
     },
     // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
     args: {},
@@ -55,7 +44,6 @@ type Story = StoryObj<typeof meta>
 
 // More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
 export const Detault: Story = {
-    args: {
-        label: 'Suggestion Chip',
-    },
+    args: {},
+    render: ({ ...args }) => <MdSuggestionChip {...args}>Suggestion Chip</MdSuggestionChip>,
 }