@instructure/ui-buttons 10.2.3-snapshot-1 → 10.2.3-snapshot-2

package/CHANGELOG.md

@@ -3,7 +3,7 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [10.2.3-snapshot-1](https://github.com/instructure/instructure-ui/compare/v10.2.2...v10.2.3-snapshot-1) (2024-09-17)
+## [10.2.3-snapshot-2](https://github.com/instructure/instructure-ui/compare/v10.2.2...v10.2.3-snapshot-2) (2024-09-20)
 
 **Note:** Version bump only for package @instructure/ui-buttons
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-buttons",
-  "version": "10.2.3-snapshot-1",
+  "version": "10.2.3-snapshot-2",
   "description": "Accessible button components",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -23,10 +23,10 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "@instructure/ui-axe-check": "10.2.3-snapshot-1",
-    "@instructure/ui-babel-preset": "10.2.3-snapshot-1",
-    "@instructure/ui-test-utils": "10.2.3-snapshot-1",
-    "@instructure/ui-themes": "10.2.3-snapshot-1",
+    "@instructure/ui-axe-check": "10.2.3-snapshot-2",
+    "@instructure/ui-babel-preset": "10.2.3-snapshot-2",
+    "@instructure/ui-test-utils": "10.2.3-snapshot-2",
+    "@instructure/ui-themes": "10.2.3-snapshot-2",
     "@testing-library/jest-dom": "^6.4.6",
     "@testing-library/react": "^15.0.7",
     "@testing-library/user-event": "^14.5.2",
@@ -34,21 +34,21 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.24.5",
-    "@instructure/console": "10.2.3-snapshot-1",
-    "@instructure/emotion": "10.2.3-snapshot-1",
-    "@instructure/shared-types": "10.2.3-snapshot-1",
-    "@instructure/ui-a11y-content": "10.2.3-snapshot-1",
-    "@instructure/ui-a11y-utils": "10.2.3-snapshot-1",
-    "@instructure/ui-color-utils": "10.2.3-snapshot-1",
-    "@instructure/ui-dom-utils": "10.2.3-snapshot-1",
-    "@instructure/ui-icons": "10.2.3-snapshot-1",
-    "@instructure/ui-position": "10.2.3-snapshot-1",
-    "@instructure/ui-prop-types": "10.2.3-snapshot-1",
-    "@instructure/ui-react-utils": "10.2.3-snapshot-1",
-    "@instructure/ui-testable": "10.2.3-snapshot-1",
-    "@instructure/ui-tooltip": "10.2.3-snapshot-1",
-    "@instructure/ui-utils": "10.2.3-snapshot-1",
-    "@instructure/ui-view": "10.2.3-snapshot-1",
+    "@instructure/console": "10.2.3-snapshot-2",
+    "@instructure/emotion": "10.2.3-snapshot-2",
+    "@instructure/shared-types": "10.2.3-snapshot-2",
+    "@instructure/ui-a11y-content": "10.2.3-snapshot-2",
+    "@instructure/ui-a11y-utils": "10.2.3-snapshot-2",
+    "@instructure/ui-color-utils": "10.2.3-snapshot-2",
+    "@instructure/ui-dom-utils": "10.2.3-snapshot-2",
+    "@instructure/ui-icons": "10.2.3-snapshot-2",
+    "@instructure/ui-position": "10.2.3-snapshot-2",
+    "@instructure/ui-prop-types": "10.2.3-snapshot-2",
+    "@instructure/ui-react-utils": "10.2.3-snapshot-2",
+    "@instructure/ui-testable": "10.2.3-snapshot-2",
+    "@instructure/ui-tooltip": "10.2.3-snapshot-2",
+    "@instructure/ui-utils": "10.2.3-snapshot-2",
+    "@instructure/ui-view": "10.2.3-snapshot-2",
     "keycode": "^2",
     "prop-types": "^15.8.1"
   },

package/src/BaseButton/README.md

@@ -3,7 +3,7 @@ describes: BaseButton
 ---
 
 `BaseButton` is a low level utility component used to compose Instructure UI buttons. In most cases, it should not be used directly.
-Use [Button](#Button), [IconButton](#IconButton), or [CondensedButton](#CondensedButton) instead.
+Use [Button](#Button), [CloseButton](#CloseButton), [IconButton](#IconButton), or [CondensedButton](#CondensedButton) instead.
 
 ```js
 ---

package/src/Button/README.md

@@ -213,6 +213,90 @@ type: example
 </View>
 ```
 
+### Styling buttons
+
+[Button](#Button) and [IconButton](#IconButton) share the same styling mechanics (they are `BaseButton`s underneath). You need to set the theme based on their `color` and `withBackground` prop:
+
+```js
+---
+type: example
+---
+  class Example extends React.Component {
+    state = {
+      withBackground: true,
+      color : "secondary"
+    }
+    toggleWithBackground = (event) => this.setState({ withBackground: !this.state.withBackground })
+    changeColor = (event,color) =>  {this.setState({color})}
+    render() {
+      const overrides = {
+        borderWidth: "0.3rem",
+        // what to override depends on the 'color' value (by default 'secondary')
+        // if withBackground is true:
+        secondaryColor: '#000000', // icon color
+        secondaryBackground: '#ff00ff',
+        secondaryBorderColor: 'brown',
+
+        secondaryActiveBackground: '#000000', // &:active CSS, e.g. space is pressed, not hovered, see https://developer.mozilla.org/en-US/docs/Web/CSS/:active
+        secondaryActiveBoxShadow: '10px 5px 5px red',
+
+        secondaryHoverBackground: '#00FF00',
+        // if withBackground is false:
+        secondaryGhostColor: '#0000FF',
+        secondaryGhostBackground: 'transparent',
+        secondaryGhostBorderColor: '#FF00FF',
+
+        secondaryGhostActiveBackground: '#FF0000',
+        secondaryGhostActiveBoxShadow: '10px 5px 5px green',
+
+        secondaryGhostHoverBackground: '#00FFFF'
+      }
+      return (
+        <>
+          <FormFieldGroup description="In this example 'secondary' colors are overridden">
+            <Checkbox
+              checked={this.state.withBackground}
+              label="withBackground?"
+              onChange={this.toggleWithBackground}
+            />
+          </FormFieldGroup>
+          <View display="block" margin="small none">
+            <RadioInputGroup
+              name="color"
+              defaultValue="secondary"
+              description="Color:"
+              variant="toggle"
+              size="small"
+              onChange={this.changeColor} >
+              <RadioInput label="Primary" value="primary"/>
+              <RadioInput label="secondary" value="secondary" />
+            </RadioInputGroup>
+          </View>
+          <Flex margin="none none medium" gap="medium">
+            <Flex.Item>
+              <Button withBackground={this.state.withBackground}
+                      color={this.state.color}
+                      themeOverride={overrides}
+              >
+                Button
+              </Button>
+            </Flex.Item>
+            <Flex.Item>
+              <IconButton screenReaderLabel="View user profile"
+                          withBackground={this.state.withBackground}
+                          color={this.state.color}
+                          themeOverride={overrides}>
+                <IconUserLine />
+              </IconButton>
+            </Flex.Item>
+          </Flex>
+        </>
+      )
+    }
+  }
+render(<Example />)
+```
+
 ### Guidelines
 
 ```js

package/src/IconButton/README.md

@@ -72,3 +72,7 @@ type: example
   </View>
 </View>
 ```
+
+### Styling
+
+For an example see [Button](#Button/#Styling%20buttons)