polaris-react-extended 13.10.3 → 13.10.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +37 -30
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,10 +1,44 @@
|
|
|
1
1
|
# [Polaris React](https://polaris.shopify.com/)
|
|
2
2
|
|
|
3
|
-
Polaris React is a component library designed to help developers create the best experience for
|
|
3
|
+
Polaris React Remix is a component library designed to help developers create the best experience for developers who use Shopify but don't want to stick to their abhorrent design standards.
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
[Polaris style guide](https://polaris.shopify.com)
|
|
6
6
|
|
|
7
|
-
|
|
7
|
+
## Customization and Styling
|
|
8
|
+
|
|
9
|
+
### Enhanced Styling Flexibility
|
|
10
|
+
|
|
11
|
+
I've added `className` and `style` props to key Polaris components to give developers maximum control over styling and customization.
|
|
12
|
+
This change will allow you to create unique, branded experiences without being constrained by the rigid polaris design system.
|
|
13
|
+
|
|
14
|
+
**Components Updated:**
|
|
15
|
+
- Button
|
|
16
|
+
- Box
|
|
17
|
+
- Card
|
|
18
|
+
- Text
|
|
19
|
+
- IndexTable (with contextual customization for rows, cells, and checkboxes)
|
|
20
|
+
|
|
21
|
+
**Usage Example:**
|
|
22
|
+
```jsx
|
|
23
|
+
<Button
|
|
24
|
+
className="my-custom-button"
|
|
25
|
+
style={{ backgroundColor: 'rebeccapurple', borderRadius: '8px' }}
|
|
26
|
+
>
|
|
27
|
+
Custom Styled Button
|
|
28
|
+
</Button>
|
|
29
|
+
```
|
|
30
|
+
|
|
31
|
+
### A Note To Shopify - A Rant on Design Freedom vs. Standardization
|
|
32
|
+
|
|
33
|
+
Look, design should be up to whoever is creating it!
|
|
34
|
+
|
|
35
|
+
Polaris provides solid foundations - but they have been too way restrictive in letting developers arrange things their own way. I've been experimenting with Polaris for about a year now and no matter how much you stick to their standards, there's always going to be one thing you can't change, whether it be a misalignment or a bug.
|
|
36
|
+
|
|
37
|
+
**Design systems shouldn't be prisons; they should be playgrounds.**
|
|
38
|
+
|
|
39
|
+
The approach of "you can only style within our predefined variants" was stifling. Real design happens when developers can push boundaries, experiment with spacing, colours, and layouts that fit their specific use cases. Whether you're building for enterprise clients with strict brand guidelines or consumer apps that need personality, you should have the tools to make it happen. When imposing your design standard on other people, you restrict their creative ability.
|
|
40
|
+
|
|
41
|
+
This isn't about abandoning consistency - it's about enabling it on our terms.
|
|
8
42
|
|
|
9
43
|
### Installation
|
|
10
44
|
|
|
@@ -103,30 +137,3 @@ The `/snapit` GitHub comment command in pull requests will publish a snapshot NP
|
|
|
103
137
|
#### Manual visual regression testing
|
|
104
138
|
|
|
105
139
|
To start a server for manually viewing the visual regression testing examples, run `yarn run dev`.
|
|
106
|
-
|
|
107
|
-
## Learning resources
|
|
108
|
-
|
|
109
|
-
If you’re new to React, we recommend you start with the [official React Getting Started documentation](https://facebook.github.io/react/docs/hello-world.html). As you read through the topics we suggest you follow along using their [React Hello World CodePen example](http://codepen.io/gaearon/pen/ZpvBNJ?editors=0010).
|
|
110
|
-
|
|
111
|
-
Additional resources:
|
|
112
|
-
|
|
113
|
-
- Online training courses at [reacttraining.com](http://reacttraining.com), [buildwithreact.com](http://buildwithreact.com), and [reactforbeginners.com](http://reactforbeginners.com).
|
|
114
|
-
- The community resources in [Awesome React](https://github.com/enaqx/awesome-react).
|
|
115
|
-
- As questions and find answers in the various [React support communities](https://facebook.github.io/react/community/support.html).
|
|
116
|
-
|
|
117
|
-
## Methodology
|
|
118
|
-
|
|
119
|
-
We set out to make our components easy to use. Each of our components has a well-documented (and fully typed) public interface with strong, consistently-applied conventions. This way, developers don’t need to worry about the underlying implementation. Instead, they can focus on creating amazing merchant experiences.
|
|
120
|
-
|
|
121
|
-
We ensure that our components are made for everyone. They meet accessibility standards and are responsive to any screen or device. We also put a lot of effort into optimizing the performance of the components, so everyone can build inclusive experiences that work.
|
|
122
|
-
|
|
123
|
-
We make our components flexible enough to meet diverse needs. They present the information you pass in and give you smart callbacks when something has changed, but they don’t enforce any structure beyond that. No matter what type of experience you’re creating, you can use components as the building blocks of your product or feature.
|
|
124
|
-
|
|
125
|
-
## Contributing
|
|
126
|
-
|
|
127
|
-
Pull requests are welcome. See the [contribution guidelines](https://github.com/Shopify/polaris-react/blob/main/.github/CONTRIBUTING.md) for more information.
|
|
128
|
-
|
|
129
|
-
## Licenses
|
|
130
|
-
|
|
131
|
-
- Source code is under a [custom license](https://github.com/Shopify/polaris-react/blob/main/LICENSE.md) based on MIT. The license restricts Polaris usage to applications that integrate or interoperate with Shopify software or services, with additional restrictions for external, stand-alone applications.
|
|
132
|
-
- All icons and images are licensed under the [Polaris Design Guidelines License Agreement](https://polaris.shopify.com/legal/license)
|
package/package.json
CHANGED